Pixel Helper is a Google Chrome tool which shows Facebook the pixels that are loaded on the website you’re browsing. Nice and fast, with no previous programming experience needed. In addition to troubleshooting errors on your website or e-shop, you can also use it to check pixels on other websites — a great way to learn from other’s mistakes!
If you haven’t installed Pixel Helper on your browser yet, do so now and keep reading for some useful tips on how to best utilize it.
This article was written at a time when facebook started implementing a new type of pixel that reads some data from the web, called “Microdata” and other events. They will be described in the following articles, and we will be missing out on this topic for simplicity.
What can Pixel Helper do?
To put it simply, Pixel Helper can show you details of a pixel installed on the website you are currently browsing. For more detailed directions of pixel setup, go to: https://developers.facebook.com/docs/facebook-pixel/api-reference
However, Pixel Helper doesn’t show you the entire code, just the most important part.
Let’s use modcloth.com as an example. After clicking the Pixel Helper icon on the modcloth.com homepage you’ll see this:
The script of the website code will read as follows:
<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,'script','https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1524838827781275'); // Insert your pixel ID here.
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1524838827781275&ev=PageView&noscript=1"/></noscript>
In this particular case, the script doesn’t run within the web code, it’s launched through another program, so viewing and analyzing its details is a task for someone with programming knowledge.
What Pixel Helper shows at the click of a button:
- Pixel ID is 1524838827781275
- There is just one event reported on the web: ‘PageView’
If you want to see more details, simply click the event:
Now you can see what information they’re collecting, but this is nothing compared to what we’re about to show you.
Product pixels
More useful insight comes from looking at a specific product: https://www.modcloth.com/shop/dresses/garden-crossing-dress/10013124.html?dwvar_10013124_color=083&cgid=dresses_107#start=2 (Once this product becomes unavailable, the link will stop working. When that happens, we would love it if you emailed us and let us know so that we can update it and continue to use current examples. Thanks!)).
Here, Pixel Helper shows two events:
In addition to the ‘PageView’ event, which we saw on the homepage, there’s the ‘ViewContent’ event, which Facebook uses to identify a particular product:
- Product ID: 110882
- Product price: 89.99
- Product category: dress
- Product name: modcloth>shopping>pdp>garden-crossing-dress (click ‘show’ to view this)
This information is crucial for you as a website owner. However, your point of particular interest is the green icon indicating that everything is working properly. Should the icon turn red, something went wrong. An error might occur in pixel setup, in the product catalog definition, or while exporting products to the catalog. And that’s when ‘content_ids’ in Pixel Helper will come in handy because you know that this is where you should look for the error and you don’t have to search the entire catalog.
If you’re browsing your competitor’s website, you can see that their Product Catalog and Pixel are set up so that they can use Facebook Product Ads. In contrast, you can see that e.g. Etsy.com doesn’t use Product Ads at all (as of May 2017).
It might also be of some interest to check what e-shops put on their websites. E.g. Macys.com:
As you can see, they use three different pixels, two of which are set up incorrectly.
Keep in mind an error message may not always mean you did anything wrong. It’s simply to call attention to irregular use. For example, we leave some products out of the XML feed, therefore the pixel reports a bug. As long as you know why the error message is there and it’s used strategically, you’re fine.
Then there’s Wilson.com:
Ten different pixels, yet not one with correctly set products.
You can usually tell at first sight that there’s an error the e-shop should troubleshoot. In general, this is information useful for the e-shop owner and employees.
Inspire Yourself
When the time comes to set up your own pixel, it’s highly recommended to look for some inspiration from your competitors’ events and pixel setup first. You’re bound to come across some interesting and inspiring ideas to enhance your own work.
We recommend drawing inspiration from XMLCanvas.com or Booking.com.
First we can check out Booking.com and their pixel setup:
Here, Booking.com gets a lot of interesting information from the pixel, which helps target ads. Information collected includes searches for destinations, hotel quality, number of guests, number of children, type of facility, what device users are on, etc.
Interestingly, they work with pixels on the booking page where they use the AddToCart and Initiate Checkout events:
Now let’s look at an XMLCanvas.com pixel:
We launch many events which we use to collect information about visitors, such as:
- How many times they’ve visited
- What device they use to browse our website
- What per cent of the webpage they scrolled down
- How long they’ve been browsing our website
- And much more…
We use all the information accordingly when setting up advertising campaigns. Why would you retarget someone who’s visited your web just once and left immediately? All this can help us (and you!) boost ad effectiveness and cut costs.