How to add the Facebook Pixel and track events with PixelYourSite

Watch this short video and discover a few of the cool things PixelYourSite Pro can help you to do:

 

How to add the Facebook pixel code on every page of your WordPress site

With the PixelYourSite plugin, you can install the Facebook Pixel code with just a single click. You don’t even need the actual code, just the Pixel ID.  Once on your site, the pixel will start to send crucial data to Facebook right away.

  • Click “PixelYourSite” link in the left menu of your WordPress admin
  • Paste the Facebook Pixel ID inside the dedicated field in the admin area of the plugin (be careful not to paste the full code of the pixel)

add-id

 

  • Scroll Down and check the “Activate Plugin General Settings” box
  • Click “Save Settings” Button

activate-general-settings

Note: On the plugin first tab you will find various settings. The default configuration works fine for most cases, but it is recommended to review the options and make any changes that you might want

What happens after you activate the pixel

  • Facebook Pixel code is added on every page of your site
  • Search event is added on your search pages, search_string included
  • The General Event is activated (read bellow)

How to get the Facebook Pixel ID

You can usually take your pixel ID from here: https://www.facebook.com/ads/manager/pixel/facebook_pixel

  • Click on the Pixels link
  • You will find a list with all your pixels and their IDs.
  • For more details about the pixel, you can click on the link. If you never used the pixel before you will be asked to set up the pixel. At this point simply add the pixel ID and activate PixelYourSite. This will be sufficient to activate the pixel on your site.

 

REMEMBER: With the PixelYourSite plugin you don’t need to use all the code, only the Pixel ID. The plugin will do the rest for you, including adding events when this is required. If you want to add events, you can easily do it from the plugin itself, without the need to mess up with any code.

Enable Advanced Matching in Facebook Pixel

Pro Option – click to update

According to Facebook, Advance Matching can lead to 10% increase in attributed conversions and 20% increase in reach of retargeting campaigns.

matching
Enable Advanced Matching

What’s exactly Advanced Matching? It’s a new Facebook feature that lets you send them the data you have about the visitors of your website, so they can better make a match with a real Facebook user.

PixelYourSite Pro plugin will send the default  WordPress info like the first name, last name, and email for logged in visitors of the website.

WooCommerce Advanced Matching

If a logged in WooCommerce client visits the website we will send Facebook all the available data in order to make a better match.

WooCommerce Purchase Event Advanced Matching –  once a transaction is completed, the user data will be sent to Facebook, regardless the fact that the user was logged in before or not.

This is how the code for advanced matching looks like:

fbq(‘init’, ‘xxxxxxxxxxxxxxxx’ , { email: ‘JohnSnow@ilovechristmas.com’, phone: ‘1234567890’, fn: ‘John’, ln: ‘Snow’, ct: ‘Castle Black’, st: ‘Winterfell’, zip: ‘321winteriscoming’, country: ‘KN’ } );

How To Use The General Event Option

The General Event option will be enabled by default on:

  • Post
  • Pages
  • Taxonomies

Additionally, you can enable it on Custom Post type.

general-event

General Event Name

By default, the name of this event is set to the GeneralEvent, but you can change it to anything you want. It is important to remember the name and use it when you build Custom Audiences. You will find a lot more info, tips and strategies about this in the FREE GUIDE linked in the plugin itself, so you better look for it and download it now.

What the General Event does

This option will add an event on any page (where it is active), pulling key parameters like content_name, category_name, content_type or tags. You can use this event to create super-targeted Custom Audiences for remarketing. For example, you can have an audience with people that visited posts under one specific category, or having one particular tag. In the same way, you can define Custom Conversions using the GeneralEvent.

This option is very powerful, and it’s better to have it working from the start. It doesn’t matter that you don’t have a strategy in place right now, it’s better to send all this useful data to Facebook so you can use it when you have to.

General Event Special Guide

The General Event can be a powerful tool in your marketing arsenal and part of smart strategies that will improve your ads performance.

Because of this, we made a special GUIDE on how to use it: Click here  to get it

Track Traffic Source and UTM (URL tags)

Pro Option – Click to update

traffic
Enable Traffic Source and UTM parameters on all the events

By enabling “Traffic Source” tracking you will add a traffic_source parameter for all the events that can be used for Custom Audiences.

Additionally, if URL Tags (UTM) are used, each of them will be track as a separate parameter. This will let you create extremely targeted audiences that can be retargeted with personalized campaigns.

This is how the GeneralEvent looks in Pixel Helper Chrome Extension when this option is used:

traffic-helper
UTM and traffic_source parameters for an event as shown by PixelHelper

How to use traffic_source and UTM parameters

You can create Custom Audiences based on where the users that triggered an event are coming from. Using Custom Audiences > Custom Combination > Events, select the event you are interested in, then the traffic_source parameter and add the site name:

 

traffic-param
Built custom audiences based on events and traffic sources

If you are using URL tags (UTM), follow the same steps to granulate Custom Audiences based on them. This can extremely helpful if you want to retarget people that triggered an event coming from a particular Facebook ad, for example.

