Connect Facebook Pixel to a Joomla Site with Shack Analytics

Connect Facebook Pixel to a Joomla Site with Shack Analytics

One of our customers asked about how to connect Facebook Pixel 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 -->
@lt;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:

  1. Get your Facebook Pixel code from Facebook.
  2. Create a Shack Analytics tracking tag.
  3. 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 base code

The goal of the first step is to create your Facebook pixel for your Joomla site and copy its base 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:

click set up pixel

This will open up the "Connect Website Activity Using Pixel" box. In this box, you want to click "Manually add pixel code to website":

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:

click on the code to copy it

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:

go 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:

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":

enter the tag title

Now you want to locate the Header Custom Code box. Paste the Facebook Pixel code snippet you copied in Step #1 in this box:

facebook pixel code in the header custom code field 

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 Facebook Pixel tracking 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:

click options

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: 

click on your 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:

facebook pixel code in the html header

Wonderful! You just added your Facebook Pixel tracking to your Joomla site. 


What's Next?

Save $1000's when you sign up to Joomlashack's Everything Club.

You will get access to all our 31 extensions, templates, and Joomla training.

  Click here to join the Everything Club

 


About the author

Alex is a self-taught Microsoft Certified Professional based in England. He enjoys learning Joomla and helping beginners and web site administrators make the most of it.