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.

  1. 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)

  1. 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 😎

  1. 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.

Author photo
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.)
Are you stuck with your current site?
Let's talk ?
Welcome
>
Gemeos Academy
>
DataLayer setup in Webflow
These tutorials might interest you

Our tutorials in the same category

See all our tutorials
Illustration traits
We use the best tools

Your site is developed using the best tools and best practices

Gemeos doesn't just offer you a website, but expertise in the best tools to guarantee you the best possible return on your investment.

Figma

To design your custom website and optimize its conversion rate

Webflow

For pixel-perfect, optimized integration of your website

Client-first

Organizing your project to perfection

Wized

To add advanced features to your project

Make

Automate your workflows and save maximum time