Code snippets overview

In this video, you can see a detailed demonstration of how to install the tracking code and advanced usage snippet (if necessary). Or you can follow the instructions below. If you are utilizing Compose via the Shopify App, check out more information here.

The code snippets needed to run A/B tests through Compose can be found in your ‘Project Settings’. Every project has a different code snippet! To get there, open up the specific project that you’re working on in Compose.

From the project, 

1. Go to ‘Project Settings’ in the left sidebar
2. Click on the ‘Snippets’ tab
3. Copy the necessary code snippets 

This Tracking Code needs to be added to each page of your site that Compose is expected to run. Each tracking code is unique to the project, so make sure that you’re using the corresponding code for each of your projects. 

Advanced usage tracking code

If your site uses React or Vue, use the Advanced Usage Code also found in the ‘Tracking’ tab to connect the redirects to your router. This will be used instead of the regular Tracking Code.

We expect that the regular tracking code will work for most Shopify users, unless you're using Hydrogen, in which case you may need to use the Advanced Usage Code.

Shopify Usage code

The Shopify Usage Code is to track revenue on your experiments. 

If you are using the Compose Shopify App revenue tracking is on by default and can be changed in your organization setting. 

If you are using manual script placement, you will need this Shopify Usage code in addition to the Regular Tracking Code to track revenue. This snippet will be created as a Custom Pixel. 

To create a Custom Pixel, go to your Shopify Settings at the bottom of the left side bar:

• From settings, click on ‘Customer Events’:
• Select `Add custom pixel` and give it a name, such as Compose Revenue Tracking.
• Add the snippet and Save

You can find a more detailed walkthrough here.

Revenue Tracking

If you're not using Shopify, but want to track revenue, you can use this code snippet as a starting point. It will need to be positioned to fire when revenue-based events happen, but the specifics will depend on what platform you're using. Learn more.

<script>
  window.compose = window.compose || {
    queue: [],
    dispatchEvent(event) {
      this.queue.push(event);
    },
  };
  window.compose.dispatchEvent(
    new CustomEvent("goal:revenue", {
      detail: {
        value: passCheckoutSubtotalsHere,
      },
    })
  );
</script>

If you need help with revenue tracking, contact us for assistance.