One of our customers asked about adding Facebook Pixels to their Joomla site. The site had products that they were advertising with Facebook Ads. Once you connect Facebook Pixel to your site, you will be able to measure and optimize your Facebook advertising.
You can create such a connection without technical skills using the Shack Analytics extension. In this blog post, I'll show you how to do this.
What is Facebook Pixel?
Facebook Pixel is a code snippet from Facebook. Its goal is to help website owners who purchased Facebook Ads track and improve their Facebook Ads conversion.
You create a Facebook Ad to advertise products or services you offer in your Joomla-based site. You then add the Facebook Pixel code to your site. Facebook, in turn, starts tracking your Facebook Ads.
You view the tracking reports and optimize your ads for better performance.
A typical Facebook Pixel will look similar to the following:
<!-- 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',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1234567890123456');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=1234567890123456&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->The "Shack Analytics" Joomla extension will help you to connect your Facebook Pixel with your Joomla site.
Adding a Facebook Pixel to your Joomla site with Shack Analytics is a three-step process:
- Get your Facebook Pixel code from Facebook.
- Create a Shack Analytics tracking tag.
- Add this tracking tag to your Joomla site.
Let's take a look at this process in more detail.
Step #1. Copy your Facebook Pixel code
The goal of the first step is to create your Facebook pixel for your Joomla site and copy its code.
You start by logging into your Facebook account. In your account, you want to go to your Pixels tab in Events Manager. There you want to click "Create a Pixel" and follow the onscreen instructions.
Excellent! You created your Facebook pixel. Now is a good time to get its code.
Start by clicking the "Set Up Pixel" green button:
This will open up the "Connect Website Activity Using Pixel" box. In this box, you want to click "Manually add pixel code to website":
You will be taken to the "Install Pixel" screen with the JavaScript code snippet. Click within the box with code to copy it and close the box:
Excellent! You now have your Facebook Pixel code. In the next step, you will use this code to connect your Joomla site to your Facebook Pixel.
Step #2. Create a Shack Analytics tracking tag
"Shack Analytics" is the best Joomla extension to connect your Joomla site to Facebook Pixel. You can use this extension even if you know nothing about coding.
Firstly, open it up in your Joomla administrator panel by going to Components > Shack Analytics Pro:
This will bring you to the Shack Analytics: Tracking Tags administrative page. In the top left corner, you want to click New:
You will be taken to the Shack Analytics: New Tracking Tag screen. Here you want to add a title for your Facebook Pixel tracking tag. As you can see on the screenshot below, for the purpose of this tutorial, I called my tag "My Facebook Pixel Tag":
Now you want to locate the Header Custom Code box. Paste the Facebook Pixel code snippet you copied in Step #1 in this box:
Now would be a good time to click Save & Close.
Good job! At this point, you have a Shack Analytics tracking tag with your Facebook Pixel code. But this tag is not at work yet. In the next step, you will add this tracking tag to your Joomla site.
Step #3. Add the tag to your Joomla site
Still on the Shack Analytics: Tracking Tags page, you want to click on the Options button located in the top right corner:
This will bring you to the Shack Analytics: Configuration page. Under the Shack Analytics Pro tab, you want to click inside the Global Tracking Tag field and then - on your Facebook Pixel tracking tag:
Now you can finish the job by clicking Save & Close.
Visit your Joomla site frontend and check its HTML source code. You should see the Facebook Pixel code added into the header of its various pages:
Wonderful! You just added your Facebook Pixel tracking to your Joomla site.
What's Next?
Save $1,000's when you sign up to Joomlashack's Everything Club.
You will get access to all our 32 extensions, and legendary support!
Click here to join the Everything Club
About the author
