To track conversions to your blog from Facebook ads or post boosts, you need to install the Facebook Pixel. If you have never heard of the Facebook Pixel, you can read the quick summary directly from Facebook explaining how it works.

The problem is that the code they generate for users DOES NOT WORK directly on Blogger.

Installing the Facebook Pixel Tracking Code will give you an error that won’t allow you to save the code in your blogger template. Luckily there is a work around that will convert the code to something more Blogger friendly.

How to Install The Facebook Pixel into a Blogger Blog

Step 1: Create Facebook Pixel Base Code

Log into your Facebook Ads Manager and select Pixel from the drop down menu
Click on “Set Up Pixel” in the upper left

Creating Facebook Pixel for Blogger

If you don’t have a pixel already, your screen may look a little different, but you still select “Set up Pixel": How to set up facebook pixel

Choose “Copy and Paste the Code” as the method of installation from the pop up window.

Copy and paste code for facebook pixel

Step 2: Convert Base Code to make it Blogger Friendly

Select the entire code (found in section 1.2) and paste it into the conversion box found HERE.
(Open this page in a new window since we will need to go back to you Facebook Ad Manager a little later)

Click on Convert. Your code will look funny since all the javascript will be covered into a more ‘readable’ XML format for blogger. But that is okay. That is what we want!

Screen Shot 2017 04 30 at 3 55 44 PM

Step 3: Insert Base Code into your Blogger Template

Copy the converted code and open your theme HTML Dashboard >> Theme >> Edit HTML
(If you haven’t backed up your template.. now is when you want to do it! Before you paste in anything new!)

Click INSIDE the html window and press Command-F (for “Find”)

In the upper right corner a search box should appear. Type in </head>

When that is highlighted in your template, paste the converted code immediately BEFORE it.
Adding Facebook base code to Blogger template

Adding Facebook base code to Blogger template

You can hit "Save Theme" at this point. You shouldn’t get an error if you have inserted it correctly.

Step 4: Generate Event Code

We now need to go back to the Facebook Pixel generator and select what parameter we actually want to track using an Event Code. Click “Next” and Step 2 (Install Event Code) will appear.

Screen Shot 2017 04 30 at 4 02 50 PM

There are a lot of event triggers you can choose to track. The default is “search” which tracks when people use the search page. I wanted to just track ever single page view, so I chose “View Content”

Step 5: Insert Event Code into your Blogger Template

Copy the code in that box and install it on the page (or if you want it to track on every page) in the template where you want it to track. Paste it immediately AFTER the </head> section in your template.

So your final code will look like this:
Adding Facebook code to Blogger template

Adding Facebook code to Blogger template

There are a lot of other options for code placement and the Facebook Pixel installation tool is great at explaining where and what to install for those other options.

Step 6: Confirm your Pixel is Installed Correctly

It can take up to 20 minutes for your pixel to begin working. If you have it installed correctly, Facebook should notifiy you when it is active.

Successful pixel installation

If you check on the Pixel tracking page and it says “No information yet” it may mean that something is not working. Otherwise, you should start to see Pixel fires as soon as your site gets traffic.

Facebook Pixel Tracking info

Now you are good to go!

There is a lot of information you can collect via that pixel that can help with ad and audience targeting, however that is beyond the scope of this tutorial. I just wanted to get your pixel up and running on Blogger!
Custom pixel targeting

SiliconValleyTechie

Monday, March 5, 2018