Downloaded 10 times
![<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 = 'https://api.openweathermap.org/data/2.5/weather?q='+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: weatherData.weather[0].main,
weatherDescription: weatherData.weather[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!](https://image.slidesharecdn.com/funwithgtmworkshop-181022202646/75/Having-fun-with-Google-Tag-Manager-implement-cool-things-like-weather-tracking-by-Hannah-Deakin-and-Charlotte-Upfold-29-2048.jpg){kind=tracking}
![<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 = 'https://api.openweathermap.org/data/2.5/weather?q='+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: weatherData.weather[0].main,
weatherDescription: weatherData.weather[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!](https://crownmelresort.com/image.slidesharecdn.com/funwithgtmworkshop-181022202646/75/Having-fun-with-Google-Tag-Manager-implement-cool-things-like-weather-tracking-by-Hannah-Deakin-and-Charlotte-Upfold-29-2048.jpg){kind=tracking}
Uploaded byEventz.Digital
Having fun with Google Tag Manager (implement cool things like weather tracking) by Hannah Deakin and Charlotte Upfold
This document is a workshop on using Google Tag Manager (GTM) for tracking website analytics, led by Hannah Deakin and Charlotte Upfold from Polka Dot Data. It covers GTM concepts like tags, triggers, and variables, along with a practical task to add weather tracking to an e-commerce demo site. Attendees are guided through creating tags, triggers, and integrating data from the OpenWeatherMap API to enhance their analytics capabilities.
More Related Content
Similar to Having fun with Google Tag Manager (implement cool things like weather tracking) by Hannah Deakin and Charlotte Upfold
![[Redis Released]- FalkorDB - Redis + Graph Agentic Memory’s Secret Sauce](https://cdn.slidesharecdn.com/ss_thumbnails/redisreleased-falkordbslidedeck-1125-251115194922-e1c0046b-thumbnail.jpg?width=640&height=640&fit=bounds)
Having fun with Google Tag Manager (implement cool things like weather tracking) by Hannah Deakin and Charlotte Upfold
- 1. Fun with GoogleTag Manager hannah@polkadotdata.com charlotte@polkadotdata.com Hannah Deakin and Charlotte Upfold Polka Dot Data
- 2. Breaking the ice • PolkaDot 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. Just a fewof our clients We’ve loved the variety!
- 4. Project Kick offCall 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. 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. How it allfits together • GTM Container Snippet • DataLayer Website • Tags • Triggers • Variables GTM Container Data! Google Analytics hannah@polkadotdata.com charlotte@polkadotdata.com
- 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 hannah@polkadotdata.com charlotte@polkadotdata.com
- 8. Our Challenge Today Addweather tracking to Google’s Ecommerce demo site • https://enhancedecommerce.appspot.com/ • 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. Trigger- tastic fun Getting set up Variables &the Datalayer Tags at your service Putting it all together hannah@polkadotdata.com charlotte@polkadotdata.com
- 10. What tools dowe need today? • Laptop + WiFi http://bit.ly/gtm_workshop • Chrome + extensions: • Needed: Tag Manager Injector • Nice to have: Google Analytics Debugger Getting set up hannah@polkadotdata.com charlotte@polkadotdata.com
- 11. Creating a newGTM container • https://marketingplatform.google.com/about/tag-manager/ • Click “Start for Free” • 1) Account Name: My DMSSO Test Container • 2) Container name: enhancedecommerce.appspot.com • 3) Accept t&Cs • 4) Note down or copy your GTM container ID: GTM-xxxxx Getting set up
- 12. Your new GTMcontainer! • Other nice to haves: A test Google Analytics account Getting set up hannah@polkadotdata.com charlotte@polkadotdata.com
- 13. Let’s explore sometags • 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 hannah@polkadotdata.com charlotte@polkadotdata.com
- 14. Task 1: Createyour 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. GTM preview Task 1: Let’stest the tag works In GTM, click Preview at the top right In Chrome, go to https://enhancedecommerce.appspot.com/ 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): enhancedecommerce.appspot.com 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.
- 17. Let’s explore triggers Triggersare 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. Task 2: Createa 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. Task 3: Createa 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. How this looksin GTM preview How this looks in GA Trigger- tastic fun TIP! Hold Ctrl while you click to keep it in the tab
- 21. Let’s explore GTMvariables • 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. Task 4: Addthe 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. Task 5: Addlocation 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. Here’s one webuilt earlier Variables & the Datalayer
- 25. How this looksin GTM preview How this looks in GA Variables & the Datalayer
- 26. Almost there, let’s put itall together hannah@polkadotdata.com charlotte@polkadotdata.com
- 27. Rainy days andsunshine… so I promised you weather tracking https://openweathermap.org/api • 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. Task 6: Addweather to your datalayer with a Custom HTML tag 1. New Custom HTML tag “Custom HTML – Weather Query” 2. Copy the code from (http://bit.ly/gtm_workshop) weatherTag.txt 3. Set it’s trigger to be your “Click – All Links” trigger Putting it all together
- 29. <script> (function() { // Youneed 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 = 'https://api.openweathermap.org/data/2.5/weather?q='+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: weatherData.weather[0].main, weatherDescription: weatherData.weather[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. How this looksin GTM preview How this looks in GA Putting it all together
- 31. Task 7: Createa 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. How this looksin GTM preview How this looks in GA Putting it all together
- 33. Bonus Fun forhome: 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. Finally… 1. You canpublish your GTM container by clicking Submit at the top right 2. STOP your Google Tag Manager Injector
- 35.
- 36. Insights from your website Hannah Deakin CharlotteUpfold 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! hannah@polkadotdata.com charlotte@polkadotdata.com
Editor's Notes
- #24 Imagine we now want to know where the user was when they clicked this button - perhaps town. Avoid postcode – why? Imagine that on the page, there is a datalayer which contains that information and we want to extract it using GTM to use for our event. It looks like this {‘location’:’town-name’} e.g. {‘location’:’Southampton’} We will use GTM tag injector to mock this up, because we don’t have the Google dev team on hand to add this datalayer to their site… Clues: It will need a new variable in GTM, not built-in. What type? You can add this as the Event label, for your GA event tag. Don’t forget the double curly braces
- #25 Imagine we now want to know where the user was when they clicked this button - perhaps town. Avoid postcode – why? Imagine that on the page, there is a datalayer which contains that information and we want to extract it using GTM to use for our event. It looks like this {‘location’:’town-name’} e.g. {‘location’:’Southampton’} We will use GTM tag injector to mock this up, because we don’t have the Google dev team on hand to add this datalayer to their site… Clues: It will need a new variable in GTM, not built-in. What type? You can add this as the Event label, for your GA event tag. Don’t forget the double curly braces