![How-to-Install-the-Facebook-Tracking-Pixel-On-Blogger-Blogs.jpg How to Install the Facebook Tracking Pixel On Blogger Blogs](https://lh3.googleusercontent.com/-OOe5Z2sOJ0U/WQZ0gryKY8I/AAAAAAABkaM/QwSfYUKg_DEb7yj65gK9wFSbI-eJW4OogCHM/How-to-Install-the-Facebook-Tracking-Pixel-On-Blogger-Blogs.jpg?imgmax=1600)
If you are on Facebook and are interested in tracking conversions to your blog from ads or post boosts, you are going to want 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 all you to save the code in your 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 menuClick on “Set Up Pixel” in the upper left
![Creating-Facebook-Pixel-for-Blogger.jpg Creating Facebook Pixel for Blogger](https://lh3.googleusercontent.com/-tTjww9ZC8WY/WQZ0dVjcAFI/AAAAAAABkZk/aA-P9RdY4lMTvuNGH5GMESHSzMHOFoZvgCHM/Creating-Facebook-Pixel-for-Blogger.jpg?imgmax=1600)
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.jpg How to set up facebook pixel](https://lh3.googleusercontent.com/-8OAgJq1_QEs/WQZ0d2-vdII/AAAAAAABkZs/qfd1VjWO2LQ_WaS9RjI81JEPUtNmaBMcACHM/How-to-set-up-facebook-pixel.jpg?imgmax=1600)
Choose “Copy and Paste the Code” as the method of installation from the pop up window.
![Copy-and-paste-code-for-facebook-pixel.jpg Copy and paste code for facebook pixel](https://lh3.googleusercontent.com/-nyyAlAAmXqA/WQZ0c0SyrAI/AAAAAAABkZg/dcqBpVgHFiM6oedzysOIKX3vB-QB1IySgCHM/Copy-and-paste-code-for-facebook-pixel.jpg?imgmax=1600)
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.png Screen Shot 2017 04 30 at 3 55 44 PM](https://lh3.googleusercontent.com/-SLmzQc_8Bn4/WQZ0elQomyI/AAAAAAABkZ0/t9NFbwIGI-09M4SE4VccxsVAl352wyUlgCHM/Screen%2BShot%2B2017-04-30%2Bat%2B3.55.44%2BPM.png?imgmax=1600)
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.jpg Adding Facebook base code to Blogger template](https://lh3.googleusercontent.com/-8kL_bt8t6NA/WQZ0fp7KSGI/AAAAAAABkaA/OCGmbE0tJQM9AkPI90kKlX_xx0nD2P9eACHM/Adding-Facebook-base-code-to-Blogger-template.jpg?imgmax=1600)
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
![Screen Shot 2017-04-30 at 4.02.50 PM.png Screen Shot 2017 04 30 at 4 02 50 PM](https://lh3.googleusercontent.com/-u8ITjoTKrrU/WQZ0fBTzIaI/AAAAAAABkZ8/HbBV_so1P7QKuKK5zL5SXJWpedWtNgsbgCHM/Screen%2BShot%2B2017-04-30%2Bat%2B4.02.50%2BPM.png?imgmax=1600)
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
So your final code will look like this:
![Adding-Facebook-code-to-Blogger-template.jpg Adding Facebook code to Blogger template](https://lh3.googleusercontent.com/-1g83P2q0g5c/WQZ0cWw1PXI/AAAAAAABkZc/ofoQbfSeGOo4YCo0uc_JwwtbQ-ayan5swCHM/Adding-Facebook-code-to-Blogger-template.jpg?imgmax=1600)
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
![Successful-pixel-installation.jpg Successful pixel installation](https://lh3.googleusercontent.com/-WzPs4uuoHag/WQZ0f7FsAcI/AAAAAAABkaE/1oGK-AHK0SMNPmM8h8yC2ADpBfQstiFIACHM/Successful-pixel-installation.jpg?imgmax=1600)
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.jpg Facebook Pixel Tracking info](https://lh3.googleusercontent.com/-rXymqMyer74/WQZ0dov0yKI/AAAAAAABkZo/dv6MZ_CheMc_du8pb-HFfDRqdcW5ma-igCHM/Facebook-Pixel-Tracking-info.jpg?imgmax=1600)
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.png Custom pixel targeting](https://lh3.googleusercontent.com/-YMZ-0xYbUyc/WQZ0gJJ8cqI/AAAAAAABkaI/VQ2wQ9b4GDsiWjM3lXg_kT7GLH25gnxOACHM/custom%2Bpixel%2Btargeting.png?imgmax=1600)
No comments:
Post a Comment