Documente Academic
Documente Profesional
Documente Cultură
It is also heavily used by Google Tag Manager, which relies on the data layer to
pass it information about what is happening on the website.
This is the first questions I ask in my Technology for Marketers workshop. Often
no-one can give me a complete answer. I am starting here because you have to
know the fundamentals in order to really understand the data layer.
Here’s what happens at a high level:
2. Your web browser sends a request (a message asking for data) out across the
Internet to the nearest Domain Name Server (DNS). The DNS holds a list of
domain names and their corresponding IP addresses (a unique identifier for a
computer or device attached to the Internet). The DNS looks up the domain
you requested in a table, and if found, returns the IP address of that domain.
This is the address of the computer that holds all the files that make up the
website you want to view.
3. Your web browser receives the IP address and sends out another request, this
time directly to the server holding the information you want.
The HTML may include references to JavaScript code, which is executed when the
page is rendered by the browser. JavaScript is a scripting language that runs in
your browser and allows the website to do clever things such as validating forms,
making images scroll, sending and receiving information from another source
(database, API, etc.) in the background, and much more.
It is within this JavaScript code that the data layer sits. In fact, a data layer is
simply a JavaScript variable or object.
The data layer can be very simple, composed of a single variable, or it can be
complex, composed of multiple nested variables. It all depends on what data you
need.
Example: Comeback
Consider a retail website that is running a fictional basket abandonment software
called Comeback. Comeback is loaded via a JavaScript tag included in the HTML
of every page of a website. Once loaded it sends a request to its servers that
contains data about the state of the basket and who the user is.
This data includes two variables: a unique identifier of the user, uid, and the value
of the items in the basket, total. Comeback stores this information in its database
so that it can trigger an email to the user should they not purchase within 24 hours.
For this to happen, the user ID and the basket total need to be somewhere on the
page so that the information can be passed to Comeback. That place is the data
layer.
Here’s what a data layer needed by the fictional Comeback software would look
like:
1 <script type="text/javascript">
2 var my_data = {
3 "uid": "1234",
4 "total": 29.99
5 }
6 </script>
A JavaScript object has been defined called my_data, which contains the two
variables uid and total. uid is set to 1234, and total is set to 29.99.
Notice how the value 1234 is enclosed by quotation marks. This indicates the value
is a string (a fancy way of saying a piece of text). This is different to
the total variable value of 29.99 which is not enclosed by quotation marks,
indicating it is a number.
Mistaking strings for numbers or vice versa is one of the biggest data layer
implementation mistakes I see and can result in inaccurate data being set to the
various system that rely on it.
If you use Google Tag Manager then you will already have a data layer on the page
called dataLayer.
If you use Qubit then the convention is to call your data layer universal_variable.
Tagman uses tm_params and Tealium expects it to be called utag_data.
Most of these tag management system let you specific what name you want to use,
but for simplicity it is best to stick with the default.
For example, the confirmation page of your website that is shown once someone
has placed an order will have access to data about the transaction, such as
transaction ID, what was purchased, the shipping address, etc. But on a product
page you don’t have this information. Instead you probably want to populate your
data layer with information about what product is showing.
This sounds like a massive job. If you’ve got 1,000 products on your retail site
does the developer have to edit each one of those pages?
Modern websites are built using a small set of page templates. These templates
outline the general structure and layout of the page, and define areas where
dynamic content will be injected. This is done for three main reasons: 1) it gives
your website a consistent look; 2) it allows developers to change one template and
have all content using that page template to update; 3) it means you can create a
new page using a content management system (CMS) and only have to specify
content for the dynamic areas.
The good news is that websites typically have less than ten of these templates. A
retail website might have:
home page
category page
product page
basket page
account page
checkout page
confirmation page
The bad news is that your developer still has to implement a slightly different
version of the data layer on each of these types of pages. More on this in the
implementation section.
Flat vs hierarchical
Flat
A flat data layer structure places all variables on the same level (depth). Flat data
layers are good if you only have a few variables and can be easier to implement.
1 var dataLayer = {
2 "userId": "1234",
3 "userEmail": "joe.bloggs@gmail.com",
4 "pageType": "product",
5 "productName": "Xbox One",
6 "productId": "XB1",
7 "productPrice": 449.99
8 };
Variables are accessed with a single dot notation:
1 dataLayer.productName
2 > Xbox One
3 dataLayer.userId
4 > 1234
Hierarchical
A hierarchical data layer groups related variables together into objects within the
main data layer. This type of structure is my preference as I find it easier to read
and manage, especially when the data layer gets big. There is less likely to be any
confusion over what variables mean.
1 var dataLayer = {
2 "user": {
3 "id": "1234",
4 "email": "joe.bloggs@gmail.com"
5 },
6 "page": {
7 "type": "product"
8 },
9 "product": {
10 "name": "Xbox One",
11 "id": "XB1",
12 "price": 449.99
13 }
14 };
Variables are accessed using a dot for each level you wish to go down into the tree
structure.
1 dataLayer.product.name
2 > Xbox One
3 dataLayer.user.id
4 > 1234
Both of these data layers contain exactly the same information. Only the structure
is different.
Google Tag Manager expects a hierarchical data layer for its Enhanced
Ecommerce tracking to function.
Array vs object
Object
Most data layer objects are just that – JavaScript objects. These can be recognised
because they start with a curly brace ({).
Array
An array is a list structure in JavaScript. Some people use this notation to define
their data layers. It can be recognised because it will start with a square bracket ([);
Which you choose is often dictated by the tag management system you use. Most
use the object notation, whilst Google Tag Manager (GTM) uses the array
notation. It does this so that additional information can be pushed into the data
layer after the page has loaded.
More on this later in the article.
http://www.myshop.com/product/widget-a.html
This URL is sent in the request to the server. The web server understands that if it
receives a URL of the form:
http://www.myshop.com/product/<slug>
it needs to render a product page. The HTML template for the product page is
retreived from the hard disk of the server. The server-side code then queries the
database for a product with slug ‘widget-a.html’ and returns all information
associated with this product. The relevant information is then injected into the
HTML template (e.g. <h1>…</h1> is replaced with <h1>Widget A</h1>)
It is at this point that the server-side code needs to construct the data layer.
Why? Because it is the only place that the database can be queried for information.
Once the HTML has been built and returned to the web browser it is too late. The
data layer has to be built at the same time that the page HTML is being built – on
the server.
And that is why only web developers who can manipulate the server-side code are
able to implement the data layer for you.
In the past 3 years the number of digital marketing tools has exploded, and most
require you to place a JavaScript tag on at least one page of your website.
Tag management system are excellent and I am all for having one on your website
– BUT they have one massive flaw.
Their true power can only be realised when a complete and valid data layer
exists on the website.
The true power of a tag management system can only
be realised when a complete and accurate data layer
existsCLICK TO TWEET
Most digital marketers fail to realise this, and as a result spend thousands on a tag
management system they can never utilise fully. If you are using a tag management
system but haven’t implemented a data layer you are missing out, BIG TIME.
Example: Reccomendo
Recommendo is a fictional product recommendation engines service I’ve just made
up. Its sole purpose is to show visitors to a retail website a widget with products
they might be interested in (think ‘You might also be interested in…‘ on Amazon).
For this technology to work, the Recommendo servers need to be sent details of
what products a person sees during their browsing session. To do this, it requires
the following JavaScript code to be inserted onto all product detail pages of your
website.
1 recommendo.send('1234', { // User ID
2 "id": "XB1", // ID of the product
3 "name": "Xbox One Console", // Name of the product
4 "price": 449.99, // Price of the product
5 });
You’re pumped, excited, tingling with anticipation as you diligently create a rule to
tell Google Tag Manager to only trigger this tag on product pages.
How do you know if it is a product page? Your website doesn’t have a URL
structure that makes product page identification easy (such as
mydomain.com/product/xbox-one.html. This URL would be easy to parse for the
text ‘/product/’).
Luckily your website only sells 50 products and so you decide to hard code each of
the URLs into the Google Tag Manager rule. This takes several hours of manual,
boring work (which you feel is beneath you) but you do the job regardless.
Problem solved (at least until you add a new product or change your URL
structure, at which point your tracking breaks and you probably don’t even realise
until your Recommendo conversion rate begins to drop and your boss reprimands
you for spending so much money on a tool that doesn’t appear to be working –
because you are feeding it bad data without realising).
Next you create a new custom tag and paste in the JavaScript above provided by
Recommendo. Inspecting it more closely you realise to your horror that the values
of user ID, id, name and price are all dynamic – they are different for each of your
product pages.
This means one of two things.
You either have to a) create a different tag in Google Tag Manager for each of your
product pages, manually copying and altering the Recommendo JavaScript code
for each one, or b) use Google Tag Manager’s macro feature to inject the dynamic
variables into the tag.
Option b) seems the most sensible but there’s a problem. You can set up macros to
search for the HTML for product name and price, but user ID and product ID are
not displayed anywhere on the page. There is no way for you get this information.
After several wasted hours you reluctantly type an email to your boss stating that
you need time from the developers to get Recommendo implemented. He says no
because they are busy working on a site redesign, the tag never gets implemented,
and your company loses out of the £1m of incremental annual revenue the
software would have generated.
Sad times.
1 var dataLayer = {
2 "user": {
3 "id": "1234" // The user's ID
4 },
5 "page": {
6 "type": "product" // The page template type
7 }
8 "product": {
9 "id": "XB1", // Product ID
10 "sku": "XB1A", // Product SKU
11 "brand": "Microsoft" // Product brand
12 "category": "Gaming", // Product category
13 "name": "XBox One Console", // Product name
14 "price": "449.99", // Product price
15 "thumb": "/media/xbox1.jpg" // Product image
16 }
17 }
This is a hierarchical data layer, because it is structured like a tree with objects
within objects. The data layer contains three top level
objects: user, page and product. This is done to separate the data into logical
sections and makes it easier to read and mange.
The user object contains the ID of the current user. The page object tells us the
type of page we are on (in this case a product page). The product object provides
all the details we need about the product being displayed.
This time you are able to quickly create a rule in Google Tag Manager to only fire
the Recommendo tag on product pages because the fact we are on a product page is
indicated to us by the data layer. You set up a macro called pageType and set it to
read the value of the data layer page.type variable.
As soon as Google Tag Manager loads on a page it will read this value, and set it to
‘product’ (if we are on a product page).
You repeat the process for each of the product variables.
This rule creation took 10 minutes (including logging into Google Tag Manager),
compared with the hours spent in the example without a data layer.
Next you create a tag and paste in the Recommendo JavaScript. You edit each of
the dynamic values to receive the data from the data layer, rather than it being hard
coded (that’s what the {{ }} symbols do).
You assign a firing rule to the tag so it only executes on product pages (remember,
the {{pageType}} value is picked up automatically from the page.type variable in
the data layer. Neat, huh?).
This takes a further 5 minutes.
After just 15 minutes of work you are able to put the tag live.
A month later you receive a promotion for your forward thinking in getting a data
layer implemented and the spike in sales that can only be attributed to
Recommendo.
1 dataLayer = [{
2 "gtm.start": 1422445519326,
3 "event": "gtm.js"
4 },{
5 "event": "gtm.dom"
6 },{
7 "event": "gtm.load"
8 }
9 ]
1 <script>
2 // Here's where you define the data layer
3 dataLayer = [{
4 "user": {
5 "id": "1234",
6 "email": "joe.bloggs@gmail.com"
7 },
8 "page": {
9 "type": "home"
10 }
11 }];
12 </script>
13
14 <!-- Google Tag Manager -->
15 <noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-YOURID"
16 height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
17 <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
18 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
19 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
20 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
21 })(window,document,'script','dataLayer','GTM-YOURID');</script>
22 <!-- End Google Tag Manager -->
1 dataLayer = [{
2 "product": {
3 "name": "Xbox One",
4 "id": "XB1",
5 "price": 449.99
6 }
7 }];
After the link is clicked, the data layer will have an extra object containing the
variable event.
1 dataLayer = [
2 {
3 "event": "addToCart"
4 }, {
5 "product": {
6 "name": "Xbox One",
7 "id": "XB1",
8 "price": 449.99
9 }
10 }
11 ];
This is useful because you can set up tags in GTM to be fired when a particular
event value is received.
For more on this see the official Google Tag Manager Developer guide.
Implementing Enhanced Ecommerce
One of the most frequently asked questions I get is about implementing Enhanced
Ecommerce reporting in Google Analytics. I believe the confusion occurs because:
This article is long enough already without me going into everything you need to
do to get Enhanced Ecommerce working.
However, I would like to stress that there are two methods of implementation:
1. You manually fire JavaScript code that sends data to Google Analytics. The
code depends on what type of page the user is on (product page, confirmation
page, etc.).
2. You put data into the data layer in a format GTM expects. GTM will
automatically read that data, process it, and send it to GA in a format GA
expects. This is in my opinion the simpler option and what you should opt for
if you have a choice.
2. Right click anywhere on the page and select ‘View Page Source’. A
window will popup full of HTML. This is the markup that generates this
page.
3. Hit Ctrl + F (Cmd + F if on Mac) to open the search window, and search
the HTML for the phrase ‘dataLayer’. The first result is where
the dataLayervariable is declared. At this point it is an empty array
(remember GTM uses the Array notation for its data layer).
Search further down the source code and you’ll see the data layer being
populated with values about this article.
You are looking at a text version of the data layer. In reality when
the web browser renders this code it understands that it is JavaScript
(because it is enclosed within <script> tags) and executes it.
The web browser ignores white space in source code. Don’t be
surprised if the data layer code doesn’t look as neat and tidy as the
examples on this page and is shown either expanded with lots of white
space padding, or squished up with no padded. The browser doesn’t
care.
The browser DOES care that the data layer is valid JavaScript.
White space may not matter, but the code must be written in a way
that browser can run. To check this, let’s move on to step 4.
4. In order to view the data layer as the web browser sees it when it compiles
it, we are going to use the Chrome Console window, part of Chrome’s
Developer Tools. Don’t be scared, it’s easy when you know how. Open the
Developer Tools by selecting View -> Developer -> Developer Tools from
Chrome’s menus.
The wording may be slightly different on Windows machines, but hunt
around and you will find it.
7. Expand the first object by clicking the arrow to the left of it (highlighted in
red). What you are seeing here is the same information that you saw by
inspecting the raw source code in step 3, expect this time it is formatted for
viewing. The data layer holds information about the article, including the
author (that’s me), when the post was published, and the post title.
I may not be using all these variables right now, but you never know what tools
might need them in the future. That’s why it is best to pack as much info as you
can in there when you first design it.
An example use might be tracking who your most popular authors are in Google
Analytics. This could be done by creating an Author custom dimension, then
setting up a tag in GTM to send the pagePostAuthor variable to Google Analytics
whenever the pagePostType is equal to “post”.
(ps. If you aren’t using Custom Dimensions in your Universal Analytics
implementation you should be)
Choose an approach
It goes without saying that unless you are a one man band you need to get
stakeholder buy in for a project like this. They won’t necessarily understand the
purpose of the data layer like you do. From experience I’ve found this the most
challenging part of the implementation – convincing people that it is worth
spending time upfront doing implementation work because ‘you may need the data
in the future’.
How well you know your developers and how they will react
When pitching the idea, concentrate on selling the idea that it will 1) reduce IT
workload in the future and 2) allow marketing to better gather and analyse data that
will lead to increased revenue.
1. The full monty. Draw up a complete specification of all the data you will ever
need (based on current marketing tools in use and anything likely to come up
in the future) and try and get everything implemented in one go.
2. The agile way. Draw up specifications for the smallest data layer you can,
only including information that is essential to get marketing tags working. For
example, you may only need a data layer on your confirmation page to track
revenue in Google Analytics, and can leave out all other pages.
I would strongly recommend you go for option two. First, you are more likely to
get the go ahead as it requires less dev time. Once your business sees the benefits
of the initial implementation securing resource to complete additional bits should
be straightforward.
Thirdly, once the dev team have implemented the first version they will understand
the concept and can complete further iterations quickly. If you supply them with a
massive specification document up front you are likely to get a ‘we don’t have
time for this’ reaction before they have really taken a look at it.
the variables to include in the data layer for each of those page types
details about each variable, such as its format (boolean, text, number, object or
array), whether the variable value is static (remains constant across all pages)
or dynamic (changes for every page) and if the variable is required (must be
present in the data layer) or optional (a nice to have but can be left out).
If you have a simple data layer then Excel is fine for this. Put the page types across
the top and variables in the rows. The cells should contain information about the
variables.
The downsides of planning your data layer like this are that:
How the data layer gets implemented depends on what platform your website is
built on. If it is a common platform, chances are you can get a plugin or extension
to get you started, which can then be tailored to your needs.
Placing the data layer at the bottom of page and/or below your tag
management tool
This means that your marketing tools load before your data layer. Without the data
layer, the marketing tools won’t have any data and will either not do anything, or
start tracking incorrect values.
Missing commas
1 var dataLayer = {
2 "productId": "1234",
3 "productName": "Xbox One"
4 "productBrand": "Microsoft",
5 "productPrice": 449.99
6 }
The missing comma after “Xbox One” means this data layer is invalid.
Unescaped characters
1 var dataLayer = {
2 'productId': '1234',
3 'productName': 'Xbox One',
4 'productDescription': 'This'll break the data layer',
5 'productBrand': 'Microsoft',
6 'productPrice': 449.99
7 }
Remember to escape any characters in strings that could cause problems. The
apostrophe in the product description value terminates the string early. This data
layer is invalid (the syntax highlighter used on this page also spots the mistake).
To correct either use quotation marks instead of apostrophes to surround variable
values, or escape the characters with a backslash.
1 var dataLayer = {
2 'productId': '1234',
3 'productName': 'Xbox One',
4 'productDescription': 'This\'ll break the data layer',
5 'productBrand': 'Microsoft',
6 'productPrice': 449.99
7 }
Commas in numbers
This can happen when the thousand separator is left in a number.
1 var dataLayer = {
2 "productId": "1234",
3 "productName": "Expensive Xbox One"
4 "productBrand": "Microsoft",
5 "productPrice": 1,449.99
6 }
It can also happen when dealing with foreign currencies where a comma is used
instead of a decimal point.
1 var dataLayer = {
2 "productId": "1234",
3 "productName": "Xbox One"
4 "productBrand": "Microsoft",
5 "productPrice": 449,99
6 }
Automating testing
To avoid the mistakes in the previous section you should use software that
automatically validates your data layer against your specifications. If you built
your requirements document in Data Layer Doctor then you’re in luck – there’s a
testing tool built right in.
The video below shows an example of testing Google Analytics Enhanced
Ecommerce code with Data Layer Doctor’s chrome extension (now released).
Wrapping Up
Phew! If you read the entire article well done!
If you skipped to the summary without reading the entire thing then I suggest you
bookmark this page so you can come back later.
In essence, I believe the data layer is a crucial and often overlooked aspect of web
development. The digital marketers need it to speed up their marketing tag
deployment times and ensure they are making decisions based on accurate data,
and yet it is often left out of system builds.
If you are having a new website built then you need to get your requirements to the
project management team immediately. If you already have a website then you
need to talk to the development team and enquire how long it might take to get one
implemented for you.
Without a data layer tag management tools are a waste of money and under-
utilised. With a data layer they become a powerful asset for collecting data that
could lead to exponential business growth.
I hope this article has given you a better understanding of what the data layer is,
and the lingo you need so you can have sensible conversations about getting one
implemented for your business.
If you enjoyed this article and found it useful, please share it.