How To Install A Choozle Dynamic Pixel In Shopify (Updated Experience)

Step 2: Add the Choozle Dynamic Pixel to Your Shopify Store

1. Log in to your Shopify admin panel.

2. Go to Settings on the bottom left hand corner
   
   
3. Select Customer Events and click Add Custom Pixel

4. Associated a Pixel Name in Shopify, e.g. Choozle Purchase Confirmation Dynamic Pixel, hit  Add Pixel

5. Under Customer Privacy, input the following unless advised otherwise:

• Permission = Not Required
• Data Sale = Data collected does not qualify as data sale

6.  When the Choozle team provides a Shopify Pixel it will look something look this:

<img height="1" width="1" style="border-style:none;" alt="" src="https://insight.adsrvr.org/track/pxl/?adv=cbgw4dn&ct=0:afz3rab&fmt=3&v=${checkoutTotalPrice}&vf=${currency}&orderid=${orderNumber}"/>

7. Using the URL you copied from step 6. paste that URL into the  Shopify script below where it says INSERT URL HERE. Ensure there are no spaces.

Shopify Variables
Sale Amount/Transaction Amount = ${checkoutTotalPrice}
Currency = ${currency}
OrderID = ${orderNumber}

Shopify Standard Events documentation found here 

analytics.subscribe('checkout_completed', (event) => {
  // Access the checkout data from the event object
  const checkout = event.data.checkout;

  // Extract the relevant data
  const checkoutTotalPrice = checkout.totalPrice.amount; // Adjust based on your actual event data structure
  const currency = checkout.totalTax.currencyCode; // Adjust based on your actual event data structure
  const orderNumber = checkout.order.id; // Adjust based on your actual event data structure

  // Construct the URL for the tracking pixel
  const trackingPixelUrl = `INSERT URL HERE`;

  // Create an image element
  const img = document.createElement('img');

  // Set image attributes
  img.src = trackingPixelUrl
  img.height = 1;
  img.width = 1;
  img.style.borderStyle = 'none';
  img.alt = ''; // Alt attribute should be empty or descriptive

  // Append the image to the body to trigger the request
  document.body.appendChild(img);
});

8. Your final script should look like this

analytics.subscribe('checkout_completed', (event) => {
  // Access the checkout data from the event object
  const checkout = event.data.checkout;

  // Extract the relevant data
  const checkoutTotalPrice = checkout.totalPrice.amount; // Adjust based on your actual event data structure
  const currency = checkout.totalTax.currencyCode; // Adjust based on your actual event data structure
  const orderNumber = checkout.order.id; // Adjust based on your actual event data structure

  // Construct the URL for the tracking pixel
  const trackingPixelUrl = `https://insight.adsrvr.org/track/pxl/?adv=cbgw4dn&ct=0:afz3rab&fmt=3&v=${checkoutTotalPrice}&vf=${currency}&orderid=${orderNumber}`;

  // Create an image element
  const img = document.createElement('img');

  // Set image attributes
  img.src = trackingPixelUrl
  img.height = 1;
  img.width = 1;
  img.style.borderStyle = 'none';
  img.alt = ''; // Alt attribute should be empty or descriptive

  // Append the image to the body to trigger the request
  document.body.appendChild(img);
}); 

9.  Copy and paste the entire script from step 8.) into the code section in Shopify

10. Hit Save and Connect

Step 3: Verify Your Dynamic Pixel Is Firing

Once you’ve added the pixel code to your Shopify store, it’s crucial to test that the pixel is firing correctly. 

1. Visit your store: Go to your live Shopify store  
2. Make a test purchase: Complete a test order or trigger the events you want to track (e.g., checkout_completed) to ensure the pixel is firing correctly.
3. Check your Choozle account: Log into Choozle account and verify that website data is properly being sent back to Choozle Reporting.  

Congrats, your implementation is complete - you're all set!