In this example we use the event ViewContent. You can also follow this manual for the other events, but you will need to add other specifications at the designated places.
💡Tip: Do you want to import a set of frequently used events in stead of create events one by one? Use our import sheet for Google Analytics 4 Enhanched Ecommerce datalayers.
Step 1: Set Variable
Create a new variable with a recognizable name. An example could be Spotler Activate - Datalayer - Ecommerce Products.
For Variable Type, choose DataLayer.
Insert the name of the DataLayer variable, for example: ecommerce.detail.products. Check the name of your DataLayer, as this can vary per provider. By setting the default value Undefined, the value can be requested as an extra piece of security.
(type: Datalayer variable, versie 2)
DLV - products: ecommerce.items
DLV - order: ecommerce
DLV - category: ecommerce.items.item_list_name
In the previous enhanced ecommerce syntax, the syntax was differentiated depending on the action performed. For example, adding cart items was add.items. In this syntax, “ecommerce.items” is pretty universal, so be careful that your trigger is accurate, otherwise you will send products that belong to a different action.
DLV - products product page: ecommerce.detail.products
DLV - order: ecommerce.purchase.actionField
DLV - purchase products: ecommerce.purchase.products
DLV - purchase actionfield: ecommerce.purchase.actionField
DLV - category: ecommerce.impressions.0.category
DLV - products cart: ecommerce.add.products
DLV - remove cart products: ecommerce.remove.product Alternatively, you can create an "ecommerce" variable and address the relevant objects per tag, for example: {{DLV - ecommerce}}.detail.products
Save the variable. This step is now complete.
Step 2: Set Trigger
Create a new trigger named Spotler Activate - Event - [NAME EVENT]
Choose Trigger type: Custom Event
Add the Custom Event name of view_item. Check the correct event name via debug mode, because this depends on your DataLayer/Plugin.
Save the trigger.
Step 3: Set Tag
Create a new tag named Spotler Activate - [NAME EVENT]. Choose Tag Type: Custom HTML. The code below pushes a View_Content event to Spotler Activate and passes the product object retrieved from the DataLayer.
Custom HTML tag, each script must be between <script type="text/javascript"> and </script>. The trigger = event or relevant pageview.
Do you want to add extra fields? Add them to the data object before sending, for example data.email = {{email address}}.
<script type="text/javascript">
window._sqzl = window._sqzl || [];
var product = {{Spotler Activate - DataLayer - Ecommerce Products}};
window._sqzl.push({
"event": "ViewContent",
"products": product
});
</script>
Scripts of the most used events:
<script type="text/javascript">
var products = {{DLV - products}};
var sqProducts = [];
var data = {};
data.event = "ViewContent";
for (var i = 0; i < products.length; i++) {
sqProducts[i] = [];
if (products[i].item_id != null) {
sqProducts[i].id = products[i].item_id;
}
if (products[i].item_name != null) {
sqProducts[i].name = products[i].item_name;
}
if (products[i].price != null) {
sqProducts[i].price = products[i].price;
}
}
data.products = sqProducts;
window._sqzl = window._sqzl || [];
window._sqzl.push(data);
</script>
<script type="text/javascript">
var data = {};
data.event = "ViewCategory";
if ({{DLV - category}} != null) {
data.category_id = {{DLV - category}};
}
window._sqzl = window._sqzl || [];
window._sqzl.push(data);
</script>
<script type="text/javascript">
var products = {{DLV - products}};
var sqProducts = [];
var data = {};
data.event = "AddToCart";
for (var i = 0; i < products.length; i++) {
sqProducts[i] = [];
if (products[i].item_id != null) {
sqProducts[i].id = products[i].item_id;
}
if (products[i].item_name != null) {
sqProducts[i].name = products[i].item_name;
}
if (products[i].price != null) {
sqProducts[i].price = products[i].price;
}
if (products[i].quantity != null) {
sqProducts[i].quantity = products[i].quantity;
}
}
data.products = sqProducts;
window._sqzl = window._sqzl || [];
window._sqzl.push(data);
</script>
<script type="text/javascript">
var products = {{DLV - products}};
var sqProducts = [];
var data = {};
data.event = "RemoveFromCart";
for (var i = 0; i < products.length; i++) {
sqProducts[i] = [];
if (products[i].item_id != null) {
sqProducts[i].id = products[i].item_id;
}
if (products[i].item_ame != null) {
sqProducts[i].name = products[i].item_name;
}
if (products[i].price != null) {
sqProducts[i].price = products[i].price;
}
if (products[i].quantity != null) {
sqProducts[i].quantity = products[i].quantity;
}
}
data.products = sqProducts;
window._sqzl = window._sqzl || [];
window._sqzl.push(data);
</script>
<script type="text/javascript">
var products = {{DLV - products}};
var order = {{DLV - order}};
var sqProducts = [];
var data = {};
data.event = "Purchase";
if (order.transaction_id != null) {
data.orderid = order.transaction_id;
}
if (order.value != null) {
data.totalvalue = order.value;
}
for (var i = 0; i < products.length; i++) {
sqProducts[i] = [];
if (products[i].item_id != null) {
sqProducts[i].id = products[i].item_id;
}
if (products[i].item_name != null) {
sqProducts[i].name = products[i].item_name;
}
if (products[i].price != null) {
sqProducts[i].price = products[i].price;
}
if (products[i].quantity != null) {
sqProducts[i].quantity = products[i].quantity;
}
}
data.products = sqProducts;
window._sqzl = window._sqzl || [];
window._sqzl.push(data);
</script>
Select the trigger you created earlier.
Once the trigger has gone off, you'll see the following in Spotler Activate under Data -> Live Events:
And the following on the visitor's profile:
Please note that there may be a delay of about 2 minutes before the events are shown in Spotler Activate.