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.

Having fun with Google Tag Manager (implement cool things like weather tracking) by Hannah Deakin and Charlotte Upfold


Published on

Digital Marketing Summit Southampton 2018, Hannah Deakin and Charlotte Upfold, Southampton, #Dmsso18, #DMSSO, #DigitalMarketing @polkadotdata

Published in: Data & Analytics
  • I pasted a website that might be helpful to you: ⇒ ⇐ Good luck!
    Are you sure you want to  Yes  No
    Your message goes here
  • To get professional research papers you must go for experts like ⇒ ⇐
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to enjoy the Good Life: making money in the comfort of your own home with just your laptop, then this is for YOU... ▲▲▲
    Are you sure you want to  Yes  No
    Your message goes here
  • $25 per hour jobs on Facebook, now hiring! ★★★
    Are you sure you want to  Yes  No
    Your message goes here

Having fun with Google Tag Manager (implement cool things like weather tracking) by Hannah Deakin and Charlotte Upfold

  1. 1. Fun with Google Tag Manager Hannah Deakin and Charlotte Upfold Polka Dot Data
  2. 2. Breaking the ice • Polka Dot Data – we’re the web analytics specialists from Hampshire! • Hannah – Senior Data Technologist • Charlotte – Chief Number Whizz • Participant introduction • Name • Role • Experience level • Something you want to learn • What would your dream lunch be?
  3. 3. Just a few of our clients We’ve loved the variety!
  4. 4. Project Kick off Call GA & GTM Audits & Updates KPI Dashboard KPI Scope & Mapping What we do for EVERY client: 1 hr Handover Webinar Documentation Channel Guide Expert Support Throughout And most importantly, an amazing GA & GTM implementation!
  5. 5. Google Tag Manager – what, why and how? • A tag management system that’s part of the Google Marketing Platform • Google Analytics, DataStudio, Google Optimise, GTM • Integrates really well with GA, AdWords • Also Facebook, Bing, Floodlight – through built-in tags • Can use Custom HTML tags to add in anything that hasn’t yet been integrated • In the old days… • All your tracking code inline on the web page. • Any updates, go through dev • Now… • GTM snippet placed inline on the web page • Devs provide the information through a datalayer – a collection of name-value pairs, information about what the page is showing • GTM tags can replace all other inline tracking code • Decouples dependency between dev and marketing
  6. 6. How it all fits together • GTM Container Snippet • DataLayer Website • Tags • Triggers • Variables GTM Container Data! Google Analytics
  7. 7. GTM Concepts: Tags, Triggers and Variables TAGS TRIGGERS VARIABLES • Snippets of code, pre-built or custom • Add customisations to work for you • Rules and scenarios used against each tag to tell it when to fire • Specific details of information that can either be exact, extracted from site, or built to be dynamic. • Referenced in Tags and Triggers
  8. 8. Our Challenge Today Add weather tracking to Google’s Ecommerce demo site • • An online T-Shirt shop • Useful to try out GA enhanced ecommerce yourself, and to see what the code should look like • We’re going to add some tracking of our own to it • Page views • Links clicked • Adding in location information • Weather tracking
  9. 9. Trigger- tastic fun Getting set up Variables & the Datalayer Tags at your service Putting it all together
  10. 10. What tools do we need today? • Laptop + WiFi • Chrome + extensions: • Needed: Tag Manager Injector • Nice to have: Google Analytics Debugger Getting set up
  11. 11. Creating a new GTM container • • Click “Start for Free” • 1) Account Name: My DMSSO Test Container • 2) Container name: • 3) Accept t&Cs • 4) Note down or copy your GTM container ID: GTM-xxxxx Getting set up
  12. 12. Your new GTM container! • Other nice to haves: A test Google Analytics account Getting set up
  13. 13. Let’s explore some tags • Tags are just snippets of code (prebuilt or custom) • Lots of tag types are already provided • We use “Google Analytics – Universal Analytics” the most and Custom HTML • What other ones catch your eye and are relevant to you? • E.g. Google Ads Remarketing, Awin, Bing, Twitter, Adometry • All the ones provided encapsulate all the code, so you know only need key information • E.g. Account ID, revenue, product ids Tags at your service
  14. 14. Task 1: Create your first tag! • Create new GA PageView tag • Tag type: Google Analytics – Universal Analytics • Track Type: Pageview • Google Analytics settings: New Variable • GA Tracking ID is: UA-123408449-2 • Add a trigger to it to tell it when to fire – “All Pages” to fire on every page Tags at your service
  15. 15. GTM preview Task 1: Let’s test the tag works In GTM, click Preview at the top right In Chrome, go to It doesn’t have your GTM container on it at the moment. Let’s add it in! In Chrome, open TagManagerInjector GTM container id: GTM-XXX Include Domain(s): Click START In Chrome, hit Ctrl-F5 to refresh the page You should see the GTM preview pop-up in the bottom half of your screen You should see your tag fire – like this: Tag Manager Injector Refresh! Ctrl-F5
  16. 16. Big round of cheers?
  17. 17. Let’s explore triggers Triggers are the rules that tell a tag when to fire • Page View based: PageView, Dom Ready, Window Loaded • Click based: All elements, links • User engagement based: e.g. element visibility, form submission • Others – e.g. custom events, javascript errors and timing Can be customised to fire on certain conditions e.g. • Page URL matches a particular RegEx • Click Text equals some text • Custom Javascript variable does not equal true Trigger- tastic fun
  18. 18. Task 2: Create a Trigger to fire when Any Link is clicked 1) Create a click based trigger for all links • Name: Click – All Links • Trigger type: Click – Just Links • This trigger fires on: All Link Clicks Trigger- tastic fun
  19. 19. Task 3: Create a tag that uses your trigger 1) Create a Google Analytics tag called “GA Link Click Event” Track Type = Event Category = “<Your Name> - Link Click” 2) Assign the new “Click – All Links” trigger to your new GA Event tag 3) Save changes and Preview Trigger- tastic fun
  20. 20. How this looks in GTM preview How this looks in GA Trigger- tastic fun TIP! Hold Ctrl while you click to keep it in the tab
  21. 21. Let’s explore GTM variables • A GTM variable is a bit of information that can either: • exact (a constant) • dynamic • extracted from site • Within GTM, use double curly-braces to refer to variables: {{variable-name}} • A datalayer is just a collection of name-value pairs: • in human-readable text format (JSON) • GTM accesses a specific datalayer variable – see the GTM snippet • Always push objects to the datalayer, to prevent overwriting Variables & the Datalayer
  22. 22. Task 4: Add the link text to your GA event action • In task 3, we created a tag and trigger for a link click • Add the Click Text of the link to the Event Action Clues: • GTM gives you a Built-In Variable to help • Type in double curly braces {{ and GTM will offer you a list to choose from Variables & the Datalayer
  23. 23. Task 5: Add location to your GA event label • Let’s add location to the datalayer of the web page ‘location’:’town-name’ • In Tag Manager Injector, add: ‘location’:’Southampton’ • In GTM, get the location datalayer value for your ‘GA Link Click Event’ label field Clues: • It will need a new variable in GTM, not built-in. What type? Variables & the Datalayer
  24. 24. Here’s one we built earlier Variables & the Datalayer
  25. 25. How this looks in GTM preview How this looks in GA Variables & the Datalayer
  26. 26. Almost there, let’s put it all together
  27. 27. Rainy days and sunshine… so I promised you weather tracking • OpenWeatherMapAPI is a free API you can query to get the weather • Free to register – gives you an ID • Can run queries from within a browser We will use our “DLV – location” variable to query the API and push weather information into our datalayer! Putting it all together
  28. 28. Task 6: Add weather to your datalayer with a Custom HTML tag 1. New Custom HTML tag “Custom HTML – Weather Query” 2. Copy the code from ( weatherTag.txt 3. Set it’s trigger to be your “Click – All Links” trigger Putting it all together
  29. 29. <script> (function() { // You need to sign up to OpenWeatherMap for a free account. Once you do, // you will find your APP ID in your account dashboard. var owmAppId = '94d81e5044fc8c17aa4523dedc3c5ca4'; // location comes from the datalayer variable we built earlier var location = {{DLV - location}}; // weatherQuery builds the query string to send to the API. You can try this in your browser var weatherQuery = ''+location+',uk&appid=' + owmAppId + '&units=metric'; var protocol = document.location.protocol === 'https' ? 'https' : 'http'; var fetchWeatherData = function() { // This sends the request to the API and waits until the request is complete. // Then it extracts some of the information to the datalayer. jQuery.when(jQuery.getJSON(weatherQuery)).done(function(weatherData) { window.dataLayer.push({ event: 'weatherDone', weather:[0].main, weatherDescription:[0].description, temperature: weatherData.main.temp }); }).fail(function(jq, status, message) { console.log('Weather request failed: ' + status + '-' + message); }); }; // Uncomment starred lines below if you want to only query weather every 30 minutes. // Highly recommend this is done when using on a real site. // Add a 1st party cookie variable called "session" and remove space from { {Cookie below // * if (typeof { {Cookie - session alive}} == 'undefined') { console.log('About to fetchWeather for '+ location); fetchWeatherData(); // * } // Reset "session" cookie with a 30-minute expiration // * var d = new Date(); // * d.setTime(d.getTime()+1800000); // * var expires = "expires="+d.toGMTString(); // * document.cookie = "session=1; "+expires+"; path=/"; })(); </script> Sample code for weather tag Please register with OpenWeatherMap API to get your own ID if you want to use this for real!
  30. 30. How this looks in GTM preview How this looks in GA Putting it all together
  31. 31. Task 7: Create a new GA Weather Event tag and trigger it from the weatherDone event Trigger name: Custom - weatherDone 1. Trigger Type: Custom Event 2. Event Name: weatherDone Tag name: GA Weather Event 1. Track Type: Event 2. Category: <Your name> - weather 3. Action: new variable for “weather” 4. Label: new variable for “temperature”
  32. 32. How this looks in GTM preview How this looks in GA Putting it all together
  33. 33. Bonus Fun for home: Send weather as custom dimensions to GA • Make sure you have the custom dimensions set up in GA admin • Update your GA Settings variable – with custom dimension 1 set to pull “weather” and custom dimension 2 set to pull “temperature” • You’d probably also want a custom dimension for location • This is harder to test in real-time, but will let you make some awesome reports Putting it all together
  34. 34. Finally… 1. You can publish your GTM container by clicking Submit at the top right 2. STOP your Google Tag Manager Injector 
  35. 35. Set up Variables Tags Weather tracking Congratulations! You got through all this: Triggers
  36. 36. Insights from your website Hannah Deakin Charlotte Upfold We’d love to get your feedback, what other courses would you find useful? If you’d like to get in touch please do – our website, email, LinkedIn, Facebook Analytics Training Set up & Auditing Get the most from your website!