LACKING TRACKING? STOP SLACKING. GOOGLE TAG MANAGER November 9, 2015 edui
HI! I M PAUL KOCH I work as a Senior Digital Analyst at Viget. @paulmkoch Viget Labs, LLC This presentation is CONFIDENTIAL and should not be shared without permission.
Last year, I talked about Google Tag Manager. What gives?
A lot has changed in a year.
RULES
TRIGGERS
MACROS
VARIABLES
AUTO-EVENT LISTENERS
EVENT-ASSOCIATED TRIGGERS
HIGHER-LEVEL VIEW WHY YOU NEED TMS RESOURCES FOR LATER
DIVE DEEPER LEARN WHAT S NEW MEASURE IT TODAY
ILLUMIGAMI.IO
1 of 14 U.S. partners
+ 155% Nov 14 Oct 15 Top million websites using Google Tag Manager. Source: http://trends.builtwith.com/widgets/google-tag-manager
Google Tag Manager Signal Tealium Adobe DTM Satellite Ensighten Others 47% Source: http://trends.builtwith.com/analytics/tag-management
QUICK POLL
Raise your hand if you
came to my talk last year?
have Tag Manager installed on your website?
have used Tag Manager?
have used the old interface?
have used the new interface?
feel proficient writing JavaScript?
How s our analytics setup doing?
TODAY
TODAY I. How it works II. Common terms III. Let s actually measure: a) web property as a variable b) social outbound clicks c) specific elements / your top navigation IV. Considerations and resources
If you don t have GTM set up yet, that s ok.
I ll post slides and notes.
HOW IT WORKS
HOW IT WORKS One JS snippet added to the site gtm.js Add tags through GTM interface, rather than markup GTM updates the JS file, which contains all tags added in the interface
Window: glass, <6ft tall Door: has knob, >6ft tall
COMMON TERMS
Pageview each page load of your site
Event other user interactions beyond loading a page
navigation clicks to external sites any interaction without a new page
events can have up to three values Navigation > Top > About Navigation > Footer > Careers
Gif Request also called a tracking pixel
example
Web Property the account number in your gif requests, so Google knows to track them to your account
Tag HTML code that executes on a page
GA: pageview tags event tags others (e.g., e-commerce)
but not just GA: Bing Facebook Quantcast Optimizely you name it
Trigger conditions for when a tag should fire formerly: rule
Container the GTM snippet you put on your website, through which all other tags load
Variable a function that lets you get certain values
INTERFACE! LET S DO THIS!
Note: The following information was demoed live in the interface during the talk, but is detailed here for future reference.
Getting Started
GETTING STARTED 1) Create an account at google.com/tagmanager, and add the container code to your site. 2) Enable built-in variables by navigating to the Variables tab and checking all variables within the Pages, Clicks, and Forms headings.
Add Your GA Web Property ID as a Variable
FINDING YOUR GA WEB PROPERTY Your web property ID ties your gif requests to your Google Analytics account. You can find it one of these ways: 1) View the source of your website (right click on your site and choose View Source Code) and search for UA- (if you already have an existing GA setup). 2) In the Google Analytics view where you want your data to track, select the Admin link at the top of the page, then click Property Settings on the next page. You web property will be listed at the top of the page under Tracking Id.
SETTING WEB PROPERTY AS A VARIABLE 1) Within Google Tag Manager, click the Variables tab. Under the User-Defined Variables heading, click the New button. 2) Create a name for your variable (e.g., Google Analytics ID ). Under Choose Type, select Constant. 3) Paste your web property ID into the Value field (e.g., UA-7174365-1). Click Create Variable. This value is now accessible automatically within tags and triggers.
Set Up a Pageview Tag
SETTING UP A PAGEVIEW TAG Note that this pageview tag would replace the GA code that you typically have on each page of your site. 1) Select Tags in the side menu, and click New. 2) Under Choose Product, select Google Analytics. 3) If you are creating a brand new analytics implementation, select Universal Analytics within the Tag Type. If you want to supplement an existing Classic implementation, click Classic Google Analytics. You can tell if you re using Classic Analytics by reviewing your gif requests. In Chrome, select View > Developer > Developer Tools, refresh the page, and search for collect or utm within the Network tab of the developer tools.
UNIVERSAL VS. CLASSIC REQUESTS Universal: collect Classic: utm.gif
SETTING UP A PAGEVIEW TAG 4) Within the Tracking ID field, type in double brackets {{ which will automatically list out the variables you have accessible to you. Select the web property ID variable that you previously created. Click Continue. 5) Choose to fire on All Pages, then click Create Tag. 6) To preview whether the tag is firing as expected, click the arrow beside the Publish button in the upper right hand corner of the page, and select Preview. Visit your site, and review the information that appears in the preview pane at the bottom of the page.
Measure Outbound Clicks to Social Media
MEASURE OUTBOUND CLICKS TO SOCIAL 1) Create a new tag ( Tags > New. ) As with your pageview tag, select Google Analytics > Universal Analytics (most likely) > add your web property ID variable as the tracking ID. 2) Change the Track Type from Page View to Event. 3) The event Category, Action, and Label fields can be whatever values make the most sense to your organization. In our example, we chose:
MEASURE OUTBOUND CLICKS TO SOCIAL 4) Within Fire On, select Click. Select Just Links within the Targets field. Keep Wait for Tags checked, but un-check Check Validation. 5) Within the Enable When section, choose to enable the trigger whenever Page URL matches RegEx (ignore case).*. This setting means that the click listener will activate on all pages. You should almost always use this setting when enabling clickbased triggers. 6) In our example, we chose Fire On Click URL matches RegEx (ignore case).*((twitter\.com) (tumblr\.com)).*). This is a regular expression to match multiple URLs in a single condition. You can learn more about regular expressions here:
MEASURE OUTBOUND CLICKS TO SOCIAL https://goo.gl/kyuqxi. Alternatively, if you prefer not to use regular expressions, you could create two triggers one for Click URL contains twitter.com and another for Click URL contains tumblr.com. 7) To preview that the tag is firing appropriately, you must open the link in a new tab. The Preview pane is stateless, so it reloads with each page load. To preview what happens upon link clicks, you can click to open them in a new tab by holding Command while clicking the link.
Track Your Top Navigation and Other Elements
TRACK YOUR TOP NAVIGATION 1) Inspect the element you want to measure (right click > Inspect Element ). Identify the class or id that accounts for this particular element. In our example on pointlesscorp.com, we chose a class of header nav. 2) By default, GTM evaluates only the exact element being clicked not its parent classes or ids. Therefore, we must create a variable using custom JavaScript. Copy the JS from bit.ly/parentclass. Choose Variables > New > Custom JavaScript. 3) In the Configure Variable field, paste in the JavaScript. In the two places that say REPLACE, add your class name or id. If you want to look for an id instead of a class, change the two instances of el.classname in the code to el.id.
TRACK YOUR TOP NAVIGATION 4) Create a new tag ( Tags > New. ) As with your pageview tag, select Google Analytics > Universal Analytics (most likely) > add your web property ID variable as the tracking ID. Change the Track Type from Page View to Event. 5) In our demo, we added an event Category of Navigation, an Action of Top, and a Label of {{Click Text}}. {{Click Text}} is a variable that will dynamically pull in the anchor text of clicked links. 6) Choose a Click event. Within Configure Trigger, select All Elements. Within Fire On, choose the variable you created to check for the parent class or id, and select contains true.
TRACK YOUR TOP NAVIGATION
Publish
PUBLISH 1) When you click to Publish, the tracking immediately deploys on your site. 2) Test thoroughly ahead of time by viewing your network gif requests, checking the real-time Google Analytics reports, and QAing across browsers using Browserstack.
CONSIDERATIONS
CONSIDERATIONS If you already have tracking on your site, you ll usually check Set Tracker Name and leave the field blank (or better yet, upgrade on-page code to GTM) GTM code must identically match on-page code settings (domain name, allow linker, allow hash, etc.) within the Fields to Set dropdown QA data by checking gif requests and Real Time across browsers before publishing
RESOURCES
analyticsacademy.withgoogle.com
simoahava.com
browserstack.com
Thanks! @paulmkoch paul.koch@viget.com Viget Labs, LLC This presentation is CONFIDENTIAL and should not be shared without permission.