DataLayer setup in Webflow

Tools:

What is a DataLayer

A DataLayer is a JavaScript element that stores various information that can be transmitted to tools like Google Tag Manager.

It can include any type of data, here are some examples with their use cases

‍

1. User identification data

Example: user ID, membership type (e.g. “premium member”).

Use cases: Content personalization, audience segmentation for remarketing.

‍

2. E-commerce data

Example: product ID, product name, category, category, category, price, quantity, total cart value.

Use cases: Conversion tracking, product performance analysis, advertising campaign optimization.

‍

3. Interactions and events:

Example: Clicks on specific buttons, completion of a form, time spent on a video.

Use cases: Analysis of user behavior, optimization of the user experience.

‍

4. Information about the session:

Example: Traffic source (organic, paid, referral), device type (mobile, desktop), screen resolution.

Use cases: Analysis of traffic sources, optimization of design according to devices.

While this information varies, it follows a distinct structure.

In the DataLayer, each piece of information is represented by a duo:
a name associated with its value.

‍

Example:

“Site_currency” could have the value “EUR”

“Product_brand” could be associated with “Nike”

It's clear, isn't it?

‍

Example at Tracktor

We have several uses of DataLayer at Tracktor.

‍

Report conversions and their associated value

We measure a conversion (quote generation), when the person arrives on the page with:

pageType = Quotations
PageSubtype = Show

‍

By doing this, we can easily set up the conversion goals in GTM for example (cf screen)

‍

Report information on the quotation

Examples:

1 - The product - Super useful for example for doing analyses at the product level in GA, Looker, etc.

2 - The amount of the quote excluding taxes - Op a variable to use as a value in your conversions for your Ads and manage with ROAS 😎

‍

Report user information

The best way to adapt the customer experience according to their typology

‍

How do you set up all this in Webflow?

1. Understanding the need

Before implementing a DataLayer, determine what data you want to track.

‍

2. Add DataLayer code to your site

Place the following code above your Google Tag Manager (GTM) code in the <head>of each page of your site:

 <script>
window.dataLayer = window.dataLayer || [];
</script>

‍

‍

3. Pushing data into the DataLayer

When a specific event occurs on your site, you can “push” information into the DataLayer.

For example, let's take the conversion action (quote generation) currently presented equal to:

pageType = Quotations
PageSubtype = Show

The code to be added will be as follows:

 <script>
window.dataLayer.push({
	'pageType': 'Quotations',
  'pageSubtype': 'Show
'});
</script>

‍

You can add as many rows as you want under PageSubtype if you want to upload more data.

‍

4. Publish your project and test the result

Use the extension DataLayer checker to test your integration (the tool I use in my screens above)

‍

Tips: Add variables to your integration when needed

Example: Upload product information

I use the variables present in my CMS to bring up the information according to the product page (see screen)

‍

5. Set up Google Tag Manager

Once you start pushing data into the DataLayer, you can use it in GTM.

Log in to your GTM account.
Click on “New tag.”
Choose the type of tag you want to set up (for example, Google Analytics).
To access DataLayer data, you can create variables in GTM.
For example, to access the PageType that you pushed earlier, create a new variable DataLayer with the name of the variable PageType.

Set up your triggers to determine when the tag should be executed using the event you set during the push 😎
And boom it's over 🔥

‍

Conclusion

As you can see, DataLayer is a powerful tool that allows you to effectively integrate and manage dynamic data on your website, in particular in conjunction with Google Tag Manager.

Its implementation allows greater flexibility and adaptability in monitoring user interactions and information without having to constantly modify the site's source code.

To fully exploit its advantages, it is essential to plan its implementation well, to add relevant data and to regularly test its configuration to ensure the accuracy of monitoring.

In short, DataLayer is a crucial step for advanced analysis and optimization of the user experience on your website.

Sandro D.

Updated on

8/10/2024

Growth Marketer, Webflow expert and a jack of all trades. I take care of commercial operations, ensure the smooth running of projects and take care of issues related to marketing (SEO, Tracking, Copywriting, etc.)