Social Media – Seobytes

Facebook Pixel implementation: some references.

Implementation

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.

Examples:

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

og:url

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; ?>"/>

og:title

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

<?php
$title = $this->getTitle();
?>

and within the <head> element:

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

og:image

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:

https://docs.joomla.org/How_to_determine_if_the_user_is_viewing_the_front_page

<?php 
$app = JFactory::getApplication(); 
$menu = $app->getMenu(); 
$lang = JFactory::getLanguage(); 
if ($menu->getActive() == $menu->getDefault($lang->getTag())) 
 { 
  echo 'This is the front page'; 
 } 
else 
 { 
  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.

og:type

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

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

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.

Solution:

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); 
}