How to Add Facebook Pixel to Liferay [Easy Guide]

You can easily install Facebook’s remarketing/retargeting pixel in Liferay.

In this article, we will show you how to install Facebook remarketing/retargeting pixel in Liferay.

What is Facebook Pixel?

When you visit a website, you start seeing their ads on Facebook? This is called retargeting.

Its like Google Analytics code which give information about user location, device information and in Facebook case its provides detailed information about user behaviour.

This allows Facebook to retarget users visiting your website on Facebook.

Step 1: Get Facebook Pixel Code

Assuming you already have the Facebook Ad account and you have the Pixel code.

You can follow official guide for Facebook Pixel

<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', 'XXXXXX');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXX&ev=PageView&noscript=1"
/></noscript>

Step 2: Add Facebook Pixel code using Theme

If you want only basic integration of the Facebook remarketing and code available on every pages of Liferay instance you can add Pixel code in theme.

In your theme edit theme template.

theme-name/src/templates/portal_normal.ftl

Add pixel code before closing of the head tag.

Once theme is updated and deployed, Facebook Pixel will be available on all the pages.

Note: If you change the theme or use custom theme for some public pages. Facebook Pixel will not fire on that Liferay page.