Setting Up a Purchase Goal for Shopify Store

This guide will walk you through the process of creating a Goal for your Shopify store that tracks every time an order is made. To accomplish this, we'll be creating a custom pixel through the Shopify Admin portal, which will allow Mida to receive notifications from Shopify after every new transaction in your store.

Step 1: Access Shopify Admin Portal

Go to your Shopify Admin portal and select Settings

Step 2: Visit Customer Events

Find and click on the "Customer Events" section under Settings. Click on "Add custom pixel" to generate an editable code snippet.

Step 3: Copy Code Snippet

Copy the provided code snippet into the code section of Custom Pixel.

// PLEASE UPDATE THESE CONFIGURATION VALUES
const projectKey = 'YOUR-PROJECT-KEY';
const region = 'us'; // either us or eu depending on where your data was hosted on Mida


const script = document.createElement('script');
script.setAttribute('src', `https://cdn-${region}.mida.so/js/otag.js?key=${projectKey}`);

document.head.appendChild(script);window.mdq = window.mdq || [];
function xoq(){mdq.push(arguments);}(async function() {
  window._h_uuid = await browser.cookie.get('optimize_uuid');  
})();

analytics.subscribe("page_viewed", event => {
  xoq('track','PageView');
});

analytics.subscribe("product_viewed", event => {
  xoq('track','ViewContent', {
    content_ids:  [event.data.productVariant.id],
    content_name: event.data.productVariant.title,
    currency: event.data.productVariant.price.currencyCode,
    value: event.data.productVariant.price.amount,
  });
});

analytics.subscribe("search_submitted", event => {
  xoq('track','Search', {
    search_string: event.data.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", event => {  
  xoq('track','AddToCart', {
    content_ids: [event.data.cartLine.merchandise.product.id],
    content_name: event.data.cartLine.merchandise.product.title,
    currency: event.data.cartLine.merchandise.price.currencyCode,
    value: event.data.cartLine.merchandise.price.amount,
  });    
});

analytics.subscribe("payment_info_submitted", event => {
  xoq('track','AddPaymentInfo');
});

analytics.subscribe("checkout_started", event => {
  var checkout = event.data.checkout;
  var checkoutToken = checkout.token || '';

  xoq('track','InitiateCheckout', {
    checkout_token: checkoutToken
  });
});

function shopifyIdToNumericString(id) {
  if (id == null) return '';
  var s = String(id);
  if (s.indexOf('gid://') === 0) {
    var m = /\/(\d+)\s*$/.exec(s);
    return m ? m[1] : '';
  }
  return s;
}

analytics.subscribe('checkout_completed', function (event) {
  var checkout = event.data.checkout;
  var lineItems = checkout.lineItems || [];
  var checkoutToken = checkout.token || '';
  var quantity = lineItems.reduce(function (acc, item) {
    return acc + (item.quantity || 0);
  }, 0);

  var itemsPayload = {};
  lineItems.forEach(function (item, index) {
    var variant = item.variant;
    var n = index + 1;
    var variantId;
    if (variant && variant.id != null) {
      variantId = shopifyIdToNumericString(variant.id);
    } else {
      variantId = shopifyIdToNumericString(item.id);
    }
    var productId = '';
    if (variant && variant.product && variant.product.id != null) {
      productId = shopifyIdToNumericString(variant.product.id);
    }

    itemsPayload['item_' + n + '_id'] = variantId;
    if (productId) {
      itemsPayload['item_' + n + '_product_id'] = productId;
    }
    itemsPayload['item_' + n + '_name'] = item.title || (variant && variant.title) || '';
    itemsPayload['item_' + n + '_quantity'] = item.quantity;
  });

  xoq('track', 'Purchase', {
    currency: checkout.currencyCode,
    revenue: checkout.totalPrice.amount,
    quantity: quantity,
    checkout_token: checkoutToken,
    ...itemsPayload
  });

  xoq('identify', {
    email: checkout.email
  });
});

Step 4: Edit Code Snippet

In the copied code snippet, replace the default project key with your own unique project key. This can be found in your account's settings or profile section.

You can find your company project key on Your Profile > Website > Installation:

Step 5: Save and Connect

After updating the key, save your changes and exit the Settings section and remember to connect it!

Congrats! Now your custom pixel is ready. Shopify will notify Mida whenever a new transaction happens in your store. This transaction event will be titled as "Purchase."

Where to find your Shopify Event on Mida

Once visitors perform the actions, the event metrics can be found under Event Tracking > Manual Event

Set Up Your Goal

For tracking purposes, you need to set up your goal as "Revenue Goal". This will help keep track of all purchases made within your store and count as a conversion for your experiment!