Facebook Pixel implementation: some references.


Implementation – Facebook Pixel

Cookie consent and GDPR

If you plan to serve European Union you will need to implement GDPR.

General Data Protection Regulation (GDPR) | Facebook for Business

Which means you will need to ask for user consent before tracking their activity on your website that involves personal data. Fortunately Facebook offers an API to pause Pixel from firing and fires once consent is granted:

fbq('consent', 'revoke');
fbq('consent', 'grant');

General Data Protection Regulation – Facebook Pixel

You can also use a tag manager for that purpose.

Tracking Events

Facebook Pixel API offers a wide range of standard events to track.


fbq('track', 'Purchase', {currency: "USD", value: 30.00});
fbq('track', 'AddToCart', {currency: "USD", value: 30.00});
fbq('track', 'PageView');

You will find the complete list of standard event here Reference – Facebook Pixel.

Custom Events

fbq('trackCustom', 'ShareDiscount', {promotion: 'share_discount_10%'});

Conversion Tracking – Facebook Pixel

Parameters and Object properties

In the examples above you may have notice that some code got additional information beside the event name.

{currency: "USD", value: 30.00}
{promotion: 'share_discount_10%'}

Those are optional parameters written as JSON-formatted objects and allow to include additional information to your events.

We have seen value parameters and promotion but you might want to add the category where the event took place

{content_category: "name_of_category"}

You can just as easily create custom parameters.

{custom_parameters: "some_value"}

or even more complex objects:

{contents: [
        id: '301',
        quantity: 1
        id: '401',
        quantity: 2

You will find more information on the link above where parameters are treated, plus you have some example above.

Add open graph meta to your virtuemart and joomla template.

Facebook usually does a good job at picking up all the required information from your web page but there is some instance where you might want to have better control on what image is displayed as thumbnails or have a customize description for Facebook sharing. In that case you will need to use facebook open graph.

List of basic properties: https://ogp.me/

  • og:title
  • og:type
  • og:image
  • og:url

The required meta properties for open graph are the following according to facebook Sharing Debugger :

  • og:url
  • og:type
  • og:title
  • og:image
  • og:description
  • fb:app_id


We will need to get the URL of the page currently displayed. Joomla doc gives us the solution here: https://docs.joomla.org/URLs_in_Joomla

In index.php simply add:

use Joomla\CMS\Uri\Uri;
$uri = Uri::getInstance();
$url = $uri->toString();

And within your <head> element:

<meta property="og:url" content="<?php echo $url; ?>"/> 


To get the current page title, Joomla documentation gives us again the answer: https://docs.joomla.org/Add_Static_Text_In_Title_Of_Page

$title = $this->getTitle();

and within the <head> element:

<meta property="og:title content="<?php echo $title; ?>"/>


Automated this task will be a bit more challenging as the URL of the image will change from page to page. For instance, images from home page, post and product and category pages won’t be called the same so you have to check the type of page you are displaying to call the right type of image.

For the home page, you can set the og:image content manually. You will need to check first if the user is currently viewing the front page:


$app = JFactory::getApplication(); 
$menu = $app->getMenu(); 
$lang = JFactory::getLanguage(); 
if ($menu->getActive() == $menu->getDefault($lang->getTag())) 
  echo 'This is the front page'; 
  echo 'Accueil'; 

It seems there is a bug in Facebook Open Graph for the image property in website requiring https. We speak about it here. On my side the issue is only present in messenger. Sharing a page as a post is working as expected.


The default is ‘website’ but there exists a ‘product’ type that can be of interest in product pages

<meta property="type" content="website" />

Facebook OpenGraph doesn’t diplay the image set into the og:image meta and pick another

Issue: Facebook OpenGraph doesn’t diplay the image set into the og:image meta and pick another one instead.

It seems to be an issue with https URL in open graph. There is a closed bug report in facebook without answer from facebook.


Some people in stackoverflow have found a work around.


Work around 1: upload all your picture in a non https domain and use these URL for your og:image content property.

Work around 2: use og:image:secure_url and use the facebook sharing debugger to lint your page. https://developers.facebook.com/tools/debug/ [Work around currently in test]

Check if a function is declared before using it in js

Issue: it may occurs that you have to call a function that is conditionally set. A frequent use case would be GDPR where you set your tracking script conditionally. You micht check the cookie for each event you track, but I think a better solution would be to track if the function is declared.


There are two different options:

Option 1:

This option will still return an error in case the function to evaluate is not defined.

function isFunction(TrackingScript) {
   TrackingScript ('button-click','cart',10);

Option 2:

if (typeof( TrackingScript ) === typeof(Function)){
       TrackingScript ('button-click','cart',10); 

Resizing social media picture : Form factor

Just a quick bookmark here: we probably all look here and there for the correct form factor for our facebook cover picture or profile pic, and then again for every over social media platform. Well, of course, someone has develop a tool to help us with that so here you go:  https://www.internetmarketingninjas.com/seo-tools/favicon-generator-crop-images/?fbclid=IwAR0mHj492vJRlm7BpKMhxwJgZbU41S6IHpPsvUQCPlqRlFQ7VEdvDkN-OXs

I have not checked that the form factor currently used on the site are up to date with the latest standard for each platform.