Site Direct with Shopify Extensibility Tracking

This documentation outlines ShopMy integration setup for sites that partially use Shopify, such as Shopify-integrated checkout pages or headless sites.

Step One: Integrate Click Tracking

Add the one-line script below to your main site template just before the closing </body> tag. This script must be on every page, as it takes the tracking URL and turns it into a first-party cookie.

<script defer src="https://static.shopmy.us/Affiliates/sms_aff_clicktrack.js"></script>

Step Two: Integrate Order Tracking

Complete the following steps to set up a Shopify Custom App Pixel for order tracking:

1. Navigate to store settings in Shopify admin

2. Click "Customer Events" in the settings menu on the left

3. Click the "Add Custom Pixel" button in the top right, name the new pixel "ShopMy Checkout Tracking"

4. In the "Customer Privacy" section, make the following selections:

   1. Permission: Not required
   2. Data Sale: Data collected does not qualify as data sale
      1. ShopMy does not store or sell your customer information

5. Paste the following into the "Code" section to set up the ShopMy Order Tracking Integration:

   1. JavaScript

      analytics.subscribe('checkout_completed', event => {
        const checkout = event.data.checkout;
        const allDiscountCodes = checkout.discountApplications
          .map(discount => {
            if (discount.type === 'DISCOUNT_CODE') return discount.title;
          })
          .filter(Boolean);
      
        const cookies = document.cookie
          .split(';')
          .reduce((res, cookie) => ({ ...res, [(cookie.split('=')[0] || '').trim()]: (cookie.split('=')[1] || '').trim() }), {});
        const { sms_click_id } = cookies;
        const code = allDiscountCodes?.[0];
        const shopmy_data = {
          orderAmount: checkout.subtotalPrice?.amount,
          orderId: checkout?.order?.id,
          clickId: sms_click_id,
          currency: checkout.currencyCode,
          is_returning_customer: false,
          page_url: window.location.href,
          code
        };
      
        fetch(`https://api.shopmy.us/api/order_confirmation`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify(shopmy_data)
        })
          .then(r => {
            if (!r.ok) throw new Error('Invalid order request sent');
            r.json();
          })
          .then(() => {
            const now = new Date();
            document.cookie = `sms_click_id=;expires=${now.toUTCString()};path=/;`;
            document.cookie = `sms_click_time=;expires=${now.toUTCString()};path=/;`;
          })
          .catch(() => {
            // ignore the error
          });
      });
      
      

6. Click the "Save" button in the top search bar to save the new Custom Pixel.

7. Click the "Connect" button on the bottom right to activate the Custom Pixel.

   1. if you see the following message on the "Connect" button and you are unable to click it, make sure you have completed step 6 and saved changes thus far:

      1. The pixel cannot be connected until a custom pixel script is saved for it
         

Step Three: Request Testing

Contact your Brand Success Manager to place a test order and test the integration end-to-end. We will communicate with you any test order IDs we place so they can be cancelled after the integration is verified.

📘

By adding our integration code to your site, you are agreeing to the terms of the ShopMy affiliate network. Please review these terms here.