Shopify (Customer Events)

👋

Need help?

Email us at [email protected] with any questions.

Setup

Shopify allows you to add custom pixels to your Shopify storefront. To add the Magellan AI pixel, here are the steps:

1. From your Shopify admin, go to Settings > Customer events.
2. Name your pixel Magellan AI Pixel.
3. Click Add pixel to open the event editor. You will see code that looks like this:

// Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML)


// Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking
//  analytics.subscribe("event_name", event => {
//    pixel("track", "event_name", event.data);
//  });

4. For Step 1, paste the following initialization code in line 2. Your pixel editor should now look like:

// Step 1. Initialize the JavaScript pixel SDK (make sure to exclude HTML)
(function(w, d, n){if (w.MAI) return;  
           w.MAI = w.MAI || {emit: function() {(w.MAI.q = w.MAI.q || []).push(arguments);}}  
           var e = d.createElement(n); e.async=1;  
           e.src = 'https://cdn.mgln.ai/pixel.min.js';  
           var s = d.getElementsByTagName(n)[0];  
           s.parentNode.insertBefore(e, s);  
       })(window, document, 'script');  
       MAI.emit('conf', '--insert-token-here--'); 

// Step 2. Subscribe to customer events with analytics.subscribe(), and add tracking
//  analytics.subscribe("event_name", event => {
//    pixel("track", "event_name", event.data);
//  });

📣 Make sure to replace YOUR-TOKEN-HERE with your actual pixel token provided by Magellan AI.

For each subsequent event you'd like to install, please add the code for each event below:

View

Type: page view

Tracks a page view. This should be included on every page, and you should paste this below the "Step 2" code that is commented out.

⚠️

Heads up!

Make sure you're only implementing this once to avoid double-counting. For example, if you've already implemented this with Google Tag Manager, you should not also add the snippet below.

analytics.subscribe("page_viewed", (event) => {
  MAI.emit('view');
});

Purchase

Type: action response

Parameters:

• Value: numeric (required)
• Currency: string (required)
• Order ID: string (required)
• Additional information: object (optional)
  • quantity: numeric
  • discountCode: string
  • isNewCustomer: boolean
  • lineItems: array of objects:
    • quantity: numeric
    • productId: string
    • productName: string
    • productType: string
    • productVendor: string
    • variantId: string
    • variantName: string

This event fires when the purchase is completed. The code below has the required variables and discountCode. For help with additional variables, email us at [email protected]

analytics.subscribe("checkout_completed", (event) => {
  const purchase = event.data.checkout;   
  MAI.emit('purchase', purchase.totalPrice.amount, purchase.currencyCode, purchase.order.id,       
     {
         discountCode: purchase.discountApplications
                     .filter((d) => d.type === 'DISCOUNT_CODE')
                     .map((d) => d.title)
                     .join(', ')
      });
});

Product

Type: page view

Parameters:

• Value: numeric (required)
• Currency: string (required)
• Additional information: object (optional)
  • productId: string
  • productName: string
  • productType: string
  • productVendor: string
  • variantId: string
  • variantName: string

Indicates that a user has visited the page for a specific product or variant of a product. This event is similar to the view event, but allows you to provide more details about the product the user has seen.

analytics.subscribe("product_viewed", (event) => {
  MAI.emit('product', event.data.productVariant.price.amount, event.data.productVariant.price.currencyCode, {
    productId: event.data.productVariant.id,
    productName: event.data.productVariant.product.title,
    productType: event.data.productVariant.product.type,
  });
});

Add to cart

Type: action response

Parameters:

• Value: numeric (required)
• Currency: string (required)
• Quantity: numeric (required)
• Additional information: object (optional)
  • productId: string
  • productName: string
  • productType: string
  • productVendor: string
  • variantId: string
  • variantName: string

This event tracks any time an object is added to the cart.

analytics.subscribe("product_added_to_cart", (event) => {
  MAI.emit ('addToCart', event.data.cartLine.merchandise.price.amount, event.data.cartLine.merchandise.price.currencyCode, event.data.cartLine.quantity, {
    productID: event.data.cartLine.merchandise.product.id,
    productName: event.data.cartLine.merchandise.product.title,
    productType: event.data.cartLine.merchandise.product.type,
    productVendor: event.data.cartLine.merchandise.product.vendor,
  });
});

Checkout

Type: page view

Parameters:

• Value: numeric (required)
• Currency: string (required)
• Additional information: object (optional)
  • id (order ID): string
  • quantity: numeric
  • discountCode: string
  • lineItems: array of objects:
    • quantity: numeric
    • productId: string
    • productName: string
    • productType: string
    • productVendor: string
    • variantId: string
    • variantName: string

This event tracks when a user goes to check out, regardless of whether they complete the purchase. (See the “purchase” event.)

analytics.subscribe('checkout_started', (event) => {
  const checkout = event.data.checkout;
  MAI.emit('checkout',
           checkout.totalPrice.amount,
           checkout.totalPrice.currencyCode,
           {
             id: checkout.order.id,
             discountCode: checkout.discountApplications
                                   .filter((d) => d.type === 'DISCOUNT_CODE')
                                   .map((d) => d.title)
                                   .join(', ')
           });
  }
);

5. Click Save.
6. Click Connect pixel to start tracking your events.

👋

Need help?

Email us at [email protected] with any questions.