Google Tag Manager and - PowerPoint Presentation

Slide1
Slide2

Google Tag Manager and YaleSites: The Next Step for Google Analytics

Yale University

DrupalCamp

2016

Steve

Wieda

March 24, 2016

Yale University LibrarySlide3

What is Google Tag Manager?According to Google:“Google Tag Manager is a tag management system that allows you to quickly and easily update tags.”Slide4

The End.Slide5

Google Tag ManagerGoogle Tag Manager allows you to add tags to your web pages through a GUITags are snippets of HTML, usually including JavaScript, that allow you to extend the functionality of web pages

These tags can be added without coding experience

Tag Manager is particularly useful for inserting HTML and JavaScript into web applications for which you do not have access to the codeSlide6

Tag Manager and Google AnalyticsBuilt-in Tag functionality is amazingly diverse and spans from inserting advertisements to tracking mouse movement to creating heat maps.Tags can be custom coded for novel purposes, e.g. tracking scrolling on a web page

We’ll look at Google Tag Manager and how it relates to Google Analytics, specifically in how to generate Events in Google Analytics using Tag ManagerSlide7

Triggering Events: The traditional wayCustom JavaScript has to be embedded in the page

Custom JavaScript calls

ga

() to manually trigger an Event

The Event Category, Action, and Label are all hard-coded in the page

Changes require having a developer modify the JavaScript

Changes have to be put into production to fully testSlide8

Triggering Events: Google Tag ManagerTags are inserted into the page via a GUI

Google Tag Manager takes care of triggering the Event send

The Event Category, Action, and Label are easily set in the GUI

Changes do not require having a developer modify the code

Tags can be tested immediately in your browser prior to deploymentSlide9

Google Tag Manager and YaleSites

Create Tag Manager account at google.com/analytics

Create Container and get Container ID

Enable the Google Tag Manager Module

Modules > Statistics > Google Tag Manager

Configure the module with your GTM Container ID

Configuration > System > Google Tag Manager

You’re done!Slide10

Terminology: Tags and TriggersA Tag is a piece of HTML and JavaScript that performs some function in your web page

A

Trigger

is a condition that causes the Tag to perform its action

You could have a Tag that sends an Event to Google Analytics

You could say that “Anyone Clicking This <div>” is the Trigger to fire the Tag that sends an Event to Google Analytics.Slide11

Step One: Determine what you want to trackThe first thing you need to do is to define what you want to trackGenerally speaking, you want to track actions, such as clicking a button, submitting a form, or scrolling down on a page

For this demo, we’ve decided to track how many times someone expands the “Libraries & Collections” navigation element on the Library’s website

http://library.yale.edu

by sending an Event every time someone clicks on that

nav

elementSlide12

Step Two: Define the TriggerThink of what needs to happen in order to send an EventIf clicking “Libraries & Collections” is what should send the event, the click is the Trigger

Be prepared to describe the Trigger in a way Tag Manager can understand

In our case, anyone clicking on a <div> with the CSS class “libraries-block-

nav

” should kick off the EventSlide13

Step Three: Create the TagCreate a “Google Analytics” Tag

Choose Universal Analytics as the type

Insert your GA Tracking ID

Define the Event you want to send (Category, Action, Label)

Choose the libraries-block-

nav

class click as the TriggerSlide14

Step Four: Test and publishYou can test your tag right in your browserYou can watch the Event get triggered in Google Analytics “Real-Time” area

If the Event comes in as expected, publish and go live!Slide15

Step Five: Profit!Slide16

Demo of Google Tag ManagerSlide17