Updated: December 1, 2022.
This quick guide was born out of a lot of questions from novice/intermediate Google Tag Manager users:when should I use dataLayer.push() and when declaration of datalayer(dataLayer = [{}])?
The reason for this question is that the official Google Tag Manager documentation is a bit misleading in parts. Read on and I'll show you where.
dataLayer.push?
So what is dataLayer.push in the first place? It's a code that allows adding/updating data stored in the data layer, for example:
<script>window.dataLayer = window.dataLayer || [];window.dataLayer.push({ 'event': 'new_subscriber', 'formLocation': 'footer' });</script>But what does it mean? Well, let's quickly review what the data layer is. PS If (after reading this blog post) the topic still seems confusing, please consider subscribing to myGoogle Tag Manager Course for Beginnerswhere I explain whatdataLayer.pushit is much more detailed.
What is the data layer?
Data Layer is one of the main concepts of Google Tag Manager, which guarantees maximum flexibility, portability and ease of implementation. Without it, the GTM would not work. It's what makes your tag management work properly. It's the key to unlocking the potential of Google Tag Manager.
I already covered the data layer in my other guide,Complete Guide to Data Layering, but to save your time, here is the TL;DR version.
Simply put, a data layer is like a cube that stores certain information. It is a central place (virtual layer) of a website where you, your developers or third-party tools can temporarily store data (about the user, page content, etc.). From there Google Tag Manager reads this information, uses it in tags/triggers/variables or sends it to other tools,google analytics, AdWords do Google,Facebook/Meta, You say that.
After placing the Google Tag Manager Container JavaScript snippet in yourwebsite source code, the data layer is created automatically.You don't need to add anything else.However, if you want more custom data likeUser ID,Product price, order total, etc (and use it in Google Tag Manager), additional settings will be required. And that's where dataLayer.push comes into play.
Store/update data in the data layer
There are two ways to send the data to the data layer. In fact, there is only oneyou should be using, but for knowledge purposes I will mention both:
- Adding a Data Layer FragmentAbovethe Google Tag Manager container snippet (data layer = []). This method is also mentioned in the official GTM documentation. CalledData Layer Declaration.
- Or send data withdataLayer.pushmethod.
What's the difference, you ask?
Data layer declaration (not recommended)
This method of entering data into the data layercan be used if you want to add data as soon as the page loads, for example,User ID. As a result, you can use theUser IDvariable inall pagestrigger.
In that case, your developers need to add a data layer snippetAbove(this is important!) GTM tracking container with real user ID. Once this information is added to the data layer, you can start working with it in Google Tag Manager. Here is a code example:
<script> dataLayer = [{ 'userID': '123456' }];</script><!-- Google Tag Manager --> // this is where the Google Tag Manager wrapper snippet should go placed<!-- End Google Tag Manager -->Although this method is mentioned in the official Google Tag Manager documentation,you shouldn't use it. Why?
If a developer puts this snippetbelowthe Google Tag Manager container, it will break things. One of the consequences will beBroken all pages trigger. Additionally, Google Tag Manager will not be able to track various website interactions such as clicks, form submissions, etc.
Even Google's documentation is inconsistent here. for example, inStandard ecommerce documentation (for GTM) (for Universal Analytics aka GA3), they were offering another way to put the data, and it'sdataLayer.push(explained in the next paragraph).
Simo Ahava also recommendsusingsolo dataLayer.push,and neverdata layer = [].
Why? Because using the syntaxdata layer = [], you are resetting the dataLayer variable to a new Array (read: clears the bucket), thereby replacing everything that was in it before (such as any Google Tag Manager customizations needed for tracking to work). How do you overwrite thedata layer, it no longer works correctly with Google Tag Manager, and the typical symptom is that GTM triggers don't work either.
dataLayer.push (recommended)
The second method of how to put data in the data layeresCapaDeDatos.push,It is recommended and should be your only option. Regardless of where you place it (below or above the Google Tag Manager container),dataLayer.pushwill work correctly. here are some examples:
- You have a newsletter signup form (which isn't easily trackable with a standard GTM form listener), so you've decided to ask your site developer to fire a data layer event as soon as a new subscriber joins. Your email on your website was successful:
<script>window.dataLayer = window.dataLayer || []; window.dataLayer.push({'event': 'new_subscriber'});</script>If you wish, you can ask your developer for additional information (eg.form location(because you can have more than one form on the same page)).
<script>window.dataLayer = window.dataLayer || [];window.dataLayer.push({ 'formLocation': 'footer', 'event': 'new_subscriber'});</script> - When a visitor adds a product to the cart, a data layer event (containing the product's information) can be triggered.
One more thing. Suppose you compare the code snippets in this blog post with those explained in the official Google Tag Manager documentation for developers. In that case, you'll notice that my code examples are also prefixed with "window" (instead ofCapaDeDatos.push,I usuallyventana.dataLayer.push). After using Google Tag Manager for a while and watching other professionals talk, I noticed that they recommend one more thing (as a general rule of thumb): adding a prefixventanain the directionCapaDeDatos.push.As a result, the final dataLayer.push snippet might look like this:
<script>window.dataLayer.push({ 'FormLocation': 'footer', 'event': 'new_subscriber' });</script>By the way, thedata layerThe name is case sensitive. This means that only the letter L must be capitalized:
- DataLayer.push won't work (because D is capital)
- datalayer.push won't work either (all letters are lowercase even though L should be uppercase).
More examples of dataLayer.push
The dataLayer.push examples mentioned above are pretty basic, but if you need to, you can also send data as objects or arrays. A good example would be aUniversal Analytics Default Ecommercetransaction code:
<script>window.dataLayer = window.dataLayer || [];dataLayer.push({ 'transaction products': [{ 'sku': 'DD44', 'name': 'T-shirt', 'category': 'Clothing', 'price': 11.99, ' quantity' : 1 },{ 'sku': 'AA1243544', 'name': 'Socks', 'category': 'Clothes', 'price': 9.99, 'quantity': 2 }]});< /script>Here what happened is that with adataLayer.pushwe also send an array (transactionsProducts) containing two objects. Each object contains the same set of keys (sku, name, category, price, quantity), but their values differ. And this is logical because two different products will normally have different characteristics.
Improved e-commerce data layer augmentations also use slightly more difficult data structures:
<script>window.dataLayer.push({ 'ecommerce': { 'promoView': { 'promotions': [ { 'id': 'JUNE_PROMO13', // ID or name is required. 'name': 'June discounts ' , 'creative': 'banner1', 'position': 'slot1' }, { 'id': 'FREE_SHIP13', 'name': 'Free Shipping Promotion', 'creative': 'skyscraper1', 'position' : 'space2' }] } }});</script>Like thisdataLayer.push, we add ae-commerceobject that contains thepromoteobject that contains apromotionsAn array containing two objects from two promotions displayed on one page. Each promotion has four keys,id, name, creativity and position.
Okay, what now?
Once the data/events are entered into the data layer, it's time to start working with them:
- Want to use a data layer event as a trigger? do it with himcustom event trigger.
- You want to access some data (ex.User ID) and enter it into Universal Analytics? Create onedata layer variablefor each data point you want to access from the data layer.
dataLayer.push: final words
DataLayer.pushit's a way for you/3rd party developers/plugins to pass some useful data to the data layer. And from there, you can "play around with it" in Google Tag Manager and use it in your tag management.
dataLayer.pushshould be the only way to add data. While the official Google Tag Manager documentation still mentions/recommends using a normal data layer declaration (data layer = [{}]), you shouldn't fall for that. Remember, always send to the data layer.
FAQs
How do I push DataLayer in GTM? ›
Create a Data Tag in the web GTM -> select event name -> set GTM Server Side URL -> Scroll to the settings section and enable Push event to DataLayer after tag receives a response -> add DataLayer Event Name -> Set datalayer Object Name. Change this parameter only if you renamed the dataLayer object.
How do I get data from DataLayer in GTM? ›Pull Ecommerce Data From DataLayer using DataLayer variable
Go to Google Tag Manager and navigate to variables. Within variables create a new user-defined variable. Select the variable type as datalayer. Enter the variable name as Product Name, and enter product.name in the name field.
The return value, assuming you are referring to when you pasted the code into the console, indicates whether a GTM tag fired in response to the push. "true" means that no tags fired, and "false" means that a tag fired.
What is the use of DataLayer push? ›To persist data layer variables between web pages, call dataLayer. push() after the data layer has been instantiated on each page load, and push the variables to the data layer. If you want these data layer variables to be available to Tag Manager when the container is loaded, add a dataLayer.
How do I check my data layer push? ›Open preview and debug mode in Tag Manager and select the Data Layer Tab. Here you will see the information that was pushed into the data layer.
What is an example of data layer? ›Data layer examples:
Information about the page, such as category, or type of visitor, can be saved in the data layer: dataLayer = [{ 'category': 'login', 'user type': 'top' }]; You can also save the interactions that happen on that page, through the dataLayer.
The 'push' method of dataLayer object. Use 'window.dataLayer.push()' Multiple initializations of a data layer leads to overwriting of the data layer. Push information into a data layer only if the 'dataLayer' variable has already been declared. Overwriting the value of an existing data layer variable.
How does GTM dataLayer work? ›Google Tag Manager functions best when deployed alongside a data layer. A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. You can then use that information to populate variables and activate triggers in your tag configurations.
Why do we use dataLayer for tracking data instead of local storage? ›This is done because you don't want to store the trigger event itself in localStorage . (Another possibility is to just skip the 'event' property when storing properties into localStorage .) Next, each property in this dataLayer object is pushed into the object that was found in localStorage .
What are the benefits of using the data layer in Tag Manager? ›A data layer can translate the data on your website so different tools can easily use it. It ensures communication between a website/product and tag management system. For instance, the website can tell a tag manager that a page or another step in the cart has been loaded.
What are data layer best practices? ›
The best practices for building a data layer include having a good grasp on who the stakeholders are and what their objectives might be, planning carefully, executing with an eye for detail and future requirements, and then monitoring and maintaining your implementation.
Which trigger generates the GTM click event into dataLayer? ›One of the most versatile triggers in Google Tag Manager is the Custom Event trigger. As its name indicates, you can use it to fire your tags when an event is pushed into dataLayer . This process is at the heart of GTM's dataLayer system.
Why is dataLayer important? ›A data layer also makes sure each tool receives the data it needs to do its job. Say your new site needs some web analytics, so you turn to Google Analytics as well as Google Tag Manager (GTM) as your tag management system. Here, the data layer array starts with “dataLayer” and lists out a few values.
How do I transfer data from GTM to GA? ›- understand gtm data layer.
- add tracking codes.
- push convert data to gtm data layer.
- use gtm data layer to send convert data to ga.
- create the custom dimension in ga.
- enable the ga integration.
- create the experiment id data layer variable in gtm.
- Open Google Tag Manager and click Preview in the top right corner.
- Next navigate to your website. You may need refresh the browser. The debug console will open at the open of the browser window.
- Evaluate what tag are being fired on the page and which ones are not fired.
...
Here are the steps:
- Open dev tools in your browser.
- Go to the console.
- Type in the data layer name.
- Press enter.
Layers are used in GIS based on ease of use and data collection. If you think about the way most data is collected, layers make sense. Data is generally collected as a layer (i.e. a road survey collects data about roads, a vegetation survey collects data about vegetation). Layers allow you to view data effectively.
What is GTM load? ›Service Description. The Local Traffic Managers (LTM) and Enterprise Load Balancers (ELB) provide load balancing services between two or more servers/applications in the event of a local system failure. Global Traffic Managers (GTM) provide load balancing services between two or more sites or geographic locations.
What are the 5 layers in a data platform? ›The layers are collection layer, storage layer, processing layer, analytics layer, and application layer, from the bottom to the top.
What are the 3 parts of data link layer? ›The data link layer is also made up of two sublayers: the Media Access Control (MAC) sublayer — the unique identifier of a device — and the Logical Link Control (LLC) sublayer — the interface between the device and the network layer, which comes next in the OSI model.
What are the 4 functions of data link layer? ›
The data link layer is responsible for multiplexing data streams, data frame detection, medium access, and error control. It ensures reliable point-to-point and point-to-multipoint connections in a communication network.
What is data layer in Adobe Analytics? ›A data layer is a framework of JavaScript objects on your site that contain the variable values used in your Analytics implementation. It allows greater control and easier maintenance when assigning values to Analytics variables.
What is Google Analytics tracking? ›Google Analytics is a platform that collects data from your websites and apps to create reports that provide insights into your business.
What is event driven data layer? ›The Event Driven Data Layer itself basically is just a plain Javascript array ( digitalData in the example below), containing (event) objects. Think of pageviews, clicks or purchases. The Javascript array is available at window scope.
What is the difference between GTM and Google Analytics? ›Google Analytics is an analytics tool that helps you track and analyze how users interact with your website and app. Google Tag Manager is a tag management system that makes it easy for teams to add and edit tags for granular user event insights.
Is GTM the same as Google Analytics? ›Google Tag Manager and Google Analytics are both Google tools used for tracking website data. However, they serve different purposes. Google Tag Manager is used for managing tags on a website, while Google Analytics is used for analyzing website data.
Do you need GTM to use Google Analytics? ›Without Google Tag Manager, Google Analytics may be used. Without Google Analytics, Google Tag Manager may be used. To use both in conjunction, each must be configured independently. Both are implemented similarly on your website, utilizing javascript code snippets.
What is the structure of data layer? ›What Is The Data Layer. To put it shortly, a Data Layer is a data structure which ideally holds all data that you want to process and pass from your website (or other digital context) to other applications that you have linked to.
What is a global data layer? ›A Data Layer is a virtual layer between your website (code and server) and your tag management solution (such as Google Tag Manager), where you can store, process and pass data. Technically speaking it is a JavaScript object, which in some cases will also be referred to as a Universal Data Object (UDO).
When should I use Localstorage vs database? ›Database is for saving users data, permanently. local storage is storing data for a period of time.
How do I add data to dataLayer? ›
- By adding a dataLayer snippet above the GTM container snippet. This step is called “Data Layer declaration”.
- Or by pushing data with dataLayer. push method.
Tag Manager gives you the ability to add and update your own tags for conversion tracking, site analytics, remarketing, and more. There are nearly endless ways to track activity across your sites and apps, and the intuitive design lets you change tags whenever you want.
What is a common data layer? ›The Cisco Common Data Layer (CDL) is a high-performance next generation Key-value (KV) data store layer for all the Cloud Native applications. These applications use the CDL as a state management with High Availability (HA) and Geo HA functions.
What are the four layers of data? ›- Data sources layer. This is where the data is arrives at your organization. ...
- Data storage layer. This is where your Big Data lives, once it is gathered from your sources. ...
- Data processing/ analysis layer. ...
- Data output layer.
- Have a Holistic Approach. ...
- Provide Better Data Access. ...
- Maintain Data Quality. ...
- Ensure Data Governance. ...
- Prioritize Data Security. ...
- Develop a Data Recovery Plan.
A project team designs the data management layer of a system using a four-step process: selecting the format of the storage, mapping the problem domain classes to the selected format, optimizing the storage to perform efficiently, and then designing the necessary data access and manipulation classes.
What is the difference between tags triggers and variables in GTM? ›In triggers, a variable is used to define filters that specify when a particular tag should fire. (e.g.: fire a trigger when the url variable contains “example.com/index.html”). In tags, variables are used to capture dynamic values (e.g.: pass a transaction value and product ID to a conversion tracking tag).
How does GTM track link clicks? ›- Step 1: Enable click variables in GTM. ...
- Step 2: Put GTM in Preview Mode. ...
- Step 3: Create your click trigger for all clicks. ...
- Step 4: Identify the unique click-related variable. ...
- Step 5: Modify the GTM click trigger to fire only for the specific link click. ...
- Step 6: Implement the GA click tracking tag. ...
- Step 7: Test the tag.
- Figure out which events you want to track on your website. ...
- Create a “generic” click trigger in Google Tag Manager. ...
- Publish your container. ...
- Open your website in the same browser in a new tab. ...
- Click the CTA you want to track.
Implementing a data layer takes time up front, but provides a reliable method for your team to control data values that are being captured into reports. DOM scraping involves looking at your page's HTML attributes and copying data for reporting from their values.
Is data access layer necessary? ›
Purpose/Importance of having a DAL:
A Data-Access Layer (DAL) can support multiple databases, so the application is able to make use of any database as per its requirement. Because segregating the data access code, enables better maintainability and easy migration of the database.
sendBeacon() method asynchronously sends an HTTP POST request containing a small amount of data to a web server. It's intended to be used for sending analytics data to a web server, and avoids some of the problems with legacy techniques for sending analytics, such as the use of XMLHttpRequest .
Do you need GTM for GA4? ›Reimagined from the ground up, with a new interface and tweaked primary metrics, GA4 also requires a different setup process to get tracking tags in place. Google Tag Manager (GTM) provides an easy, templated route to install GA4 on your site as well as create custom events.
What can you not do with GTM? ›- Incorrect Implementation of the GTM Snippet. ...
- Over-Tracking Events on Your Site. ...
- Using Nondescript Event Parameters. ...
- Creating Overly-Specific Triggers. ...
- Forgetting to Publish Your Changes.
To see if Google Analytics is firing on your page, go to any page on your site in your Chrome Browser and right-click. Click on Inspect. Then go to the Network tab. Hit refresh on your browser and watch to see the different content and scripts loading on the page.
How does GTM track phone number clicks? ›- Open Google Tag Manager. Create Trigger. Choose Event. Choose Click. ...
- Create a Google Analytics Tag.
- 1.Create Tag. 2.Choose Google Analytics Tag; choose Universal. 3.Configure the Tag for Click. ...
- Preview the Tag Firing. Choose Preview and Debug Mode. Go to your website and Click the link.
- Request access to the TagDebugger.
- Click “Add to Chrome.”
- Open the Chrome Developer tools.
- Click on the ObservePoint TagDebugger icon.
- Go to Options.
- Type in the data layer object name in the box.
- Reload the page to see it appear in the report.
- Click on the Data Layer to see variable details.
dataslayer is available from: Chrome Web Store: https://chrome.google.com/webstore/detail/dataslayer/ikbablmmjldhamhcldjjigniffkkjgpo.
What is Dataslayer extension? ›dataslayer adds a panel to Chrome Developer Tools that monitors tag management data layers and displays changes in an easy-to-read, user-friendly format.
What is window dataLayer? ›dataLayer is a JavaScript Array, which holds data in key-value pairs. The key is a variable name in String format, and values can be any allowed JavaScript type.
How does GTM Datalayer work? ›
Google Tag Manager functions best when deployed alongside a data layer. A data layer is a JavaScript object that is used to pass information from your website to your Tag Manager container. You can then use that information to populate variables and activate triggers in your tag configurations.