Some stores may wish to add a client_purchase event that fires on the client in addition to the server-side purchase event tracked by default with SlideRule Analytics. Here are isntructions for adding it using .
Note: at this time only Pixels.
Navigate to your store's Settings and select Customer events
2. Click Add custom pixel
3. Name the pixel "ga4 client_purchase" and cick Add pixel
4. Copy the below code
const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX');
script.setAttribute('async', '');
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX');
analytics.subscribe("product_added_to_cart", (event) => {
let totalPrice = event.data.cartLine.merchandise.price.amount * event.data.cartLine.quantity;
gtag("event", "client_add_to_cart", {
currency: event.data.cartLine.merchandise.price.currencyCode,
value: totalPrice.toFixed(2),
items: [
{
item_name: event.data.cartLine.merchandise.product.title,
item_id: event.data.cartLine.merchandise.sku,
item_variant: event.data.cartLine.merchandise.title,
currency: event.data.cartLine.merchandise.price.currencyCode,
item_brand: event.data.cartLine.merchandise.product.vendor,
price: event.data.cartLine.merchandise.price.amount,
quantity: event.data.cartLine.quantity
}
]
});
});
function ga4CheckoutEvents(event) {
let checkout = event.data.checkout;
let lineItems = [];
for (const checkoutLineItem of event.data.checkout.lineItems){
lineItems.push({
item_id: checkoutLineItem.variant.sku,
item_name: checkoutLineItem.title,
item_variant: checkoutLineItem?.variant.title,
currency: checkoutLineItem.variant.price.currencyCode,
item_brand: checkoutLineItem.variant.product.vendor,
price: checkoutLineItem.variant.price.amount,
quantity: checkoutLineItem.quantity
});
}
payload = {
currency: checkout.totalPrice.currencyCode,
value: checkout.totalPrice.amount,
items: lineItems
};
return payload;
}
analytics.subscribe("checkout_completed", (event) => {
let payload = ga4CheckoutEvents(event);
let checkout = event.data.checkout;
payload.transaction_id = checkout.order?.id || checkout.token;
payload.shipping = checkout.shippingLine?.price.amount || checkout.shipping_line?.price.amount || 0;
payload.tax = checkout.totalTax?.amount || 0;
gtag("event", "client_purchase", payload);
});
5. Paste the code over the existing text in the "Code" section. Then replace both instances of the "G-XXXXXXX" with your data stream's Measurement ID.
6. Hit Save.
You'll now see client_purchase events show up in GA4.
