SlideRule Analytics

⌘K
Google Analytics 4 Shopify Setup
Automatic Setup
Remove Old Gtag Code
Remove Shopify Built-In GA4 Integration
Configure Google Analytics 4 Data Settings
Additional Details on Orders
Create a Google Analytics Account
Manual Configuration
Uninstall SlideRule Analytics
Why We Use Order ID as Transaction ID in Google Analytics 4
Add a `client_purchase` event
Facebook Conversions API
Installation and Configuration
Verify your Integration (optional)
Remove the Built-in Facebook Pixel Shopify Integration (optional)
How to Test SlideRule's Facebook CAPI Integration Against Your Current Facebook Integration
Data Flow & Customer Data
Customer Data
How Server-Side Data Is Processed
Google Tag Manager
Installation and Configuration
Docs powered by archbee 

Add a `client_purchase` event

3min

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 Shopify's Custom Pixel's feature.

Note: at this time only store owner's can add Custom Pixels.

  1. Navigate to your store's Settings and select Customer events
Document image


2. Click Add custom pixel



Document image


3. Name the pixel "ga4 client_purchase" and cick Add pixel



Document image


4. Copy the below code

JS
|
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.



Document image




6. Hit Save.

You'll now see client_purchase events show up in GA4.

Updated 22 May 2023
Did this page help you?
Yes
No
PREVIOUS
Why We Use Order ID as Transaction ID in Google Analytics 4
NEXT
Facebook Conversions API
Docs powered by archbee