{"id":1831,"date":"2016-07-04T16:05:31","date_gmt":"2016-07-04T20:05:31","guid":{"rendered":"http:\/\/www.gregcruce.com\/?p=1831"},"modified":"2018-04-10T10:22:58","modified_gmt":"2018-04-10T14:22:58","slug":"google-tag-manager-data-layer-guide-examples","status":"publish","type":"post","link":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/","title":{"rendered":"Google Tag Manager Data Layer: A How-To Guide (With Examples)"},"content":{"rendered":"

When you begin to use Google Tag Manager, one of the first (and sometimes mysterious) things to learn about is the Data Layer. It’s at the heart of how GTM works so understanding how it works is beneficial to long-term success with Tag Manager. However, I’ve heard many people mention that the data dayer is difficult to learn, which has what has led me to create this post. I’ll help you understand the simplicity of the data layer, and how you can use the data layer to take Google Tag Manger to the next level.<\/p>\n

What Is The Data Layer In Google Tag Manager?<\/h3>\n

The data layer isn’t something complex, it’s quite simple. Here are it’s 2 basic properties:<\/p>\n

    \n
  1. It is a page-level storage API<\/li>\n
  2. It is a listener for events triggered by code<\/li>\n
  3. It resets for every pageview<\/li>\n<\/ol>\n

    That’s it. It’s nothing mystical or deep. It’s a key-pair storage API, and it’s a way to have GTM fire specific tags (like a Google Analytics event) on a user action.<\/p>\n

    The Data Layer As A Storage API<\/h3>\n

    As a storage API, we have the ability to make the data layer retain information for us. We do this via a specific Javascript method called datalayer.push<\/code><\/p>\n

    dataLayer.push({\r\n  'pageCategory':'google-tag-manager',\r\n  'event':'sendUpdate'\r\n});<\/pre>\n
    With the above code, I can update the data layer to retain this information. If I set Google Tag Manager to “Preview”, the data layer can be observed like below<\/p>\n
    \"Google<\/p>\n
    Boom. Easy. We’ve now pushed information into our data layer about the page category. Now, we need to make Google Tag Manager<\/a> aware that we’ve added new information into the data layer.<\/p>\n
    The Data Layer As An Event Listener<\/h3>\n
    dataLayer.push({\r\n  'pageCategory':'google-tag-manager',\r\n  'event':'sendUpdate'\r\n});<\/pre>\n
    The second value in our example is a Google Tag Manager Data Layer Event. Not to be confused with Google Analytics Events, Tag Manager Events are used to notify Google Tag Manager that something notable has occured.<\/strong><\/em><\/p>\n
    Google Tag Manager events require a matching trigger to be setup, ensuring we can execute tags against that custom event. Here’s a quick explanation about using datalayer.push and events in Google Tag Manager<\/a>.<\/p>\n
    So, we can now push information from the page into the data layer, and we can have Google Tag Manager react to it.<\/p>\n
    The Data Layer Resets On Every Page View<\/h3>\n
    This is by design. With each new pageview, you collect new data.<\/p>\n
    If, however, you really want to have data layer information persist across pageviews<\/a>\u00a0(and most of the time you’ll need a REALLY strong reason to do this!), Simo’s blog has an excellent article about how to do this with cookies or HTML5 web storage.<\/p>\n
    Cool Things To Do With The Google Tag Manager Data Layer<\/h3>\n
    So, now that you’ve got this new skill, here are some things to try it out with:<\/p>\n
      \n
    • Scroll Depth<\/li>\n
    • Outbound Link Tracking<\/li>\n
    • Monitor clicks to “tel:” links for call tracking<\/li>\n
    • Monitor clicks to “mailto:” for email tracking<\/li>\n<\/ul>\n
       <\/p>\n","protected":false},"excerpt":{"rendered":"
      When you begin to use Google Tag Manager, one of the first (and sometimes mysterious) things to learn about is the Google Tag Manager Data Layer. I’ve heard many people mention that the Data Layer is confusing and difficult to learn. In this post, I’ll help you understand the simplicity of the data layer and how you can use the data layer to take Google Tag Manger to the next level.<\/p>\n","protected":false},"author":1,"featured_media":1839,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[88],"tags":[83,86],"yoast_head":"\nGoogle Tag Manager Data Layer: A How-To Guide (With Examples) - www.gregcruce.com<\/title>\n<meta name=\"description\" content=\"The Google Tag Manager Data Layer is a key-pair storage API, and a way to have GTM fire specific tags (like a Google Analytics event) on a user action.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Tag Manager Data Layer: A How-To Guide (With Examples) - www.gregcruce.com\" \/>\n<meta property=\"og:description\" content=\"The Google Tag Manager Data Layer is a key-pair storage API, and a way to have GTM fire specific tags (like a Google Analytics event) on a user action.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"www.gregcruce.com\" \/>\n<meta property=\"article:published_time\" content=\"2016-07-04T20:05:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-10T14:22:58+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Greg Cruce\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/www.twitter.com\/gregcruce\/\" \/>\n<meta name=\"twitter:site\" content=\"@gregcruce\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Greg Cruce\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/\",\"url\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/\",\"name\":\"Google Tag Manager Data Layer: A How-To Guide (With Examples) - www.gregcruce.com\",\"isPartOf\":{\"@id\":\"https:\/\/www.gregcruce.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg\",\"datePublished\":\"2016-07-04T20:05:31+00:00\",\"dateModified\":\"2018-04-10T14:22:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.gregcruce.com\/#\/schema\/person\/f106cd91d8004063aab0536d0bb8865c\"},\"description\":\"The Google Tag Manager Data Layer is a key-pair storage API, and a way to have GTM fire specific tags (like a Google Analytics event) on a user action.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#primaryimage\",\"url\":\"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg\",\"contentUrl\":\"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg\",\"width\":1540,\"height\":600,\"caption\":\"Google Tag Manager Data Layer: A How-To Guide (With Examples)\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.gregcruce.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Tag Manager Data Layer: A How-To Guide (With Examples)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gregcruce.com\/#website\",\"url\":\"https:\/\/www.gregcruce.com\/\",\"name\":\"www.gregcruce.com\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gregcruce.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gregcruce.com\/#\/schema\/person\/f106cd91d8004063aab0536d0bb8865c\",\"name\":\"Greg Cruce\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gregcruce.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6be99f0190ebf09a94accef908c2f398?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6be99f0190ebf09a94accef908c2f398?s=96&d=mm&r=g\",\"caption\":\"Greg Cruce\"},\"description\":\"Greg has over 20 years of combined experience in the disciplines of web development, computer programming, IT, and Internet marketing and strategy. This unique skillset allows for powerful insights from consulting, strategy, execution and analysis.\",\"sameAs\":[\"https:\/\/www.gregcruce.com\",\"https:\/\/www.linkedin.com\/pub\/greg-cruce\/66\/240\/6b0\",\"https:\/\/x.com\/https:\/\/www.twitter.com\/gregcruce\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google Tag Manager Data Layer: A How-To Guide (With Examples) - www.gregcruce.com","description":"The Google Tag Manager Data Layer is a key-pair storage API, and a way to have GTM fire specific tags (like a Google Analytics event) on a user action.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/","og_locale":"en_US","og_type":"article","og_title":"Google Tag Manager Data Layer: A How-To Guide (With Examples) - www.gregcruce.com","og_description":"The Google Tag Manager Data Layer is a key-pair storage API, and a way to have GTM fire specific tags (like a Google Analytics event) on a user action.","og_url":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/","og_site_name":"www.gregcruce.com","article_published_time":"2016-07-04T20:05:31+00:00","article_modified_time":"2018-04-10T14:22:58+00:00","og_image":[{"width":1540,"height":600,"url":"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg","type":"image\/jpeg"}],"author":"Greg Cruce","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/www.twitter.com\/gregcruce\/","twitter_site":"@gregcruce","twitter_misc":{"Written by":"Greg Cruce","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/","url":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/","name":"Google Tag Manager Data Layer: A How-To Guide (With Examples) - www.gregcruce.com","isPartOf":{"@id":"https:\/\/www.gregcruce.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#primaryimage"},"image":{"@id":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg","datePublished":"2016-07-04T20:05:31+00:00","dateModified":"2018-04-10T14:22:58+00:00","author":{"@id":"https:\/\/www.gregcruce.com\/#\/schema\/person\/f106cd91d8004063aab0536d0bb8865c"},"description":"The Google Tag Manager Data Layer is a key-pair storage API, and a way to have GTM fire specific tags (like a Google Analytics event) on a user action.","breadcrumb":{"@id":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#primaryimage","url":"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg","contentUrl":"https:\/\/www.gregcruce.com\/wp-content\/uploads\/google-tag-manager-data-layer.jpg","width":1540,"height":600,"caption":"Google Tag Manager Data Layer: A How-To Guide (With Examples)"},{"@type":"BreadcrumbList","@id":"https:\/\/www.gregcruce.com\/google-tag-manager-data-layer-guide-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.gregcruce.com\/"},{"@type":"ListItem","position":2,"name":"Google Tag Manager Data Layer: A How-To Guide (With Examples)"}]},{"@type":"WebSite","@id":"https:\/\/www.gregcruce.com\/#website","url":"https:\/\/www.gregcruce.com\/","name":"www.gregcruce.com","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gregcruce.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.gregcruce.com\/#\/schema\/person\/f106cd91d8004063aab0536d0bb8865c","name":"Greg Cruce","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gregcruce.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/6be99f0190ebf09a94accef908c2f398?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/6be99f0190ebf09a94accef908c2f398?s=96&d=mm&r=g","caption":"Greg Cruce"},"description":"Greg has over 20 years of combined experience in the disciplines of web development, computer programming, IT, and Internet marketing and strategy. This unique skillset allows for powerful insights from consulting, strategy, execution and analysis.","sameAs":["https:\/\/www.gregcruce.com","https:\/\/www.linkedin.com\/pub\/greg-cruce\/66\/240\/6b0","https:\/\/x.com\/https:\/\/www.twitter.com\/gregcruce\/"]}]}},"_links":{"self":[{"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/posts\/1831"}],"collection":[{"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/comments?post=1831"}],"version-history":[{"count":0,"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/posts\/1831\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/media\/1839"}],"wp:attachment":[{"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/media?parent=1831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/categories?post=1831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gregcruce.com\/wp-json\/wp\/v2\/tags?post=1831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}