By configuring Retention's Reclaim flows, users gain the ability to accurately track and recognize critical customer actions, specifically 'add to cart' and 'viewed product' events. This setup ensures that Retention efficiently relays all such 'Add to Cart' and 'Viewed Product' events directly to your Campaigner integration.
For more information on Campaigner Abandoned Checkout Reminders, click here.
To use this feature, you must have the most recent version of our script on your website and a Retention x Campaigner integration setup for Reclaim. You can find your script in your account under Code Script > View Script. Click here for a link to all our tutorials on how to add the script to your site, in case you need a refresher.
Getting Started
1. Ensure your existing integration with Retention has "Reclaim" enabled.
You can verify this by going to your Retention Dashboard > click on Integrations from the navigation bar > click on the three dots next to your campaigner integration > then click Settings.
2. If Reclaim is not enabled, you can enable it by clicking on the pencil icon next to the "Grow Reclaim" section in the settings - see screenshot below:
Install Add to Cart and Viewed Product scripts
Note: If you're using our custom Shopify Integration app, the 'Add to Cart' and 'Viewed Product' scripts will automatically be installed - you may skip this section.
If you have any questions or concerns, please contact your Customer Support Manager.
Prerequisite:
The 'Add to Cart' and 'Viewed Product' scripts require you to set up an item variable. This variable will be placed before these scripts in your sites code builder.
The following fields are recommended:
Name of Product
Price
ProductID
Categories (if applicable)
ImageURL
Brand (if applicable)
Please note the variable should be an object and the values should be dynamic - not hardcoded. You may add or remove variables as you please.
For an example of what the object should look like, please reference the example below:
<script type="text/javascript">
var item = {
Name: ##{{ product.title|json }},
ProductID: ##{{ product.id|json }},
ImageURL: "##{{ product.featured_image.src }}",
URL: "##{{ shop.secure_url }}##{{ product.url }}",
Brand: ##{{ product.vendor|json }},
Price: ##{{ product.price|money|json }},
CompareAtPrice: ##{{ product.compare_at_price_max|money|json }}
};
</script>
Instructions
1. Script Placement:
Begin by accessing your site builder. Once there, you'll need to decide the most suitable location for the script.
Typically, the most effective placement is on your product pages. Product pages inherently include both the 'Add to Cart' button and the product details. Adding the script here ensures that the tracking of the Reclaim events are seamlessly integrated with the relevant product information.
2. Adding the scripts:
After identifying the appropriate location for the code within your site, proceed to insert the 'item' object from above and modify it with the corresponding dynamic values.
Instructions for 'Add to Cart'
Instructions for 'Add to Cart'
To track the 'Add to Cart' event, which activates upon a button click, you need to attach an event listener to the 'Add to Cart' button.
Below, two sample codes are provided: one for targeting a button by its ID, and another for a button class.
Choose the appropriate code for your button type and customize it to target your specific 'Add to Cart' button.
Generic code for buttons defined by a button ID:
<script type="text/javascript"> document.getElementById("AddToCart").addEventListener('click',function (){ geq.addToCart(item) });</script>Generic code for button defined by a class notation:
<script type="text/javascript">
var item_classnames = document.getElementsByClassName("AddToCart");
for (var i = 0; i < item_classnames.length; i++) {
item_classnames[i].addEventListener('click', function () {
geq.addToCart(item);
});
}
</script>
The function that actually calls our event is : geq.addToCart(item);
Instructions for 'Viewed Product'
Instructions for 'Viewed Product'
This script is meant to run as soon as a user lands on a product page. To invoke it, simply add the following code to your site (after the item variable):
geq.event('Viewed Product Reclaim', item);
Example Implementation
Below is an example of what your code would look like if both Reclaim scripts were implemented:
<script type="text/javascript">
var item = {
Name: ##{{ product.title|json }},
ProductID: ##{{ product.id|json }},
ImageURL: "##{{ product.featured_image.src }}",
URL: "##{{ shop.secure_url }}##{{ product.url }}",
Brand: ##{{ product.vendor|json }},
Price: ##{{ product.price|money|json }},
CompareAtPrice: ##{{ product.compare_at_price_max|money|json }}
};
// Viewed Product Script
geq.event('Viewed Product Reclaim', item);
// Add to Cart Script
var item_classnames = document.getElementsByClassName("AddToCart");
for (var i = 0; i < item_classnames.length; i++) {
item_classnames[i].addEventListener('click', function () {
geq.addToCart(item);
});
}
</script>
How to use event data in Campaigner
When an "Add to Cart" or "Viewed Product" event is fired, you will be able to access the event data within your email campaign editor under "custom fields" via "merge fields".
For example, the merge field [Contact.First Name] represents the value defined for each contact's first name. You may choose to include this merge field in an email design as part of the greeting.
You can follow a similar approach for Add to Cart/Viewed Product data by incorporating the name of a product [Contact.ProductID] and it's image [Contact.ImageURL] as part of your design for your Reclaim mailing list.
For more information on merge fields and how to use them, click here.
Where to access 'Add to Cart' and 'Viewed Product' events
You can view these events successfully passing through in your Retention.com account. In the Retention dashboard, go to Event Details and from the filter select "Added to cart" or "Viewed Product Reclaim".
Have questions? Message us on chat, or email us at support[at]retention.com!