EIEIOTECHNOVATION
← Training programmes

EIEIO / DATA SCIENCE

VUE.JS FOR GOOGLE TAG MANAGER & GOOGLE ANALYTICS

Course outline

2 days
Discuss this programme →

Duration

2 days

OVERVIEW

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

OBJECTIVE

  • Build Vue.js applications from small and simple ones up to large enterprise-level ones
  • Understand the theory behind Vue.js and use it in real projects
  • Leverage Vue.js in both Multi-Page and Single Page-Applications (MPAs and SPAs)
  • Learn the latest version of Vue (Vue 3), including the brand-new Composition API
  • Create Google Tag Manager & Analytics (GTM & GTA) page application
  • Apply GTM & GTA built page in webpage development environment

METHODOLOGY

This course is a theoretical and hands-on practical guided. Trainees will be taught, with examples and will be required to carry-our exercises immediately. Trainees will learn and practise making SPA/MPA of GTM & GTA and conduct a test on implementing, injecting, and accessing analysing data through Vue.JS application that they will build. VS Code is required to be installed for this course.

DAY 1

  • GETTING STARTED
  • Different Ways of Using Vue
  • Exploring Vue Alternatives
  • Building A First App With Just JavaScript
  • Join our Online Learning Community
  • Re-building the App with Vue
  • Vue vs "Vanilla JavaScript" (just JavaScript)
  • Setting Up the Course Development Environment
  • BASIC & CORE CONCEPTS-DOM INTERACTION WITH VUE
  • Creating and Connecting Vue App Instances
  • Interpolation and Data Binding
  • Binding Attributes with the "v-bind" Directive
  • Understanding "methods" in Vue Apps
  • Working with Data inside of a Vue App
  • Outputting Raw HTML Content with v-html
  • Practice: Data Binding
  • Understanding Event Binding
  • Events & Methods
  • Working with Event Arguments
  • Using the Native Event Object
  • Exploring Event Modifiers
  • Locking Content with v-once
  • Time to Practice: Event Binding
  • Data Binding + Event Binding = Two-Way Binding
  • Methods used for Data Binding: How It Works
  • Introducing Computed Properties
  • Working with Watchers
  • Methods vs Computed Properties vs Watchers
  • v-bind and v-on Shorthands
  • Time to Practice: Reactivity
  • Dynamic Styling with Inline Styles
  • Adding CSS Classes Dynamically
  • Classes & Computed Properties
  • Dynamic Classes: Array Syntax
  • Practise: Dynamic Styling
  • Practise: GTM & GTA Module Creation
  • RENDER CONDITIONAL & CONTENT LISTS
  • Rendering Content Conditionally
  • v-if, v-else and v-else-if
  • Using v-show Instead Of v-if
  • Rendering Lists of Data
  • Diving Deeper Into v-for
  • Removing List Items
  • Lists & Keys
  • Time to Practice: Conditional Content & List
  • COURSE PROJECT : GTM & GTA APPLICATION PAGE | Creating a GTM & GTA
  • Framework in Vue.JS
  • Get Started on Google Tag Manager (GTM)
  • Google Tag Manager Overview
  • Setup Account and Container
  • Setup Tags
  • Setup Triggers
  • Variables
  • Setup Variables
  • User Defined Variables
  • Data Layer
  • User Setup and Best Practices
  • Setup Users and Permissions
  • Best Practices for Google Tag Manager
  • Set up Google Analytics and see how a website is performing
  • Understanding website's conversion rate
  • Find out what pages of a website are the most popular
  • Find out the age, gender and location of a website's visitors
  • Find out which marketing activities are bringing in the most website
  • visitors
  • Go beyond the standard reports and learn advanced tips and tricks

DAY 2

  • VUE REACTIVITY
  • An Introduction to Vue's Reactivity
  • Vue Reactivity: A Deep Dive
  • One App vs Multiple Apps
  • Understanding Templates
  • Working with Refs
  • How Vue Updates the DOM
  • Vue App Lifecycle - Theory
  • Vue App Lifecycle - Practice
  • COMPONENTS
  • Introducing Components
  • The Why: Building Complex User Interfaces With Components
  • Multiple Vue Apps vs Multiple Components
  • DEVELOPMENT SETUP & WORKFLOW WITH VUE CLI
  • Module Introduction
  • Why We Need A Development Server
  • Why We Want A Better Developer Experience
  • A Note About The NodeJS Version
  • Installing & Using the Vue CLI
  • Inspecting the Created Project
  • Inspecting the Vue Code & ".vue" Files
  • Adding the "Vetur" Extension to VS Code
  • More on ".vue" Files
  • A New Vue Project
  • Creating a Basic Vue App
  • Adding a Component
  • Adding Styling
  • A Small Addition
  • An Alternative Setup - using "npm init" & Volar
  • COURSE PROJECT : GTM & GTA APPLICATION PAGE | Creating a GTM & GTA
  • Vue.JS App
  • COMPONENT COMMUNICATIONS FOR GTM & GTA
  • Introducing "Props" (Parent => Child Communication)
  • Prop Behavior & Changing Props
  • Validating Props
  • Supported Prop Values
  • Working with Dynamic Prop Values
  • Emitting Custom Events (Child => Parent Communication)
  • Defining & Validating Custom Events
  • Prop / Event Fallthrough & Binding All Props
  • Demo: Adding Components & Connecting Them
  • Demo: Adding More Component Communication
  • Time to Practice: Props & Custom Events
  • A Potential Problem
  • Provide + Inject To The Rescue
  • Provide + Inject for Functions / Methods
  • Provide + Inject vs Props & Custom Events
  • COMPONENTS FOR GTM & GTA
  • Project Setup
  • Global vs Local
  • Components
  • Scoped Styles
  • Introducing Slots
  • Named Slots
  • Slot Styles & Compilation
  • More on Slots
  • Scoped Slots
  • Dynamic Components
  • Keeping Dynamic Components Alive
  • Applying What We Know & A Problem
  • Teleporting Elements
  • Working with Fragments
  • The Vue Style Guide
  • Moving to a Different Folder Structure
  • PROJECT: IMPLEMENTING & RUNNING GTM & GTA APP ON A SERVER-BASED ENVIRONMENT

Programme scope, delivery arrangements and suitability are confirmed during enquiry.