The Data Layer in Tag Manager is a Javascript object that holds data such as custom event information or variables passed from your website. Information in the Data Layer is structured into key-value pairs, which may be passed to third-party applications like Analytics or used as a trigger to determine when tags should fire.
There are two ways to populate the Data Layer with these key-value pairs.
Pre-populating values in the data layer
The first way is to pre-populate values in the Data Layer when a web page loads. Let’s look at an example. The Great Outdoors offers a number of different travel packages on their Travel Adventures website based on trip category and location. They could implement a Data Layer variable called {{tripCategory}} whose value is set on each page of the site that offers a different vacation. This could include categories like “hiking,” “skiing,” “scuba,” and more.
They could similarly add a variable called {{tripLocation}} with a value for each trip destination.
If The Great Outdoors wants to show ads to users who have previously visited a particular category and vacation destination, they could create a trigger based on a page view. This trigger could add a condition that the variables {{tripCategory}} and {{tripLocation}} be equal to the trip category “hiking,” and the location “Switzerland.” When this condition is true, the trigger will fire a tag that shows a hiking ad for Switzerland. This will lead the user back to the booking page for Switzerland hiking vacations. The tag can then access these values and fire when the page loads, as long as the Data Layer code is placed before your container code snippet.
Javascript push into the Data Layer
The second way of populating data is to use a Javascript method to push values from your web page into the Data Layer directly. For example, The Great Outdoors Travel Adventures has a shopping cart where users can add trips asynchronously without needing to refresh the page. The Great Outdoors could write Javascript that pushes this information to the Data Layer when the user selects a trip to be purchased.
This offers a way to collect data, independent of the tags that load with a page.
It’s important to note that Data Layer variables don’t persist across pages automatically. If you wish to pass a value to the Data Layer on additional pages, you’ll need to write custom code to do so.
As you can see, it’s helpful to use the Data Layer, not only to pass data into other applications, but as a separate area to write and edit code that won’t be broken by changes to your website.
