Substituting Data from the Data Layer through Merge Tags

The Data Layer is a structure that stores data about user actions on a website, while Merge Tags allow you to insert this data into widgets to personalize their content. For example, a widget can display a discount on products from the category the user is currently viewing.

Let’s explore how to find the necessary data in your website’s Data Layer and add the appropriate Merge Tags to widgets to create a highly personalized user experience, boost engagement, and improve conversion rates.

Finding Data Layer Types on Your Website

1. Open your browser’s Developer Tools (press Ctrl+Shift+I on Windows or Cmd+Option+I on Mac, or right-click on the page and select Inspect).
2. Navigate to the Console tab.
3. Type dataLayer and press Enter.
4. Expand the list to view the current structure and data types stored in the Data Layer.

Adding Merge Tags to Widgets

1. Go to Site → Widgets, then open an existing widget or create a new one.

2. Select the text field where personalization will occur, click the Merge tags option, and choose Data layer.

3. Fill in the following fields:
   • Data layer event: Specify the event name.
   • Variable path: Enter the exact path to the required data in the Data Layer.
   • Example value: Provide a sample value for preview.

📘

Note

• The eventName field is optional and only required if your Data Layer follows Google’s recommended structure. Even if your events lack names, the system will locate the necessary parameters based on the path format, such as ecommerce.items.0.price.
• If multiple similar parameters exist in the Data Layer, or if the Data Layer is duplicated, the system will use the latest instance.
• Ensure you enter parameter names exactly as they appear in the Data Layer so the system recognizes them. Additionally, parameter names must meet Google’s requirements.

Use Cases

Displaying the Viewed Product Category in a Widget

• Scenario:

A user browses products in a specific category on your website. You want to grab their attention by displaying a pop-up offering a 10% discount if they purchase two items from the category they are currently viewing.

• Setup:

1. Data Layer Event: Use the view_item event to retrieve data.

2. Data Path: Open Developer Tools, locate the view_item event in the Data Layer.

Define a property containing product category information (in our example, item_category).

Right-click on the line containing item_category, and copy its property path.

Paste it into the Variable path field. Remove any array indices at the beginning (e.g., "13" in our example).

3. Example value: Enter a sample category (e.g., "Jewellery") in the Example value field to preview how the widget will look.

Abandoned Cart Reminder with Dynamic Product Information

• Scenario:

A user adds an item to the cart but does not proceed to checkout within a certain period. This behavior suggests hesitation or distraction. To re-engage them, you can trigger a pop-up reminding them to complete the purchase, displaying the product names in their cart along with a special incentive.

• Setup:

1. Data layer event: add_to_cart

2. Variable path: ecommerce.items[0].item_name

3. Example value: Item name

After saving the pop-up, configure its calling rules, such as time spent on the site, inactivity, or mouse movement away from the page.

Increasing the Total Order Value

• Scenario:

To encourage customers to increase their cart total, you can display a dynamic message like: "Spend $300 to get a 10% discount. Your current cart total is N." Here, "N" is dynamically replaced with the current cart value.

• Setup:

1. Data layer event: view_cart

2. Variable path: checkout.total_value

3. Example value: Total value

Potential Issues to Watch Out For