How to trigger customer events in pixels after AJAX actions?

Technical Q&A
,
1

Hello. I’ve added listeners to customer events in a custom pixel. Problem is, most actions are done with AJAX in the website, thus, events are not triggered. For example, switching between swatches, loads a different product without reloading the page, and product_viewed event is not triggered. Or when a product is removed from cart using cart/update endpoint, the product_removed_from_cart event is not triggered. How can they be triggered?

2 Likes
2

Same question here!

3

And here as well.

4

You need to add push these events to the Shopify Web Pixels API.

From what I understand the AJAX calls are handled via your theme’s code. In this code you could also include functions that pass those events to the

Shopify customer events. When someone uses a color switcher you would use something like

Shopify.analytics.publish("colorSwitch", {'product': 'pants', 'newColor': 'red'};

You can then use the analytics.subscribe function to listen for these events:

analytics.subscribe("colorSwitch", (event) => {
    console.log(event.customData.product);
    console.log(event.customData.newColor);
})

Or you could even use a GTM container outside the customer events iframe to identify these actions and then make the Shopify.analytics call.