How to Advertise to Your WordPress Visitors from Facebook

In this article, and the attached video, I will walk you through the process of allowing Facebook to “collect” the visitors of your WordPress web site into an “audience” that you can later advertise to from Facebook.

First though, why would you want to do this? Well, when people visit your web site, they often arrive there from a variety of means, and the first page they visit can realistically be any public page on the web site. If they don’t buy or subscribe during the first visit, there’s a good chance that they may never come back.

Well, if you implement what’s called a Facebook Pixel, you can then automatically “tag” each person that visits your web site, and later advertise to them from Facebook to revisit, and fully control the page that they see first. You can do the same from Google and Twitter, and probably others, but the focus today is on Facebook.

You can of course, implement this Facebook Pixel on just about any web site, however I will demonstrate a clean way to do it within WordPress.

Adding Custom Functions Within a WordPress Child Theme

In WordPress, the code for the Facebook Pixel should be included within a template file so that it’s available on every page. You can use WordPress logic (or Facebook audience rules) if you wish to prevent the pixel from tagging the visitors that visit specific pages, but I am going to assume you want to tag all visitors to create this advertisable audience.

Also, rather than modify the parent theme, I am going to strongly suggest that a child theme is created, and the code is placed within there. A child theme allows you to make changes to your web site without directly modifying the parent theme. The parent theme may need upgrading at some point in the future with new features or security fixes, so keeping the changes in a child theme allows for those upgrades in a clean way.

With a child theme you can realistically modify any template file, but if those files need upgrades in the future, they will not be implemented, because the parent theme’s template file will not be in use, when the same file exists within the child theme. For that reason, if you aren’t interested in creating custom plugins, modifying just the functions.php and perhaps the CSS file in the child theme will keep things future proof for the most part. Note: Even though these 2 files (functions and CSS) exist in both the parent and the child, they will all be used (unlike other template files).

Since it’s well above the scope of this tutorial to create a plugin, I am going to assume that you are going to follow along by just adding a custom function to the functions.php template file of a child theme. Here’s a link to all of the info that you need for creating a child theme:

https://codex.wordpress.org/Child_Themes

Sometimes, the author of your parent theme will have already created a child theme for you to use, or offer the instructions for creating one for you. If not, you could follow the link above to see how to go about creating one, or follow these basic steps below that should work in most cases:

How to Create a Child Theme in WordPress

1) Create a folder with the name of your parent theme appended with “-child”

2) Copy the screenshot file over from the parent theme into the new folder

3) Add a file called “style.css” to the folder, and use the template below to add the needed info at the top of the file:

