This repository demonstrates how to integrate a Shopify Hydrogen storefront with Iterable.
This is a reference implementation for non-traditional storefront integrations where cart updates are tracked client-side using the Iterable Web SDK. For custom storefronts, cart updates are not processed on the backend, hence we are required to process them with the SDK. This also enables a more advanced integration with nuanced tracking.
Parse attribution parameters from the URL on initial page load.
| Query Parameter | Example |
|---|---|
iterable_campaign |
?iterable_campaign=123456 |
utm_campaign |
?utm_campaign=campaign_123456 |
iterable_template |
?iterable_template=789012 |
Update cart attributes so they can be read in orders/* and checkouts/* webhooks for subsequent attribution:
// Required attribute format
[
{
key: '_iterable_campaign_id',
value: '123456', // Campaign ID as string
},
{
key: '_iterable_template_id',
value: '789012', // Template ID as string
},
];It is advisable to initialize the Iterable Web SDK with JWT authentication. Call sdk.setEmail(customerEmail) when a customer logs in to authenticate the SDK for that user. Read more on how to use the SDK.
Implement updateCart to send cart data to Iterable whenever the cart changes. This is required to receive cart updates in Iterable's user profiles.
For advanced tracking beyond cart updates (product views, purchases, etc.), explore additional SDK methods in the Iterable Web SDK documentation.