How to Install Facebook Pixel Code and Event Code on WordPress
Facebook Pixel is a very important thing, so it’s important to know how to install it. Somebody say I heard about it, but actually I am OK without it. Our client had another problem – he started learning video tutorials on Facebook promotion, and one of the first things he was told was – You need a Pixel. He wanted to install it, but he did not know how. Most likely, he is not alone. This post is intended for the people like him – we will show you how to set up and install an Facebook Pixel code and an event code on WordPress.
In fact, the case has two parts. The first is to get and install the general Pixel code, the second is to configure and set the event code provided by Facebook. The first part is simple; any minimally technical user can do it. But the second part is more complicated. And the Internet sources describe the process more for advanced users. In this post we will try to provide you with all details in simple way.
But first, what is a Pixel and what does it give? What are Facebook Pixel and events and what the difference between them is. If you’ll understand that it will be easier to you to install code and to work with it.
So, Pixel is a special Facebook tool that allows the platform to track visitors’ activity on your website. Using this data, you can optimize your campaigns. The most obvious thing is to create an audience and target it to everyone who visited your website. Facebook will track such a people through Pixel and can target your ads to them. A basic Pixel is enough for this.
But you can go even further and track people who have done some useful actions on your website. Bought something, signed up for something, got in touch with you, etc. And you can show your ads to this more interested people, or you can allow Facebook to search for people like them for you. You need to track these events and so you need to set up the event code.
I hope this is clear. You can read more about powerful Facebook Pixel features on their website. And we are going ahead – how to install Pixel on WordPress?
PART ONE – INSTALL A FACEBOOK PIXEL CODE
So, as I said, first you need basic Facebook Pixel code. This is easy. You just need to get the code and paste it on the website.
We go to Event Manager, click Create New Data Source – Facebook Pixel. Or you can use this direct link (in future interface could be changed, but I think you’ll can deal with this).
There will be three installation options to choose from hear. I’ll tell you how to manually add code to your site. Therefore, we choose this option.
Then click on the code field – code will be automatically copied to the clipboard.
Now you need to paste it on your website. I think you have minimal knowledge how to add a code to WordPress template files. I will not describe it in detail. If you need some more instructions, watch the video at the beginning of the post. There are basically several ways to install a third-party service code on a WordPress website. The simplest, but not too correct one is to edit the theme template in the admin panel. So, we go Appearance – Editor, select the header file, header.php, and put the copied code above the </head> tag.
Click Update File.
But… As you know, you can change active theme in future. Accordingly, the code will be disabled along with the old theme. A more correct way is to add it through the plugin. Changes made to the website through the plugins will nnot depend on the active theme. Therefore, we install Insert Headers and Footers plugin. It’s easy, if you don’t know how, watch the video again.
We activate the plugin. Go to Settings – Insert Headers and Footers and paste the Facebook Pixel code into the appropriate field.
Well done. Congrats!
PART TWO, MORE COMLICATED – INSTALL A FACEBOOK EVENT CODE
But, as I said, you can track some particular events – some page navigation, product purchases, confirming a forms, etc. This is more complicated part. First, we need to decide what event we are interested in. The system provides us with some standard events (9), but technically all of them could be one of two actions:
- Navigation to a specific page. The person goes to the contacts page. Or clicks on the “Submit Data” button and redirected to the “Thank You for Knowing” page. Or places an order and goes to the “Thank You for Your Purchase” page.
- Click or tab on a specific item. The person clicks an “Add to Cart” button. Or clicks on the “Call us” button and go to the phone app.
We will look at two major events of these types: Purchase and Contact. Actually all standard events are configured in the same way: either by loading the page or by a tracking built-in action – and we add the code either to a page or attach it to an element that people will click. Don’t be afraid – that sounds scary, but it will become clear!
So after we have installed the basic Pixel code, we click Next and we see that window.
We click the Manually add event code link and see the following. The system offers us some standard events.
Now we are interested in Purchase. We click on it and see…
Actually, the code is taken here. And, as I said, there are two options: Track Event on Page Load and Track Event on Inline Action. The first tab is the code you want to specify for the particular page. It work well for the Purchase – to add this code on Thanks page. The second tab is the code needed to be attached to an element (button). It work well for the Contact – to add this code to the “Call us” button.
There are also Parameters here, but this goes beyond the Installing Facebook Pixel Code on WordPress topic. This is an interesting topic, you can find some useful posts by yourself. And we click on the field below the parameters section and copy the code to the clipboard.
It should be added on a specific page (not template file). So we go to the page we are interested in and add this tag: 1) via classic WordPress editor – the Text tab; 2) via special WPBakery Page Builder block; or via new Gutenberg editor block. For example:
If we need to track the click “Call us” button, we go to the Contact event in the Facebook interface and open the Track Event on Inline Action tab. Here we can get the code to add to the element. It is a little more complicated.
In the second field we have the following code:
<button id = ”contactButton”> Contact </button>
<script type = ”text / javascript”>
document.getElementById (‘contactButton’). addEventListener (‘click’, function () {
insert_event_code_here ;
…
}, false);
</script>
The first row is intended to be added to an element. In two words, you create, for example, a button in WPBakery Page Builder and specify contactButton part in the Element ID field.
Or you can manually write all the code. That can be image elements, links, and more. But it is already for more technical users. And the part:
<script type = ”text / javascript”>
document.getElementById (‘contactButton’). addEventListener (‘click’, function () {
insert_event_code_here ;
…
}, false);
</script>
you add on the page as described in the previous section. Just replace insert_event_code_here ; with fbq (‘track’, ‘Contact’); And everything will look like:
<script type = ”text / javascript”>
document.getElementById (‘contactButton’). addEventListener (‘click’, function () {
fbq (‘track’, ‘Contact’);
}, false);
</script>
That’s all. Now you can test how the code works, and if it’s okay click Finish. You have successfully added the Facebook Pixel code and event code to your WordPress website. Congratulations. If you have any questions, please write in the comments section below and we will try to help you.