RudderStack Shopify Source Solution Offerings

This guide walks you through the different product offerings as a part of the RudderStack Shopify Source Solution.

RudderStack Pixel

You can install the RudderStack Pixel app directly to your Shopify store. This app gives you the option to track Shopify’s standard pixel events. RudderStack automatically tracks these events and transforms them so that they adhere to the RudderStack Ecommerce Spec.

Also, this app automatically subscribes you to several of Shopify’s standard webhook topics for server-side ecommerce tracking. RudderStack transforms the event names and properties so that they adhere to the RudderStack Ecommerce Spec.

You can find the raw event name (pre-transformation) in the context.shopifyDetails object of the event payload.

Shopify Custom Pixel

Shopify Custom Pixel is a script created and maintained by RudderStack. It listens for Shopify’s standard pixel events and triggers RudderStack events when they occur.

Because it is a custom pixel, it has relaxed permissions and is able to load the RudderStack JavaScript SDK on your Shopify store. It also lets you edit the code and add additional events, as required.

Setup

1. Copy the code from the Custom Pixel Github repository. Alternatively, you can also fork this repo so you can make any changes to the code as per your business requirements.
2. Paste the code into a custom pixel that you create in your Shopify store.
3. Specify the data plane URL and the Shopify source write key at the top of the code script, as shown:

// Mandatory credentials for RudderStack to connect this pixel to your account source.
// Replace the below values with your own values.
const DATAPLANE_URL = "<DATA_PLANE_URL>";
const WRITE_KEY = "<SOURCE_WRITE_KEY>";

Send custom contextual data

The custom pixel loads the JavaScript SDK v3, so you can attach your own data - marketing identifiers, click IDs, experiment buckets, store metadata, and so on - to the events it sends. There are three ways to do this:

To send event properties, add the fields to the properties object of a track or page call:

rudderanalytics.track("Product Viewed", {
  ...trackProperties,
  storeLocale: event.context.document.location.pathname.split("/")[1]
});

To send custom context for a single event, pass the fields in the apiOptions argument. The SDK merges any keys other than integrations, anonymousId, and originalTimestamp into that event’s context object. The custom pixel already uses this argument to set the page context, so add your fields alongside the existing ones:

// contextualPayload and trackProperties come from your existing
// custom pixel event handling
rudderanalytics.track("Product Viewed", trackProperties, {
  ...contextualPayload,
  campaign: {
    source: "newsletter"
  }
});

To set custom context once and have the SDK attach it to every subsequent event, use the setCustomContext API. For example, to capture a click ID from the landing page URL and carry it on all the events that follow:

analytics.subscribe("page_viewed", (event) => {
  const params = new URLSearchParams(event.context.document.location.search);
  const clickId = params.get("fbclid");

  if (clickId) {
    rudderanalytics.setCustomContext({
      marketing: {
        fbclid: clickId
      }
    });
  }

  // Existing page call
});

The SDK stores custom context in memory only, so it doesn’t persist across page loads. On a multi-page storefront, either set it on every page load as shown above, or persist the value yourself - in a cookie or in localStorage - and set it again from there.