Klaviyo has two great resources for how to add this generally to your Shopify pages:
This guide will focus on how to integrate these principles into your Replo page. Spoiler alert! It's rather easy.
This assumes you have Klaviyo properly setup and working on your store
If you'd like to add Custom Events (not "Add to Cart" events) to your Replo page, this is very simple. You can use the Run Javascript interaction and simply add the following snippet:
var item = { parameter1: 'value 1' };
_learnq.push(['track', '<NAME_OF_EVENT>', item]);
Where <NAME_OF_EVENT> can be whatever makes sense for purposes. The item variable can be ommitted completely or you can make it an arbitrarly complex dictionary variable. This is completely use-case specific.
Any interaction that triggers this "Run Javascript" action will send this data over to Klaviyo under the users specific profile in Audience > Profiles.
Adding Custom "Added to Cart" Events
This is a subtle variation on the more generic Custom Events flow described above. For this you'll need to add the JavaScript snippet outline on the Klaviyo doc here to your page. This can be done in any of these three ways, in increasing order of complexity
- Add it via a Custom HTML component to the top of the Replo page.
- Add it to a custom
<head>tag in Page Settings > Advanced. - Add it directly to your Shopify theme (only for experience developers).
Warning to Update Custom Javascript
At the time of writing, we think the Klaviyo Javascript snippet requires a small change. Specifically:
if (item !== 'undefined') {
cart = Object.assign(cart, item)
}
needs to be
if ( typeof item !== 'undefined' ) {
cart = Object.assign(cart, item)
}
And that's really it for "Added to Cart" events. Any "Add Product to Cart" interactions will now immediatly send the to Klaviyo under the users specific profile in Audience > Profiles.
To test this we recommend following the process outlined in the Klaviyo docs