Skip to main content
All CollectionsUser guides and instructions
How to use Data Layer events in display rules
How to use Data Layer events in display rules

Learn how to set up display conditions using events and their parameters from the Data Layer

M
Written by Maryna Hura
Updated over a month ago

The Data Layer (DL) allows you to set up more targeted and personalized widget display conditions by taking into account the context of the page and user behavior.

Note

To configure display conditions with Data Layer events, ensure your website has DL running. Learn how to set it up, add events, and format them for Claspo here.

Instead of showing the same widget to everyone, target users who meet specific criteria. For example, display a widget to users who add a product to a cart. This way, you're focusing on an audience that has shown interest and is likely to buy.

Here's how to set up display conditions using events and their parameters from the Data Layer.

Step 1: Access the Data Layer event conditions

Here’s how to find the settings:

  1. Select the widget you want to configure. Go to Widget details. (When creating a new widget, display condition settings follow the design step and appear automatically).

  2. Navigate to Triggering > Rule-based > Edit.

3. Scroll down to the On pages section to configure page-specific display rules.

Step 2: Set up display conditions via the Data Layer events

Once you're in the On pages section, follow these steps to create your targeted rules:

  1. Include pages:

    • Click Add condition and select Data layer event from the drop-down list.

  • Choose between:

    • Match all conditions (AND): The widget will appear only if the DL contains all specified events and their parameters.

    • Match any conditions (OR): The widget will appear if the DL contains any of the specified events and parameters.

2. Specify details:

  • Add the event name in the eventName field.

  • Specify the parameter you want to track in the variable field.Set the condition (such as greater than, equal to, starts with) and enter the corresponding parameter value.

3. Similarly, you can fill in the parameters under the Exclude pages section if you want to prevent the widget from appearing under certain conditions.

Step 3: Find events and their parameters in the Data Layer

To identify the necessary events and parameters in the Data Layer:

  1. Open your website in a browser like 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).

  2. View the Data Layer:

    • Go to the Console tab.

    • Type dataLayer into the console and press Enter.

  • If the DL exists, you’ll see its contents displayed as an array with objects. Expand the objects to explore events and their parameters.

For example, to configure a widget for product pages, enter view_item in the eventName field. The variable can be price, brand, category, etc.

Select the desired parameter, right-click, and choose Copy property path.

Paste it into the variable field, then remove square bracket numbers and the following period.

How to set up Data Layer event conditions: use case examples

Let's see how to configure widget display conditions for different cases.

Use case 1: Encouraging conversion to purchase

Push a visitor viewing a product from a certain brand priced above $50 to make a purchase by offering free shipping with a countdown timer.

Let's use the following example:

How to set it up:

  1. In Include pages, select Match all conditions (and).

  2. Set eventName field to view_item.

  3. In the Variable field, add the parameter for the product price (ecommerce.items[0].price).

  4. From the drop-down, select greater than and enter 50.

  5. Click Add parameter (and).

  6. Add the next variable — brand (ecommerce.items[0].item_brand), select ‘equals’ and specify its name.

This rule targets users who are interested in high-value products from specific brands, motivating them to purchase with an added incentive.

Use case 2: Category-based cross-selling

Promote related products or accessories to users who have added an item to their cart. Look at the imaginary scenario: a user adds a camera to their cart. You display a widget recommending camera accessories (like tripods or memory cards) with an incentive such as ‘Save 10% on camera accessories with your purchase’.

Let's use the following example:

Here is how to set it up:

  1. In Include pages, leave Match any conditions (or).

  2. Set eventName field to add_to_cart.

  3. In the Variable field, add the parameter for the product category (ecommerce.items[0].item_category).

  4. In the drop-down, leave equals and enter the category name.

By showing recommendations at this stage, you’re targeting users who are actively shopping and likely to consider complementary items.

Use case 3: Gather insights with a survey pop-up

Display a survey pop-up asking users why they removed an item from their cart, while ensuring the timing doesn't disrupt their flow by adding a 10-15 second delay.

Let's use the following example:

Here is how to set it up:

  1. In Include pages, leave Match any conditions (or).

  2. Set the eventName to remove_from_cart.

  3. Variable: add a parameter related to the product: item ID — ecommerce.items[0].item_id.

  4. In the drop-down, select exists.

You can also personalize widget content with Merge Tags with Data Layer events. Learn more here.

Did this answer your question?