By using Merge Tags with the Data Layer (DL), you can show your website visitors content based on their actions and user behavior.
What are Merge Tags with Data Layer?
In simple terms, Merge Tags let you add dynamic content into widgets. When combined with the Data Layer, they can pull in details like the product category a visitor is browsing or their username if they’re logged in. This way, your widgets respond to user behavior in real time, creating a more personalized experience. As an example, you can create a popup showing a discount for the product category a visitor is currently browsing and so on.
To learn more about DL and its setup, check out this article.
Setting up Merge Tags with Data Layer
Follow this step-by-step guide to add dynamic content to your widget quickly and correctly.
Customize your widget template
Select a widget template that matches your campaign goals.
Customize the widget design and locate the text where dynamic content will be inserted.
Highlight the text, click on Merge Tags, and choose Data Layer.
Fill in the required fields
You’ll need to complete three fields:
Data layer event
Path to variable
Example value
It is important to enter the parameters exactly as they are recorded in the Data Layer so that Claspo can find them. For example:
They also have to be written in the form of event contracts as defined by Google.
Find Data Layer details on your website
Follow these steps to find events and their details on your website:
To open Developer Tools in your browser (Chrome, Opera, Edge, or Firefox) press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac). Alternatively, right-click anywhere on the page and select Inspect.
Navigate to the Console tab.
Type dataLayer and press Enter.
Expand the list to view the current state of the Data Layer.
Example use cases
Here are examples of what to specify in the Merge Tag settings for different purposes.
Display a dynamic product category in a widget
For example, a customer is browsing your website and viewing a product. You want to display a popup offering a 10% discount if they purchase two items from the same category they're viewing. Here’s how to set it up.
You need to target the widget to a view event. So, in the Data layer event field, specify view_item.
Next, you need to specify the path to this event in the Data Layer on your website. First, find a particular event in the DL list:
Expand the view_item event in the console and identify the relevant path, like, item_category in our example.
Right-click the selected line and choose the Copy property path.
Paste the data into the Path to variable field, removing the initial array numbers with a dot (‘13’ in our example) to get ‘ecommerce.items[0].item_category’.
In the example value field input a sample value like ‘Jewellery’ to preview the widget design. In real-time, this field dynamically updates based on the Data layer event parameters.
When the widget appears, the system displays the product's category, creating a personalized experience that enhances purchase likelihood and increases the average order value.
Add-to-cart reminder with a dynamic item to prevent cart abandonment
A customer adds a product to their cart but doesn’t proceed to checkout within the average session time for your website or remains inactive for a specified period. This behavior may indicate hesitation or distraction, presenting an opportunity to engage them with a reminder or incentive.
Trigger a pop-up reminding them to complete their purchase by displaying the names of the items they’ve selected and offering an incentive.
To do this, fill in the fields for Merge Tag:
Data layer event: add_to_cart
Path to variable: ecommerce.items[0].item_name
Example value: Item name
When setting up this widget display rules, specify the timing, inactive period, or exit intent:
Increase an average order value with a cart widget
For example, you want to encourage customers to order more with a widget displaying a message like: ‘Spend $300 to get a 10% discount. Your cart total is N’. The widget replaces 'N' with the amount from the Data Layer (if configured).
For example, we could use the parameters from the view_cart event.
Complete the Merge Tag fields as follows:
Data layer event: view_cart
Path to variable: checkout.total_value
Example value: Total value
Common issues to watch out for
Attention
|