How to Connect the Facebook Pixel to a Joomla Site with Shack Analytics

In your Joomla site, you may have some products or services. And you may wish to advertise them to the Facebook user base displaying Facebook Ads.

To do that you need to install Facebook Pixel in your Joomla site. In this document, you will learn how to do this with the Shack Analytics Joomla extension.


What is Facebook Pixel?

The 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 -->

Our Shack Analytics' tags help integrate your Facebook Pixel into your Joomla site.

You can integrate the Facebook Pixel in a few ways:

  • Sitewide: track the whole site.
  • Per Joomla article: track a certain Joomla article.
  • Per Joomla menu item: track a certain Joomla menu item.

 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 either to your Joomla site, or to its menu item, or to one or a few of its Joomla articles.

Let's take a look at this process in more detail.


Step #1. Create a Facebook Pixel

  • Log into your Facebook account.
  • Visit the Facebook Pixel portal and create a Facebook Pixel.
  • Copy this Facebook Pixel code.

Excellent! You now have your Facebook Pixel code. In the next step, you will feed this code to your Shack Analytics tracking tag.


Step #2. Create a Shack Analytics tracking tag

  • In your Joomla administrator panel, go to Components > Shack Analytics Pro:

go to components shack analytics pro

  • You will be taken to the Shack Analytics: Tracking Tags administrative page. In the top left corner, click New:

click new

  • You will see the Shack Analytics: New Tracking Tag page.
  • Add your tag title. For the purpose of this tutorial, I called my tag "My Facebook Pixel Tag":

enter the tag title

  • Locate the Header Custom Code parameter. Paste in its box the Facebook Pixel code you copied in Step #1.

facebook pixel code in the header custom code field 

  • Click Save & Close.

Great! You now have a Shack Analytics tracking tag to track your Facebook Ad performance. In the next step, you will add this tracking tag either to your whole Joomla site or to a required Joomla menu or to a required Joomla article.


Step #3. Add the Facebook Pixel tracking tag using one of the three available options


Option #1. To the whole Joomla site globally

  • Still on the  Shack Analytics: Tracking Tags page, click on the Options button located in the top right corner of the page:

click options

  • You will be taken to the Shack Analytics: Configuration page. Under the Shack Analytics Pro tab, click inside the Global Tracking Tag and then on your tracking tag: 

click on your tracking tag

  • Click 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 the whole Joomla site. 


Option #2. To a Joomla menu item

You may wish to add your Facebook Pixel tracking tag to a Joomla menu item.

  • Open the required menu item. 
  • Click the Shack Analytics Tag tab:

click the shack analytics tag tab

  • Click Select a Tracking Tag:

click select a tracking tag

  • In the drop-down list of tracking tags, select your tracking tag:

select your tracking tag

  • Click Save & Close.
  • Visit your site frontend and click this menu item. Check the source HTML code of the opened page. You should see the Facebook Pixel code added at the bottom. 

Good job! You just added your Facebook Pixel tracking tag to the required Joomla menu item.


Option #3. To a required Joomla article

  • Open up the required Joomla article for editing.
  • Click the Shack Analytics Tag tab:

click shack analytics tag tab 

 

  • Locate the Tracking Tag parameter.
  • Click Select a Tracking Tag.
  • In the drop-down list select your tracking tag:

select your tracking tag

  • Click Save or Save & Close.
  • Visit this article's frontend page.
  • Check its HTML source code. You should now see your Facebook Pixel code added into the footer.