/*
Theme Name: {Parent-Theme-Name} Child
Theme URI: http://www.example.com/{Parent-Theme-Name}-child/
Description: {Parent-Theme-Name} Child Theme
Author: {Your Name}
Author URI: {Your URL}
Template: {Parent-Theme-Name}
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

4) Add a file called “functions.php” to the folder, and start it off with the following function:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

5) Upload this new folder to your “/wp-content/themes/” folder (and make sure that parent theme is already uploaded there too)

6) In some cases, with some hosts, you may have to set permissions on these new files so that they are editable from the WordPress admin (check with your host if needed)

7) Activate your new child theme

Now, with the new child theme active, we have a clean way of adding our own functions. Today we will add a function that will auto-insert the code that we get from Facebook (for the Facebook Pixel) in between the HTML “head” tags.

How Does the Facebook Pixel Work?

You get just one Facebook Pixel with your Facebook account, but that’s OK, that’s all that is needed. You can create multiple audiences though, which is helpful if you want to target your audiences differently (either within the same web site, or by creating audiences from multiple web sites). For example, you could create audiences for each category of your web site if so desired.

Today we will just create one audience for the entire domain of a web site. This could be referred to as an “all visitors” audience for a given web site. In the same way though, you could create an audience of all people that visited your “thank you” page after a purchase (or after subscribing to your mailing list maybe). Then, when setting up an advertising campaign in Facebook, you can “include” the visitors audience, and “exclude” the customer (or subscriber, whatever the case may be) audience to try and convert more visitors.

By the way, this same pixel is all that needs to be placed to track “conversions” from Facebook advertising as well.

In addition, you can advertise to Instagram users from the Facebook advertising dashboard as well using your newly created audiences.

How to Create a Custom Audience and Get your Facebook Pixel Code

Follow the video or the steps below to create a custom audience in Facebook. Also in the video I walk through creating a child theme in WordPress, as well as placing the Facebook Pixel code into the child theme after creating it.

1. Login to Facebook
2. From the left side, click “Ads Manager”
3. Click “Tools” and then “Audiences”
4. Click “Create Audience” and then “Custom Audience”
5. Click “Website Traffic”
6. Next to “Website Traffic” choose: “People who visit specific web pages” (or instead, you could place the pixel code first, then the domain will be available and you could choose “Anyone who visits your web site” and then select the domain)
7. Enter your plain domain (domain.com) next to “URL contains”
8. Enter the number of days next to “In the Last x Days” (you could keep people in this audience for up to 180 days, the default is 30)
9. Give the audience a name and optional description
10. Click “Create Audience”

OK, after creating the “rules” for this audience (which, if you played around a bit, you will have noticed can get very complex), then you can get the code to place the pixel. Remember, this code will be the same across all your web sites (unless you want to track different Events for each audience). It’s just the audiences that need to be unique for your specific requirements.

Here are the steps to get your Facebook Pixel code:

1. After you create your new audience using the steps above, select it in the list
2. Click “Actions” and then “View Pixel”
3. Click inside the large text box at the top, the code will highlight, copy it to the clipboard
4. Paste it into a text file for safe keeping

How to Add the Facebook Pixel Code to WordPress

For this step, we will add the Facebook code to a variable, and then output it between the “head” HTML tags using a custom function and a WordPress hook (as opposed to editing any specific template files).

To do this, we will modify the code slightly. The code contains both double quotes and single quotes, so it’s cleaner if we choose one over the other. There are less double quotes, so we should change all double quotes in the code to single quotes. You should have pasted the code into a text file, so go ahead and modify those quotes now.

After changing double quotes to single, you should be left with something similar to below:

<!-- Facebook Pixel Code -->
<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','//connect.facebook.net/en_US/fbevents.js');

fbq('init', 'xxxxxxxxxxxxxxxxxxxxxxxxx');
fbq('track', 'PageView');</script>
<noscript><img height='1' width='1' style='display:none'
src='https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxxxxxxxxxxx&ev=PageView&noscript=1'
/></noscript>
<!-- End Facebook Pixel Code -->

Now, below is the function that can be added to the functions.php template file of the child theme that you created in the above steps.

add_action('wp_head','tthq_hook_fb_pixel');

function tthq_hook_fb_pixel() {
$output = "<!-- Facebook Pixel Code -->
<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','//connect.facebook.net/en_US/fbevents.js');

fbq('init', 'xxxxxxxxxxxxxxxxxxxxxxxxx');
fbq('track', 'PageView');</script>
<noscript><img height='1' width='1' style='display:none'
src='https://www.facebook.com/tr?id=xxxxxxxxxxxxxxxxxxxxxxxxx&ev=PageView&noscript=1'
/></noscript>
<!-- End Facebook Pixel Code -->";
echo $output;
}

Of course, “xxxxxxxxxxxxxxxxxxxxxxxxx” in the above should be the number that is specific to your Facebook account. Plus, the functions may not be exact, because Facebook may have made some changes. So be sure to copy your code exactly from Facebook and modify just the quotes as explained above.

Now, once you re-save the functions.php file (of your child theme) with the above function/hook in place, the Facebook Pixel should be placed.

You can test this by visiting your web site, and clicking “View Source” from the context menu, and looking for the placement of the code within the “head” HTML tags. Beyond that you can go back into your Facebook account and click on the audience name to see if it says “Active” next to “Status” at the far right. You can also view the audience size, and any other relevant data, at any time within there as well. Once your audience reaches 30 people it will be eligible for advertising. Another way to test placement of the Facebook pixel code, if you’re a Chrome user, is to use this extension by Facebook.

Remember that people will eventually “fall off” the list, and since the list can have people on it from Day one (because Facebook could potentially add past visitors to it), it might at some point fall below the eligibility point for low-traffic web sites.

At any rate, it’s best to try and reach these visitors within a short while after they visited your web sites (and didn’t perform the desired action the first time around). So, get to advertising! If this is your first time advertising within Facebook, you might notice too that you can create custom audiences in many different ways, including bulk uploading a list of email addresses. If any of those email addresses match those of any logged in Facebook user (or Instagram), they are eligible to be advertised to. Exciting stuff!