utm-param
Create Custom Audiences based on events and URL tags (UTM)

Delay Events

Pro Option – click to update

If you want to avoid spending your money retargeting bouncing visitors, you can use the “delay events” option. You can do so for the GeneralEvent (our Custom Audiences dedicated event) and for the WooCommerce ViewContent event (more details on the WooCommerce help page).

Delay the General Event

Add the number of seconds in the dedicated field:

deleay-gen-ev

TIP: It is better to add a lower time that the desired one because the pixel code will not load instantaneously. The loading time will vary depending on the internet speed, browser, computer and so on, but you better take that into consideration. For a desired 20 seconds delay you can add something like 15-18 seconds.

PixelYourSite Events and their parameters

As you already know by now, PixelYourSite automatically adds some very useful events to your site. Each of this events pulls a set of parameters that can be used to create highly targeted Custom Audiences.

 *  – this is a PRO feature

GeneralEvent

on all pages
on all pages
content_name: name
post_id: id
content_category: WordPress category
post_type: post type
*tags: tags
*traffic_source: traffic source
*UTM: URL tags
domain: domain name

*ClickEvent

fires on clicks
on all pages
content_name: name
post_id: id
content_category: WordPress category
post_type: post type
*tags: tags
*traffic_source: traffic source
*UTM: URL tags
domain: domain name
*tag_type: the type of the link
*tag_text: the text on the link

ViewContent Event

on Products
WooCommerce &Edd
*content_name: product title
content_ids: product ID
*category_name: product category
content_type: product
*tags: product tags
*value: value
*currency: currency
*traffic_source: traffic source
*UTM: URL tags
domain: domain name

AddToCart Event

add to cart click/page
WooCommerce &Edd
*content_name: product title
content_ids: product ID
*category_name: product category
content_type: product
*tags: product tags
*value: value
*currency: currency
*traffic_source: traffic source
*UTM: URL tags
domain: domain name

InitiateCheckout Event

initiate checkout page
WooCommerce &Edd
*content_name: product title
content_ids: product ID
*category_name: product category
content_type: product
*tags: product tags
*value: value
*currency: currency
*traffic_source: traffic source
*UTM: URL tags
domain: domain name
num_items: number of products

Purchase Event

Thank You page
WooCommerce &Edd
*content_name: product title
content_ids: product ID
*category_name: product category
content_type: product
*tags: product tags
*value: value
*currency: currency
*traffic_source: traffic source
*UTM: URL tags
domain: domain name
num_items: number of products
*town: client's town
*country: client's cuntry
*payment: payment method
*shipping: shipping method
*coupon_used: yes/no
*coupon_name: coupon name

How to test your pixel

Step 1: Install Pixel Helper Chrome extension in your Chrome browser

Step 2: Open your site within Chrome. In the top right corner you will see reports from the Pixel Helper extension:

helper-rep

Step 3: Click on that icon for details about the plugin. This will open a detail report with useful information

Important: Delete page cache. Make sure you are not testing the site with a user role that is excluded because, in this case, the pixel code will not be visible.

False Error: If  WooCommerce setup is activated you might see an error about the “AddToCart” event. This is because of the dynamic AddToCart event and will disappear after you click on the add to cart button. This error is normal and you can safely ignore it.

Find out more about Pixel Helper and how to understand its reports from our dedicated article

WooCommerce user? We have e dedicated help page for you

If you’re running a Woocommerce website there is an automatic setup that will implement most of the standard events with just one click: Read more here

Known incompatibilities with other themes or plugins

Any program, service, code or plugin that adds another Facebook Pixel Code, since you can’t have to similar pixels on a page.

Incompatible plugins:

  • We had a problem with Mamaya, a retargeting service
  • It won’t work with LeadPages or any similar system  because those pages are generated outside WordPress
  • It won’t work with WP Landing Pages plugin
  • The dynamic AddToCart event won’t work with  YITH WooCommerce Added to Cart Popup Premium
  • Dynamic Events will not work with Easy Smooth Scroll Links Plugin

Possible Problems (and solutions):

  • Savoy – Minimalist AJAX WooCommerce Theme
  • Elise – A Genuinely Multi-Concept WooCommerce Theme

  • themes that change the default WooCommerce add to cart behavior, usually by adding an ajax modal on button click (like a cart popup)

It’s possible that the AddToCart event won’t work on the single product page. If this is the case, turn OFF Ajax from WooCommerce > Settings > Products > Display and test again.

 

If any incompatibilities will arise we will add them here and, of course, will try to fix them as soon is possible.

JCH-Optimize Pro issue

If you are using JCH-Optimize Pro then you will need to exclude:

  • jquery.js files:

jch-optimizepro2

 

  • inline scripts that contain pys or pysp:

jch-optimizepro1

 

Better WordPress Minify Issue

In order to make the PixelYourSite work with BWM you will have to exclude the PYS js file:

  • Go to Better WordPress Minify settings and click on Manage Enqueued Files tab
  • Select PYS pixelyoursite-pro/js/public.js
  • Click on the Not Minify option
  • Click on the Save Changes button

To make sure everything is alright you can also delete BWM cache.