[et_pb_section fb_built=”1″ _builder_version=”4.17.3″ _module_preset=”default” background_color=”#042A14″ global_colors_info=”{}”][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n
[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=”1″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_row column_structure=”1_2,1_2″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”1_2″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”Intro1″ _builder_version=”4.17.3″ _module_preset=”default” inline_fonts=”ABeeZee” global_colors_info=”{}”]<\/p>\n
Data layers can be one of the more confounding elements of website analytics tracking. There’s plenty of background information to understand before you can confidently make proper use of them.<\/span><\/p>\n Our guide will give you everything you need to understand data layers, and the role they play in your analytics tracking.<\/span><\/p>\n It’s the perfect starting point for utilising data layers in your tag management system and analytics tools.<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][et_pb_column type=”1_2″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.17.3″ _module_preset=”default” background_color=”rgba(212,227,233,0.5)” background_enable_image=”off” custom_margin=”4px|||||” custom_padding=”23px|20px|23px|20px|true|true” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what1″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n A data layer is a JavaScript universal data object used to collect, store and pass data on a website in a standardised way.<\/span><\/p>\n Data layers are useful as a master resource of the data on your site. Rather than connecting all your tools to various data sources on your site, you can connect them all to your data layer structure.<\/span><\/p>\n This ensures that your tools are drawing from the same source and are using the same information. As your analytics tech stack grows, the correct setup of your data layer becomes imperative to ensure you are leveraging your analytics for growth.<\/span><\/p>\n .<\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” custom_padding=”0px|||||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what2″ _builder_version=”4.17.3″ _module_preset=”default” custom_margin=”-21px|||||” custom_padding=”0px|||||” global_colors_info=”{}”]<\/p>\n To break down the function and purpose of a data layer, it’s helpful to look at the other layers of a website. Virtually every website has the 2 following layers:<\/span><\/p>\n A third layer found on many websites \u2013 though not all \u2013 is the data layer. The data layer removes the responsibility from one of the other layers to collect data and dedicates itself to that task.<\/span><\/p>\n While it’s possible to use one of the other layers of a site to double as the data layer, this can lead to many issues.<\/span><\/p>\n For instance, using the front end of your site as the data layer can cause issues when changes to the site are made. You might have your data linked to particular design features of the site, affecting your data if any of these features are changed.<\/span><\/p>\n Having a dedicated data layer prevents any such issues from arising, keeping your data structure uniform and simplified.<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what3″ _builder_version=”4.17.3″ _module_preset=”default” custom_margin=”-20px|||||” global_colors_info=”{}”]<\/p>\n While adding a data layer to your site can cause some headaches, there are plenty of reasons to consider doing it. Some of the key benefits of data layers are:<\/span><\/p>\n <\/span><\/li>\n <\/span><\/li>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” custom_padding=”5px|||||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what4″ _builder_version=”4.17.3″ _module_preset=”default” border_color_all=”#10B981″ global_colors_info=”{}”]<\/p>\n Here is an example of what a data layer looks like:<\/span><\/p>\n [<\/span>{<\/span><\/p>\n \u00a0\u00a0 \u00a0“gtm.start”: 1720739311646,<\/span><\/p>\n \u00a0\u00a0 “event”: “gtm.js”,<\/span><\/p>\n \u00a0\u00a0“gtm.uniqueEventId”: 1<\/span><\/p>\n \u00a0\u00a0},<\/span>\u00a0 {<\/span><\/p>\n \u00a0\u00a0 “gtm.start”: 1720739311652,<\/span><\/p>\n \u00a0\u00a0“event”: “gtm.js”,<\/span><\/p>\n \u00a0“gtm.uniqueEventId”: 3<\/span>\u00a0},<\/span><\/p>\n \u00a0\u00a0{<\/span><\/p>\n \u00a0\u00a0 “OnetrustActiveGroups”: “,C0001,C0002,C0004,”<\/span>\u00a0 },<\/span><\/p>\n \u00a0 {<\/span><\/p>\n \u00a0\u00a0 “OptanonActiveGroups”: “,C0001,C0002,C0004,”<\/span>\u00a0},<\/span><\/p>\n \u00a0{<\/span>\u00a0 \u00a0“event”: “OneTrustGroupsUpdated”,<\/span><\/p>\n \u00a0\u00a0 “OnetrustActiveGroups”: “,C0001,C0002,C0004,”,<\/span><\/p>\n \u00a0“gtm.uniqueEventId”: 4<\/span>\u00a0},<\/span><\/p>\n {<\/span>\u00a0 “event”: “OneTrustLoaded”,<\/span><\/p>\n \u00a0\u00a0 “OnetrustActiveGroups”: “,C0001,C0002,C0004,”,<\/span><\/p>\n \u00a0 \u00a0“gtm.uniqueEventId”: 5<\/span>},<\/span><\/p>\n \u00a0\u00a0{<\/span><\/p>\n \u00a0“event”: “OptanonLoaded”,<\/span><\/p>\n \u00a0\u00a0“OptanonActiveGroups”: “,C0001,C0002,C0004,”,<\/span><\/p>\n \u00a0\u00a0 “gtm.uniqueEventId”: 6<\/span>\u00a0},<\/span><\/p>\n \u00a0\u00a0{<\/span><\/p>\n “event”: “gtm.dom”,<\/span><\/p>\n \u00a0“gtm.uniqueEventId”: 7<\/span>\u00a0},<\/span><\/p>\n \u00a0\u00a0{<\/span>“event”: “gtm.load”,<\/span><\/p>\n \u00a0“gtm.uniqueEventId”: 25<\/span>\u00a0}<\/span>\u00a0]<\/span><\/p>\n<\/blockquote>\n Datlayer code is fairly simple. One major part of data layers is key\/value pairs.<\/span><\/p>\n Keys represent particular categories of data, while the value is the input. For instance, a streaming website might have keys for a movie’s title, genre or director.<\/span><\/p>\n The respective values for these keys might be “Citizen Kane”, “Drama” and “Orson Welles”.<\/span><\/p>\n With this information in place, all relevant applications now have the same data to draw from.<\/span><\/p>\n Another common feature of data layers is events. Including events in your data layer makes it much easier to set up triggers on your tags.<\/span><\/p>\n Events in data layer code indicate when specific actions, such as a button being pressed, should cause tags to fire.<\/span><\/p>\n Common events you might include in your data layer include:<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what5″ _builder_version=”4.17.3″ _module_preset=”default” custom_margin=”-26px|||||” border_color_all=”#000000″ global_colors_info=”{}”]<\/p>\n So, how does a data layer affect the world of tag management?<\/span><\/p>\n Firstly, you might find that your tag management software, such as Google Tag Manager, has automatically created a data layer on your website. If you don’t plan to use custom data on your website, this automatic layer should be fine for your purposes, and you won’t need to make any further changes.<\/span><\/p>\n However, for more complex data processing and analysis, you will need to add extra information to this data layer. This is primarily done through the dataLayer.push() command.<\/span><\/p>\n dataLayer.push({‘event’: ‘event_name’})<\/span><\/p>\n<\/blockquote>\n Once keys and values have been stored in the data layer, they can be stored in variables. Variables can then be easily used in your tag management systems.<\/span><\/p>\n This command is also used to add event information to your data layer, telling your tags when they should fire.<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” custom_padding=”1px|||||” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what6″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n With the basics of data layers covered, let’s take a look at the steps to implementing and using a data layer in Google Tag Manager. Once you understand this process, it will become much simpler to use a data layer to send reliable, relevant data to your various analytics tools.<\/span><\/p>\n [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_text module_id=”what7″ _builder_version=”4.17.3″ _module_preset=”default” min_height=”227.4px” custom_margin=”-7px|||||” global_colors_info=”{}”]<\/p>\n For maximum reliability and uniformity, it’s a good idea to enact data layer implementation on all pages. This can be achieved by adding data layer code into header files or other templates used on every page.<\/span><\/p>\n For the purposes of GTM, your data layer code can be as simple as the following:<\/span><\/p>\n <script><\/span><\/p>\n window.dataLayer = window.dataLayer || [];<\/span><\/p>\n <\/script><\/span><\/p>\n<\/blockquote>\n [\/et_pb_text][et_pb_code _builder_version=”4.17.3″ _module_preset=”default” global_colors_info=”{}”]Table of Contents<\/h3>\n
Introduction<\/span><\/span><\/a><\/h3>\n
What is a data layer?<\/a><\/span><\/h3>\n
\n
What are the benefits of a data layer?<\/span><\/a><\/span><\/h3>\n
What does a data layer look like?<\/span><\/a><\/span><\/h3>\n
Data layers for tag management<\/a><\/span><\/h3>\n
How to use a data layer in Google Tag Manager<\/a><\/span><\/h3>\n
\n
Use DataTrue to secure your data layer<\/span><\/a><\/span><\/h3>\n
What is a data layer?<\/span><\/h2>\n
Website layers explained<\/span><\/h3>\n
\n
What are the benefits of a data layer?<\/span><\/h2>\n
\n
What does a data layer look like?<\/span><\/h2>\n
\n
\n
Data layers for tag management<\/span><\/h2>\n
\n
How to use a data layer in Google Tag Manager<\/span><\/h2>\n
Add data layer code to your web page<\/span><\/h3>\n
\n