Skip to main content
All CollectionsUser guides and instructions
Using the Data Layer
Using the Data Layer

You'll learn what the Data Layer is, why it’s key to using Claspo widgets effectively, and how to implement it

M
Written by Maryna Hura
Updated this week

What is the Data Layer, and why you need it for your widgets

The Data Layer (DL) is a standardized data exchange tool used in digital marketing and web analytics, especially in e-commerce. It acts as a bridge between your website and tools like Google Tag Manager (GTM), which originally introduced it. This is an industry-standard approach, supported by many CMSs (automatically or via plugins), to ensure smooth data handling.

Note

Technically, the DL is an array where data — structured as objects — is stored temporarily. While the array itself can hold unstructured information, following Google's recommended structure ensures it works seamlessly with Claspo.

Here's why the Data Layer is crucial:

  • A structured data format for transferring information, helping you track user behavior.

  • Necessary for integrating with Claspo widgets, enabling dynamic content and personalized experiences.

  • Resets with each page load, ensuring data is always up-to-date for the current page.

Importantly, the DL cannot store sensitive personal information, as this is strictly prohibited by GDPR.

Claspo’s script accesses this data to enable features like:

  • Dynamic content: personalize user experiences using merge tags.

  • Widget display rules: control widget display options based on stored data about user interactions or a website page states.

For example, the Data Layer can store event data such as user actions (like adding an item to the cart) or product details (such as price or product ID). This information is critical for Claspo, which can read the Data Layer to determine when and how to display widgets based on user behavior.

Which events can you add to the Data Layer

To use the Data Layer effectively with Claspo, the DL must adhere to event contracts as defined by Google, which provides an extensive description of recommended events. They are standardized, ensuring consistency across platforms and tools.

Important

Claspo only processes data in this event format:
​

Any free-form data outside this contract will not be usable. If no events are found in the Data Layer, Claspo doesn't display the widget entirely.

Ensure that the necessary data is stored as events to enable dynamic content and widget display rules.

Data Layer events examples and widget ideas

Here are popular Data Layer events in e-commerce, along with examples and widget implementation ideas.

View item event

  • view_item event is triggered when a user views the details of a specific product on your website. This typically includes data about the item, such as product ID (item_id), name (item_name), category (item_category), variant (item_variant), and price.

Widget idea: After a user views a product for 20 seconds, display a popup offering free shipping on orders over a certain value. Personalize it by showing the product category name from the Data Layer.

Add to cart event

  • add_to_cart: captures data when a user adds an item to their shopping cart. This often includes product ID (item_id), name (item_name), category (item_category), quantity, and price.

Widget idea: Cart reminder popup that displays a message reminding users about the items in their cart after a set period of inactivity.

Remove from cart event

  • remove_from_cart: tracks when a user removes an item from their cart, providing insights into potential barriers to purchase. This often includes the item_brand, item_category, item_variant, price and quantity.

Widget idea: show a survey popup asking why users removed the item to gather insights. Delay the popup by 10-15 seconds after the remove_from_cart event to avoid interrupting the user’s flow.

Begin checkout event

  • begin_checkout: monitors a user has begun a checkout process. This often includes product name (item_name), category (item_category), quantity, and price.

Widget idea: if a user tries to leave during checkout, display an exit-intent popup with a compelling message.

How to check if your website has the Data Layer

Before using the Data Layer (DL) for Claspo widgets or analytics, check if your website has it. Here’s how.

Option 1: use browser developer tools

Your browser’s built-in developer tools are a quick way to inspect the Data Layer. Follow these steps:

  • Open your website in Chrome, Opera, Edge, or Firefox.

  • Right-click anywhere on the page and select Inspect (or press Ctrl+Shift+I on Windows or Cmd+Option+I on Mac).

  • Go to the Console tab.

  • Type dataLayer into the console and press Enter.

If the Data Layer exists, you’ll see its contents displayed, typically as an array with objects. You can expand these objects to view the data stored within, such as events, variables, and parameters.

Option 2: preview mode in Google Tag Manager

If your website uses GTM, you can use its built-in preview mode to inspect the Data Layer in action:

  • Log in to your GTM account.

  • Click on the Preview button.

  • Navigate to your website with preview mode active.

  • A debug panel will appear, showing all the Data Layer events firing on your site in real time.

Adding events to the Data Layer (if they’re not already set up)

First, create the Data Layer (if not already in place). If your site does not yet have a Data Layer, you can set it up using Google Tag Manager (GTM). Refer to the official instructions for detailed guidance.

Additionally, there are special GTM plugins that automatically install the data layer for various CMSs. You can check out these options:

Also, learn about using DL in merge tags and display conditions.

Did this answer your question?