Step 1: Enable the CreatorCommerce SDK

Enabling the SDK ensures that context on which affiliate a shopper clicked through to is passed throughout the theme. This allows your theme to be aware of the fact that a shopper is in a co-branded shopping funnel in the first place, and provides the basis for orders to be attributes to a creator & for UI to react accordingly.

1. Go to Shopify
2. Go to "Online Storefront"
3. Open your theme "Customize"
4. Select "App embeds" on the left-hand side
5. Find "CreatorCommerce SDK" in the list
6. Enable (Toggle to on)
7. Save the theme

‍

Step 2: Enable full-funnel analytics

To unlock analytics on your co-branded affiliate funnels, you'll need to install CreatorCommerce's GA tracking script. This is a fully managed analytics instance you can get from your CreatorCommerce dashboard, and include on your site (snippet also included below). Once added, you'll see additional metrics pull into your CreatorCommerce dashboard.

1. Copy the CreatorCommerce Pixel (below or from your CC dashboard)
2. Go to Shopify
3. Go to Settings
4. Go to Custom Events
5. Click to Add custom pixel
6. Name it CreatorCommerce Pixel
7. For Permission select Required: Marketing, Analytics
8. For Data sales select Data collected qualifies as data sale
9. Paste the pixel snippet into the body
10. Click Connect

‍

‍

If you're familiar with Google Analytics, this will enable all the traditional metics you've come to expect such as CSV & AOV. However, this will also unlock additional insights that CreatorCommerce will compute for you such as metrics on new customers, and metrics per campaign/segment.

‍

Copy this pixel (Do not edit)

// CONSTANTS
const myshopifyDomain = init.data.shop.myshopifyDomain;
const ENVIRONMENT = "production";

//Utils
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Google Tag Manager
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-NF75CQXK');


gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", async (event) => {
   let ccCreatorId = event?.data?.checkout?.attributes.find(a => a.key === "cc-creator-id")?.value;
  let ccCampaignId = event?.data?.checkout?.attributes.find(a => a.key === "cc-campaign-id")?.value;
  if(!ccCreatorId) {
      return;
  }
  console.log(`Firing ${(event).name} - ${ccCreatorId}`)

  window.dataLayer.push({
    event: "purchase",
    ecommerce: {
      transaction_id: event.data?.checkout?.order?.id,
      value: event.data?.checkout?.totalPrice?.amount,
      currency: event.data?.checkout?.totalPrice?.currencyCode,
      shipping: event.data?.checkout?.shippingLine?.price?.amount,
      tax: event.data?.checkout?.totalTax?.amount,
      is_new_customer: event.data?.checkout?.order?.customer?.isFirstOrder,
      items: event.data?.checkout?.lineItems.map(item => ({
         item_id: item?.variant?.product?.id,
         item_name: item?.variant?.product?.title,
         item_variant:  item?.variant?.id,
         quantity: item?.quantity,
         price: item?.variant?.price.amount,
      }))
    },
    environment: ENVIRONMENT,
    creator_id: ccCreatorId,
    campaign_id: ccCampaignId,
    channel_id: myshopifyDomain,
    myshopify_domain: myshopifyDomain,
  });
});


analytics.subscribe("checkout_started", async (event) => {
  let ccCreatorId = event?.data?.checkout?.attributes.find(a => a.key === "cc-creator-id")?.value
  let ccCampaignId = event?.data?.checkout?.attributes.find(a => a.key === "cc-campaign-id")?.value;
  if(!ccCreatorId) {
      return;
  }

  
  console.log(`Firing ${(event).name} - ${ccCreatorId}`)
  window.dataLayer.push({
    event: "begin_checkout",
    ecommerce: {
      value: event.data?.checkout?.totalPrice?.amount,
      currency: event.data?.checkout?.currencyCode,
      items: event.data?.checkout?.lineItems.map(item => ({
         item_id: item?.variant?.product?.id,
         item_name: item?.variant?.product?.title,
         item_variant:  item?.variant?.id,
         quantity: item?.quantity,
         price: item?.variant?.price.amount,
      }))
    },
    environment: ENVIRONMENT,
    creator_id: ccCreatorId,
    campaign_id: ccCampaignId,
    channel_id: myshopifyDomain,
    myshopify_domain: myshopifyDomain,
  });
});

analytics.subscribe("product_added_to_cart", async (event) => {
  const ccCreatorId = await browser.cookie.get('cc-creator-shop-id');
  const ccCampaignId = await browser.cookie.get('cc-campaign-id');
  if(!ccCreatorId) {
     await sleep(2000);
  }
  if(!ccCreatorId) {
      return;
  }

  console.log(`Firing ${(event).name} - ${ccCreatorId}`)
  window.dataLayer.push({
    event: "add_to_cart",
    ecommerce: {
      value: event.data?.cartLine?.cost?.totalAmount?.amount,
      currency: event.data?.cartLine?.cost?.totalAmount?.currencyCode,
      items: [
        {
          item_id: event.data?.cartLine?.merchandise?.product?.id,
          item_name: event.data?.cartLine?.merchandise?.product?.title,
          item_variant:  event.data?.cartLine?.merchandise?.id,
          quantity: event.data?.cartLine?.quantity,
          price: event.data?.cartLine?.merchandise?.price?.amount,
        }
      ]
    },
    environment: ENVIRONMENT,
    creator_id: ccCreatorId,
    campaign_id: ccCampaignId,
    channel_id: myshopifyDomain,
    myshopify_domain: myshopifyDomain
  });
});



analytics.subscribe("page_viewed", async (event) => {
  const ccCreatorId = await browser.cookie.get('cc-creator-shop-id');
   const ccCampaignId = await browser.cookie.get('cc-campaign-id');
  if(!ccCreatorId) {
     await sleep(2000);
  }
  if(!ccCreatorId) {
      return;
  }
  console.log(`Firing ${(event).name} - ${ccCreatorId}`)
  window.dataLayer.push({
    event: "page_view",
    page_location: event.context.document.location.href,
    page_title: event.context.document.title,
    creator_id: ccCreatorId,
    campaign_id: ccCampaignId,
    myshopify_domain: myshopifyDomain,
    channel_id: myshopifyDomain,
    environment: ENVIRONMENT,
  });
});

analytics.subscribe("product_viewed", async (event) => {
  const ccCreatorId = await browser.cookie.get('cc-creator-shop-id');
   const ccCampaignId = await browser.cookie.get('cc-campaign-id');
  if(!ccCreatorId) {
     await sleep(2000);
  }
  if(!ccCreatorId) {
      return;
  }
  console.log(`Firing ${(event).name} - ${ccCreatorId}`)
  window.dataLayer.push({
    event: "view_item",
    ecommerce: {
      currency: event.data?.productVariant?.price?.currencyCode,
      value: event.data?.productVariant?.price?.amount,
      items: [
        {
          item_id: event.data?.productVariant?.product?.id,
          item_name: event.data?.productVariant?.product?.title,
          item_variant:  event.data?.productVariant?.id,
        }
      ]
    },
    environment: ENVIRONMENT,
    creator_id: ccCreatorId,
    campaign_id: ccCampaignId,
    channel_id: myshopifyDomain,
    myshopify_domain: myshopifyDomain
  });
});

console.log("CreatorCommerce Pixel Loaded")