GTM Integration Setup

Step One: Add a Click Tracking Google Tag

1. Title the tag "Shop My Shelf Click Tracking"

2. Set the Tag Type to Custom HTML

3. Set the HTML to:

   1. JavaScript

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

4. Set the Triggering field to Fire on a "Page View" on "All Pages"

5. Ensure the tag looks like the image below and press "Save"

   1. 
      

Step Two: Add an Order Tracking Google Tag

1. Set the title to "Shop My Shelf Order Tracking"

2. Set the HTML to the following. Where noted, change the declared variables relying on dataLayer to your data configuration:

   1. orderId - the unique identifier for the order (eg. 123456)

   2. orderAmount- the total before taxes and discounts (eg: 89.99)

   3. currency - the ISO 4217 currency code (eg: "USD")

   4. code - the optional discount code used at checkout (eg: 20PERCENTOFF)

   5. JavaScript

      <script>
       /* Google Tag Manager does not accept ECMASCRIPT6*/
       var cookies = {}
       var cookiesList = document.cookie.split(';');
       for (var i = 0; i < cookiesList.length; i++) {
           if (cookiesList[i]) {
               cookies[cookiesList[i].split('=')[0].trim()] = cookiesList[i].split('=')[1].trim();
           }
       }
      
       var orderId, orderAmount, currency, code;
       try {
           // Need to pull the following from however your data layer is configured, this is one example used on a Shopify implementation.
           orderId = dataLayer.find(function (a){ return 'transactionId' in a}).transactionId;
           orderAmount = dataLayer.find(function (a){ return 'transactionGoodsNet' in a}).transactionGoodsNet;
           currency = dataLayer.find(function (a){ return 'currencyCode' in a}).currencyCode;
           code = dataLayer.find(function (a){ return 'transactionDiscountCode' in a}).transactionDiscountCode;
       } catch(error) {
           console.log('We had an issue with the SMS checkout', error)
       }
      
      
        fetch('https://api.shopmy.us/api/order_confirmation', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            orderAmount: orderAmount,
            orderId: orderId,
            clickId: cookies.sms_click_id,
            currency: currency,
            page_url: window.location.href,
            code: code
          })
        })
          .then(function(r) {
            if (!r.ok) throw new Error('Invalid order request sent');
            return r.json();
          })
          .then(function() {
            var now = new Date();
            document.cookie = 'sms_click_id=;expires=' + now.toUTCString() + ';path=/;';
            document.cookie = 'sms_click_time=;expires=' + now.toUTCString() + ';path=/;';
            document.cookie = 'sms_code=;expires=' + now.toUTCString() + ';path=/;';
          })
          .catch(function() {
            // ignore the error
          });
      </script>
      

3. Set the Triggering field to Fire on "Order Confirmation" on "DOM Ready"

4. Ensure the tag looks like the following and press "Save"

   1. 

Step Three: Handle Order Cancellations

Configure a POST request to be sent to the following endpoint whenever an order is cancelled. This is crucial for maintaining accurate tracking and reporting in our system.

📘

This endpoint uses your unique Brand Developer Key for authorization. Always keep your key confidential to ensure security.

fetch(`https://api.shopmy.us/api/Affiliates/cancel`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer <YOUR_DEVELOPER_KEY>`,
  },
  body: JSON.stringify({
    order_id: '123456',
  })
})

Step Four: Handle Order Updates

Configure a POST request to be sent to the following endpoint whenever an order is updated. We define an order update as whenever a order has new total amount, or currency change. This is crucial for maintaining accurate tracking and reporting in our system.

📘

This endpoint uses your unique Brand Developer Key for authorization. Always keep your key confidential to ensure security

fetch(`https://api.shopmy.us/api/Affiliates/update`, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': `Bearer <YOUR_DEVELOPER_KEY>`,
  },
  body: JSON.stringify({
    order_id: '123456',
    currency: 'USD',
    new_order_amount: '1234.56'
  })
})

Step Five: 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.