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”.
Inside this window, click the “Network” tab (red box in screenshot)
Go ahead and click the toggle just below Network that says “Preserve Log” (blue arrow in screenshot)
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.