Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Track Everything with Google Tag Manager - #DFWSEM May 2017

1,457 views

Published on

Google Tag Manager can do so much more than just fire your conversion tracking pixels. Learn how you can use GTM's out-of-the-box functionality, plus custom HTML and jQuery scripts, to track everything your heart desires - and even go beyond tracking to do things like personalize and canonicalize your site!

Published in: Marketing

Track Everything with Google Tag Manager - #DFWSEM May 2017

  1. 1. @ruthburr #DFWSEM Track Everything with Google Tag Manager DFWSEM May 2017
  2. 2. Hello DFWSEM! Today we’re talking about: • What Google Tag Manager is and why it’s great • How to use its basic functionality to track all manner of things • How to use its customization abilities to track EVEN MORE things • How to use it to do things besides tracking @ruthburr #DFWSEM Ruth Burr Reedy Director of Strategy, UpBuild LLC https://upbuild.io @ruthburr
  3. 3. @ruthburr #DFWSEM The Tracked and the Curious
  4. 4. @ruthburr #DFWSEM Intro: What is Google Tag Manager?
  5. 5. Loading a Webpage @ruthburr #DFWSEM Styles Scripts Fonts Assets Content When your browser requests a webpage from your server, it goes and gets all the components of your site, assembles them into a site, and returns that to you. All those component parts are called…
  6. 6. @ruthburr #DFWSEMThe DOM! No, not Dominic Toretto, street racer and family man.
  7. 7. The Document Object Model (DOM) @ruthburr #DFWSEM Document HTML <head> <body> <title> <meta> <p> <img> The Document Object Model is basically a branching “tree” of everything on the site – starting with the document as a whole, then breaking into its component parts, and their component parts, and so on for every object on the site.
  8. 8. Tags @ruthburr #DFWSEM “Tags” in the context of tag management systems aren’t HTML tags like e.g. your title and description tags. They’re little bits of JavaScript that send data to a 3rd party, such as conversion tracking pixels or the code that sends data to Google Analytics.
  9. 9. @ruthburr #DFWSEM Document HTML <head> <title> <meta> tag tag tag tag tag tag Tags are usually implemented in the <head> of your site. That means a development ask to get them implemented, and it means that having a lot of tags can bloat your DOM and slow down page load time.
  10. 10. Google Tag Manager @ruthburr #DFWSEM Document HTML <head> <title> <meta> GTM Google Tag Manager is a container that sits in the <head>, that basically says “do everything in this box.” Then, you can add or remove whatever you want through the GTM interface without having to get developers involved.
  11. 11. Old and Busted: <button onClick=“ga(‘send’, ‘event’, ‘whitepapers’, ‘download’, ‘tracking- guide’);”>Tracking Guide</button> New Hotness: @ruthburr #DFWSEM GTM also means that you no longer have to manually add event tracking code to things that you want to fire GA events. Instead, you can use GTM to add event tracking, which really increases the number of events you can easily track.
  12. 12. @ruthburr #DFWSEM Components of GTM
  13. 13. Tags @ruthburr #DFWSEMWe talked about tags already.
  14. 14. Triggers @ruthburr #DFWSEM Triggers tell tags when to fire. This can be on something like a page view, or an action such as a click, an event or a form submission.
  15. 15. Variables @ruthburr #DFWSEM Variables are pieces of data with names. A custom variable basically tells Google, “when I say this name, I mean this piece of data.”
  16. 16. Nested Variables @ruthburr #DFWSEMGTM also allows for nested variables. You can set variables A, B, and C; tell GTM that A+B+C=X, ask for X, and GTM will return A+B+C.
  17. 17. @ruthburr #DFWSEM Let’s Do This!
  18. 18. Add the Container @ruthburr #DFWSEM To start, add the container to your site. There’s a tag for the <head> and a tag immediately after the opening <body> tag.
  19. 19. @ruthburr #DFWSEM If you’re on WordPress, there are plenty of plugins that will do this. The one we use is just called “Google Tag Manager for WordPress.”
  20. 20. Make Sure It’s on Every Page @ruthburr #DFWSEM Use the Custom Search functionality in Screaming Frog to find pages that have your GTM ID on them, along with any that don’t.
  21. 21. Dream Big @ruthburr #DFWSEM Figure out what you want to track! You don’t need to track everything – resist the temptation of data for data’s sake – but in a perfect world, what questions would you be able to answer about how people use your site, and what information would you need to answer them?
  22. 22. Develop Naming Conventions @ruthburr #DFWSEM Category Action Label Site section or content area Action taken Element acted upon Footer Social button click Facebook Product Page Related products click {{page path}} Write down every event you want to track and define some naming conventions around your categories, actions and labels. Consistent naming conventions means other people at your organization will be able to understand your data and set up tracking in a consistent way.
  23. 23. @ruthburr #DFWSEM Level 1: Standard Features
  24. 24. Built-In Tag Templates @ruthburr #DFWSEM GTM has a ton of built-in templates for commonly-used tags. Check out the tags you use and move as many as possible into GTM. Not only does GTM make tags easier to implement, it makes them easier to remove later. Old tags can really drag down your page load time.
  25. 25. Basic Analytics Tracking @ruthburr #DFWSEM Move your Google Analytics tracking into GTM by firing the Universal Analytics tag on Page View. Note that you can enter your GA UID as a static value, or as a variable.
  26. 26. Basic Analytics Tracking @ruthburr #DFWSEM Create a variable that’s your GA UID. It will make implementing Analytics tags a lot easier so you don’t have to copy and paste it every time – plus it means you can copy tags to other containers easily as long as the GA UID variable is called the same thing.
  27. 27. Basic Analytics Tracking @ruthburr #DFWSEM
  28. 28. Caution! @ruthburr #DFWSEM Make sure you don’t have hard-coded and GTM Google Analytics tracking at the same time – it will make your data messy. Also, make sure you don’t have a gap between removing hard-coded tracking and implementing in GTM, or you’ll have no data at all.
  29. 29. Additional Reading @ruthburr #DFWSEM Analytics Implementation Methods Go Head-to-Head Seamlessly Switch from Hardcoded Analytics to GTM Here are a couple of blog posts with additional information on implementing GA tracking in GTM, and switching from hardcoded to GTM correctly.
  30. 30. Basic Event Tracking @ruthburr #DFWSEMNow let’s track some events.
  31. 31. Basic Event Tracking @ruthburr #DFWSEM Your Category, Action and Label can all be static values, or variables. For the most part, “Non-Interaction Hit” will be False, unless you want to track an event that doesn’t require a user interaction, such as a video auto-play.
  32. 32. Built-In Variables @ruthburr #DFWSEM You can add custom variables, but GTM also includes a lot of built-in variables for things like CSS Element, Click URL, Form ID, Page URL, etc. that you can use to configure tags and triggers.
  33. 33. RegEx Like Crazy @ruthburr #DFWSEM As with many things related to Google Analytics, Google Tag Manager becomes a lot more customizable with the use of regular expressions. Here’s an example of RegEx being used to fire a tag on blog posts, but not at the main blog page at /blog.
  34. 34. Mix and Match Track… • Clicks • Content expansions • Video views • Events • Page Views • Conversions • Social traffic • etc. By… • Page URL • Page path • Link text • Referrer • Site section • Form ID • etc. @ruthburr #DFWSEM So with the built-in variables, you can already track a ton of stuff and use a ton of other stuff as your event labels.
  35. 35. @ruthburr #DFWSEM Level 2: Customization
  36. 36. What is the Data Layer? @ruthburr #DFWSEM Experience Data Application The Experience layer is everything a user can see and interact with – “Experience,” if you will – on a site. The Application layer is the database that drives the experience. The data layer sits between those two things.
  37. 37. The Data Layer @ruthburr #DFWSEM You can push information into the data layer that the user doesn’t necessarily need to see, but that you still want to follow them. Think of it like a pocket – people can’t see what’s in your pocket, but you still carry it with you and you can pull things out of your pocket at any time.
  38. 38. Passing Data In dataLayer.push({ ‘event’:’something happened’ }); @ruthburr #DFWSEM We can use a bit of JavaScript called dataLayer.push to push information into the data layer.
  39. 39. Listen and Push @ruthburr #DFWSEM Using GTM, we can “listen” for an event and then, when it happens, push that information into the data layer – then use GTM to get that data out and into Google Analytics.
  40. 40. jQuery @ruthburr #DFWSEM https://builtwith.com The best way to do this is with jQuery, which is a library that makes JavaScript simpler and more pleasant to use. We use BuiltWith to see whether or not a site is built using jQuery – most sites with JavaScript functionality are.
  41. 41. Use GTM to Inject jQuery @ruthburr #DFWSEM If your site isn’t built with jQuery, you can use GTM to inject it. This can be a bit fiddly so I wouldn’t recommend doing it unless you’re pretty sure you know what you’re doing.
  42. 42. jQuery Selectors and Handlers @ruthburr #DFWSEM Selectors: Locations in the DOM Handlers: Actions on those locations Every location in the DOM has a unique jQuery selector, which is basically the same thing as a unique CSS selector. A handler is an action on those locations. (The Rock is Dom’s handler with the Domestic Security Service in the movies! GET IT?)
  43. 43. How to Find Your Selector @ruthburr #DFWSEM To find an element’s unique jQuery selector, we use a Chrome extension called jQuery Unique Selector.
  44. 44. @ruthburr #DFWSEM Cheat sheet for CSS selectors: http://www.cheetyr.com/css-selectors The tool will give you a unique selector for an object, but they’re often inelegant and unwieldy. If you’d like a cheat sheet to find CSS selectors without the tool, check out this link from the folks at Cheetyr.
  45. 45. @ruthburr #DFWSEM In addition to individual objects, you can find a selector for a group of objects, to target all of them. The selector on this slide is for the top nav of UpBuild.io.
  46. 46. Handlers @ruthburr #DFWSEM .click() .submit() .hover() .change() SUBMIT SUBMIT A handler is an action that can be taken on an object. Some common handlers include click, submit, hover, and change, but there are lots of others.
  47. 47. So What? @ruthburr #DFWSEM
  48. 48. Anything: 1.with a unique jQuery selector 2.that can be interacted with can be tracked using GTM. Anything. @ruthburr #DFWSEMThis is my whole point.
  49. 49. Custom HTML Tags <script> jQuery(“ul#menu-main-menu a”).each(function(index){ @ruthburr #DFWSEM Unique selector Look at the links For each one, do this: Let’s walk through the anatomy of a custom HTML tag to find an element based on its selector, listen for an action, and then push GA event information into the data layer.
  50. 50. Custom HTML Tags <script> jQuery(“ul#menu-main-menu a”).each(function(index){ jQuery(this).click(function(){ @ruthburr #DFWSEM Listen for a click, and when it happens, do this:
  51. 51. Custom HTML Tags <script> jQuery(“ul#menu-main-menu a”).each(function(index){ jQuery(this).click(function(){ dataLayer.push({ ‘event’: ‘KPI Event’, ‘event.category’: ‘nav’, ‘event.action’: ‘nav click’, ‘event.label’: jQuery(“ul#menu-main-menu a”) [index].text.toLowerCase() @ruthburr #DFWSEM Put this info into the data layer: An event called KPI Event Grab the link text and make it lowercase Custom variables!
  52. 52. Custom HTML Tags <script> jQuery(“ul#menu-main-menu a”).each(function(index){ jQuery(this).click(function(){ dataLayer.push({ ‘event’: ‘KPI Event’, ‘event.category’: ‘nav’, ‘event.action’: ‘nav click’, ‘event.label’: jQuery(“ul#menu-main-menu a”) [index].text.toLowerCase() }); }); }) </script> @ruthburr #DFWSEM
  53. 53. Getting Data Out @ruthburr #DFWSEM Additional Reading: Data Layer Variable Versions Explained by Simo Ahava Now we’re going to create custom variables in GTM that match the variables we’re pushing into the data layer with our custom HTML tag. You’ll usually want Data Layer Version 2 – for more on the topic, check out Simo’s post.
  54. 54. Getting Data Out @ruthburr #DFWSEM Remember when we pushed an event called “KPI Event” in our Custom HTML tag earlier? Now we’re going to create a trigger for a tag to fire when the KPI Event tag fires.
  55. 55. Getting Data Out @ruthburr #DFWSEM Finally, we create a UA tag to pull our custom variables out of the data layer and then send them into Google Analytics, and set it to trigger on our KPI Event trigger.
  56. 56. Lookup Tables @ruthburr #DFWSEM Sometimes when you’re using things’ IDs and selectors as your event labels, their names aren’t pretty or easy to understand. GTM has a function called Lookup Tables that will allow you to push a different value into GA. In this example, it’s easier to use a lookup table to give our forms understandable names
  57. 57. Track Form Submits (not Button Clicks or Thank You Page Visits) @ruthburr #DFWSEM Using this methodology, we can listen for a .submit() handler on a form, tracking the actual form submission as opposed to a click on the submit button or a thank you page view.
  58. 58. Multiple Ways to Do One Thing @ruthburr #DFWSEM You may have noticed that GA’s click tracking can’t differentiate between multiple instances of the same link on one page. Using unique selectors, you can figure out which link people are actually clicking.
  59. 59. Drive a Site Redesign @ruthburr #DFWSEM If you know in advance that you’re going to be doing a site redesign, you can use GTM event tracking to learn about how people use your site – underused real estate, popular links, etc.
  60. 60. Form Abandonment @ruthburr #DFWSEM You can listen for a .change() handler on your form fields and then push that data when a form isn’t submitted. Using nested variables, you can start to see which fields people fill out and where they abandon the form.
  61. 61. Set Custom Dimensions @ruthburr #DFWSEM Additional Reading: Custom Dimensions with Google Tag Manager on Google Analytics Help Beth asked about passing blog post dates into Google Analytics. You can set a custom variable based on the post date’s CSS selector, then pass that to GA as a custom dimension.
  62. 62. Merge GA and CRM Data @ruthburr #DFWSEM Additional “Reading”: How to Connect Your CRM & Web Analytics Platforms on Portent Since CRM software assigns users unique IDs, you can grab those IDs and pass them into a custom dimension, then use GA’s Data Import functionality to import e.g. lead status (no PII though!) to track users’ activities relative to their conversion behaviors.
  63. 63. @ruthburr #DFWSEM Level 3: Beyond Tracking You can use GTM for things besides tracking!
  64. 64. Generate rel=canonical @ruthburr #DFWSEM Additional Reading: Here’s How to Generate and Insert Rel Canonical with Google Tag Manager, by Lucía Marín on Moz You can use GTM to generate canonical tags, if you don’t have access to add them manually or at the template level.
  65. 65. Update Element Styles @ruthburr #DFWSEM Before: After: You can use GTM to update element styles! Don’t do this a lot, or for everything, but if you know a change is scheduled, you can make it now in GTM while you wait for it to be deployed. Note that if you fire at Page View, the original version will display until the page is loaded, so fire on DOM Ready instead.
  66. 66. Inject semantic markup @ruthburr #DFWSEM Additional Reading: Using Google Tag Manager to Dynamically Generate Schema.org / JSON-LD Tags by Chris Goddard on Moz You can use GTM to inject semantic markup! We’ve been able to get markup to validate in the testing tool, show up in GSC and generate rich snippets with no inline markup at all.
  67. 67. Set Cookies @ruthburr #DFWSEMUse GTM to set cookies based on user behavior…
  68. 68. Personalize @ruthburr #DFWSEM…Then listen for those cookies and use GTM to personalize your site!
  69. 69. A Word of Warning @ruthburr #DFWSEM Live by the DOM, die by the DOM. If a redesign or other change causes your elements’ selectors to change, your tracking will break! Make sure you document what you’re doing, so you can easily update your tracking as needed.
  70. 70. @ruthburr #DFWSEM Time to Test All this customization means you’re going to need to do a lot of testing and tweaking to get everything just the way you want it.
  71. 71. Preview @ruthburr #DFWSEM GTM’s Preview environment allows you to test changes and see their effect, to make sure the data you need is being passed the way you want it to be, before you publish your tags.
  72. 72. Workspaces @ruthburr #DFWSEM The Workplaces function means that if more than one person/team is accessing GTM, they can build tags separately without worrying that publishing their changes will publish someone else’s incomplete work.
  73. 73. Environments @ruthburr #DFWSEM The Environments functionality means that if you have e.g. different dev, staging and production environments, you can publish the same tags to each environment one at a time, allowing you to test and maintain consistency.
  74. 74. GTM Sonar @ruthburr #DFWSEM GTM’s Preview functionality doesn’t work as well when you click a link, because it loads a new page before you can see what fired on the page you were just on. The GTM Sonar extension is a click listener that will record the click without following the link.
  75. 75. GTM Injector @ruthburr #DFWSEM If you’re waiting on a container to be implemented but want to get started configuring your tags, you can use the GTM Injector extension to inject GTM onto a page, so you can test.
  76. 76. @ruthburr #DFWSEM Thank You!

×