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

1. Fun with Google Tag
Manager
hannah@polkadotdata.com
charlotte@polkadotdata.com
Hannah Deakin and Charlotte Upfold
Polka Dot Data

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. Just a few of
our clients
We’ve loved the variety!

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. 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 all fits 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
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. 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 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. 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. Your new GTM container!
• Other nice to haves: A test Google Analytics account
Getting
set up
hannah@polkadotdata.com
charlotte@polkadotdata.com

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. 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. 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. Big round of
cheers?
hannah@polkadotdata.com

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. 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. 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. 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. 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. 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. 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. Here’s one we built earlier Variables &
the
Datalayer

25. How this looks in GTM preview
How this looks in GA
Variables &
the
Datalayer

26. Almost
there, let’s
put it all
together
hannah@polkadotdata.com
charlotte@polkadotdata.com

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. 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. <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. How this looks in GTM preview
How this looks in GA
Putting it
all
together

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. How this looks in GTM preview
How this looks in GA
Putting it
all
together

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. Finally…
1. You can publish your GTM container by
clicking Submit at the top right
2. STOP your Google Tag Manager Injector 

35. Set up
Variables
Tags
Weather
tracking
hannah@polkadotdata.com
charlotte@polkadotdata.com
Congratulations!
You got through all this:
Triggers

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