"Why Aren't My Purchases Tracking Correctly!?"

The biggest question / pain point I’ve heard from Shopify storeowners when trying to measure the effectiveness of their Facebook advertising campaigns is: “How do I ensure I’ve set this Facebook Pixel and purchase event up properly?”

Not properly tracking your return on your ad spend is a major problem… and I think we’re all aware that ROI requires both profit and cost components, so I’m going to cut straight to the point here.

Below, I present the battle-tested dynamic version of the Shopify purchase pixel that you can place in your store in about 2 minutes … so that you can start measuring your campaigns on their real merits (ROI)!

Here's What The Purchase Event Should Give You

Before we get to the actual Facebook Purchase Pixel code for Shopify, let’s go through exactly what data it will send to Facebook and what you can do with said data.

Return the value (revenue) associated with your ad campaigns, both view-through and click-through. Clearly, this is highly important. Not only does it enable you to perform high-level ROI analysis, but it also gives you the capability to perform more detailed view-through and click analysis. See the screenshots below: I’m working in Ad Manager here and I can click “Columns”, “Customize Columns” and check to show “Purchase (Facebook Pixel)” (quantity)…

“Cost Per Purchase (Facebook Pixel)” …

and “Purchase Conversion Value (Facebook Pixel)” (revenue):

Further, I can change my attribution window by clicking “Change Attribution Window” in the lower-right of the Customize Columns window. You can check as many of these boxes as you want to see how your ad viewers &/or clickers convert over different time-frames.

A note here: remember that view-through attribution is tricky, especially if you use multi-channel advertising to drive the same action. I’ll try to write a follow-up post on this complex subject soon.

Track which products are purchased.

Of course, if we want to retarget users who have viewed a certain product or added it to their cart without purchasing, we’ll need to be able to make exclusions at the product level.For this reason, we pass in the product IDs of all of the items the user has purchased.Further, the product id (passed into the content_ids parameter as an array (list)) is required if you want to run Dynamic Product Ads. If you’re interested in running Dynamic Product Ads, check out my course “Advanced Facebook Advertising for Shopify”, where you’ll learn exactly how to set up your Shopify tagging and Product Catalog, as required by Facebook.

Track number of items purchased.

Although this doesn’t give us quite as much power for retargeting / reporting as the product IDs or the conversion value, you could create a “big order” audience for folks who have purchased 3 or more items, for example.

Placing Your Pixel Code

Now, let’s get down to implementing this.

To place the pixel, we’re going to go to our Shopify Admin area and then go to “Settings”, “Checkout”

About halfway down the page, we’ll see an area labeled “Additional content and scripts”.

The text box below this is where you can place your conversion pixels for Facebook and any other ad / analytics platform you use.

We’re going to paste our Facebook pixel code that we’re about to see in this box (with a little “liquid magic” to make sure we don’t double-count conversions… more on that in a moment).

The Pixel / Code

Now, at long last, here’s the code we need to paste.

Let me point out a few important things here:

Due to the some recent Shopify changes, and how certain Shopify themes handle the situation where a user wants to check on their order status, we want to be sure that this conversion pixel only fires when they’re actually making a purchase… NOT if they come back to check the status of their order. So, we’re going to wrap any code we paste here in an “if, else” block. If you want to learn more about why we need this and the details, you can check the Shopify docs on it here.

Remember to replace the capitalized text “INSERTFBPIXELID” with your unique pixel ID… so don’t copy and paste this directly without making that replacement!

Where I’m sending over the product IDs, I’m actually passing them to Facebook so that they look like this (example: ‘shopify_240214_02049021’), which is the string “shopify_” followed by the product ID, an underscore, and the variant ID. The reason I do this is so that my purchase events will play nicely with the awesome app I use to set up my Facebook Product Catalog integration with Shopify stores I’m working on. If you don’t use this app, you can still leave this as-is, just remember to use “contains” product-id as your filter criteria when setting up your exclusion criteria for your retargeting audience.

Here’s the code that we’ll paste into our “Additional content and scripts box”… remember to move any existing code you may have into the first part of the {% if first_time_accessed %} block… and remember to click “Save” in the upper right of the screen when you’re finished.

The Code To Use

Another reminder: Please remember to replace ‘INSERTFBPIXELID’ with your actual Facebook Pixel ID in line 9 and line 20.

Debugging And Examining Data

After we place our code, we want to be sure that we don’t see any errors and ensure Facebook is receiving our data.So, immediately after hitting “Save”, go to your store and add a product or two to your cart.

I always use Chrome for debugging because of its awesome Developer Tools, but if you use another browser you should still be able to apply these steps with slight modifications.

Ok, so we’ve added a few products to our cart. Go ahead and click through to your Checkout screen.

Once on the checkout screen, right-click your page and choose “Inspect Element” (or CTRL+SHIFT+I on Windows). This will open a second window called “Developer Tools”.

Then be sure that your “Filter” is activated by clicking the little “funnel” icon (green box), and type “facebook” in the filter box (green arrow in screenshot)

Now that we’re ready to read our Facebook “request” data, let’s continue through the checkout process.

After you click to “Complete Order”, after you’ve been sent to the purchase confirmation screen, let’s check our Developer Tools window.

If you scroll down through your list of requests (there will probably be several here), you will probably see one or TWO requests that say “Purchase” as the ev (event). No fear, the first of these two probably has Status code 307, where the second is 200. That’s ok. The first request gets redirected and the second completes successfully.

Ok, so now let’s click the second request (the one with “200” Status).

This will expand details about the request in a sidebar on the right-hand side of your Dev Tools.

Scroll all the way down to the bottom of this sidebar and you will see the “Query String Parameters” of the request. This is how Facebook is receiving your data.

Inside these parameters, we want to be confirm the following:

ev: should be Purchase

cd[value]: should be the total purchase amount of the order

cd[content_ids]: should be an array (surrounded by […]) containing a list of strings that look like “shopify_3515882755_10240002179” (where the first number is your product ID and the second is your variant ID.

cd[content_type]: should be “product”

cd[num_items]: should be your total number of items purchased.

If all of that looks good, next we just want to be sure our newly added code didn’t create any errors in the console.

Chances are, if the data looks correct, you won’t see any errors related to your newly added code, but we just want to be sure.

Go to the “Console” tab and look for errors. What we’re really looking for is an error actually related to our code… so if you have a few errors here it’s not the end of the world (e.g.: “Uncaught NetworkError: Failed to execute ‘send’ on ‘XMLHTTpRequest’… related to Google Wallet. This is not related to our newly added code).

You can check out the code that generates each error by clicking the hyperlink on the end of each respective error row, and basically you don’t want to see them pointing to an issue in our Facebook purchase event code. If you have any questions on this, check with your developer or have them test it themselves.

Finally, after doing some testing on your site-side data flow, you can log into your Facebook Ad Manager account and go to Tools, Pixels and then click over to the “Events” tab. After a few transactions go through, you should see some “Purchases” being registered there.

Conclusion And Next Steps

Armed with this code snippet, you should be able to successfully, dynamically track your Shopify purchases for your Facebook Ads!

If you really want to harness the power of Facebook Ads for your Shopify store, this is one step of many to set up your tagging to support Dynamic Product Ads (or just more intelligent retargeting ads). If you want step-by-step setup instructions with code snippets and walkthrough videos, click here to checkout my course “Advanced Facebook Advertising for Shopify”, where you’ll learn how to implement all of the technical parts (even if you suck at coding), and also a bit about Facebook Ad strategy for e-commerce.