O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
Fun with Google Tag
Manager
hannah@polkadotdata.com
charlotte@polkadotdata.com
Hannah Deakin and Charlotte Upfold
Polka Do...
Breaking
the ice
• Polka Dot Data – we’re the web
analytics specialists from Hampshire!
• Hannah – Senior Data Technologis...
Just a few of
our clients
We’ve loved the variety!
Project Kick off Call
GA & GTM Audits & Updates
KPI Dashboard
KPI Scope & Mapping
What we do for EVERY client:
1 hr Handov...
Google Tag
Manager –
what, why and
how?
• A tag management system that’s part of the Google Marketing
Platform
• Google An...
How it all fits together
• GTM
Container
Snippet
• DataLayer
Website
• Tags
• Triggers
• Variables
GTM
Container
Data!
Goo...
GTM Concepts: Tags, Triggers and Variables
TAGS
TRIGGERS
VARIABLES
• Snippets of code, pre-built or custom
• Add customisa...
Our Challenge Today
Add weather tracking to Google’s
Ecommerce demo site
• https://enhancedecommerce.appspot.com/
• An onl...
Trigger-
tastic fun
Getting
set up
Variables
& the
Datalayer
Tags at
your
service
Putting it
all
together
hannah@polkadotd...
What tools do we need today?
• Laptop + WiFi
http://bit.ly/gtm_workshop
• Chrome + extensions:
• Needed: Tag Manager Injec...
Creating a new GTM container
• https://marketingplatform.google.com/about/tag-manager/
• Click “Start for Free”
• 1) Accou...
Your new GTM container!
• Other nice to haves: A test Google Analytics account
Getting
set up
hannah@polkadotdata.com
char...
Let’s explore some tags
• Tags are just snippets of code (prebuilt or custom)
• Lots of tag types are already provided
• W...
Task 1: Create your first tag!
• Create new GA PageView tag
• Tag type: Google Analytics – Universal Analytics
• Track Typ...
GTM
preview
Task 1: Let’s test the tag works
In GTM, click Preview at the top right
In Chrome, go to https://enhancedecomm...
Big round of
cheers?
hannah@polkadotdata.com
Let’s explore triggers
Triggers are the rules that tell a tag when to fire
• Page View based: PageView, Dom Ready, Window ...
Task 2: Create a Trigger to fire when
Any Link is clicked
1) Create a click based trigger for all links
• Name: Click – Al...
Task 3: Create a tag that uses your
trigger
1) Create a Google Analytics tag called “GA Link Click Event”
Track Type = Eve...
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
Let’s explore GTM variables
• A GTM variable is a bit of information that can either:
• exact (a constant)
• dynamic
• ext...
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 Cli...
Task 5: Add location to your GA
event label
• Let’s add location to the datalayer of the web page
‘location’:’town-name’
•...
Here’s one we built earlier Variables &
the
Datalayer
How this looks in GTM preview
How this looks in GA
Variables &
the
Datalayer
Almost
there, let’s
put it all
together
hannah@polkadotdata.com
charlotte@polkadotdata.com
Rainy days and sunshine…
so I promised you weather tracking
https://openweathermap.org/api
• OpenWeatherMapAPI is a free A...
Task 6: Add weather to your
datalayer with a Custom HTML tag
1. New Custom HTML tag “Custom HTML – Weather Query”
2. Copy ...
<script>
(function() {
// You need to sign up to OpenWeatherMap for a free account. Once you do,
// you will find your APP...
How this looks in GTM preview
How this looks in GA
Putting it
all
together
Task 7: Create a new GA Weather Event tag and
trigger it from the weatherDone event
Trigger name: Custom - weatherDone
1. ...
How this looks in GTM preview
How this looks in GA
Putting it
all
together
Bonus Fun for home: Send weather
as custom dimensions to GA
• Make sure you have the custom dimensions set up in GA admin
...
Finally…
1. You can publish your GTM container by
clicking Submit at the top right
2. STOP your Google Tag Manager Injecto...
Set up
Variables
Tags
Weather
tracking
hannah@polkadotdata.com
charlotte@polkadotdata.com
Congratulations!
You got through...
Insights
from your
website
Hannah Deakin
Charlotte Upfold
We’d love to get your feedback, what other courses
would you fin...
Próximos SlideShares
Carregando em…5
×

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

120 visualizações

Publicada em

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

Publicada em: Dados e análise
  • Seja o primeiro a comentar

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@polkadotdata.com charlotte@polkadotdata.com 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 hannah@polkadotdata.com charlotte@polkadotdata.com
  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 hannah@polkadotdata.com charlotte@polkadotdata.com
  8. 8. Our Challenge Today Add weather 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. 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. 10. What tools do we 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. 11. Creating a new GTM 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. 12. Your new GTM container! • Other nice to haves: A test Google Analytics account Getting set up hannah@polkadotdata.com charlotte@polkadotdata.com
  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 hannah@polkadotdata.com charlotte@polkadotdata.com
  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 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. 16. Big round of cheers? hannah@polkadotdata.com
  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 hannah@polkadotdata.com charlotte@polkadotdata.com
  27. 27. Rainy days and sunshine… 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. 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 (http://bit.ly/gtm_workshop) 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 = '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. 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 hannah@polkadotdata.com charlotte@polkadotdata.com 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! hannah@polkadotdata.com charlotte@polkadotdata.com

×