About

Facebook Pixel integration for Opencart

This Opencart extension will allow you to integrate the Facebook Pixel in your Opencart webshop(s), to track the revenue gained from Facebook ad campaigns. This extension will track the default events: ViewContent, AddToCart, Purchase, Search, AddToWishlist, InitiateCheckout, CompleteRegistration.

The conversion events will be reported to Facebook with parameters 'value', 'currency', 'content_ids' (= product ID), 'content_name' (= product name), 'num_items' (for the Purchase and InitiateCheckout events).

Get the extension from the Opencart Extensions Directory

Installation

Installing the Facebook Pixel integration

Installation of this extension is very simple. There are two ways you can install the module.

• vQmod installation

Download the 'vQmod' version from the Opencart Extension platform. Next, make sure you have vQmod v2.5.1 installed.

Upload the 'fb_conversionpixel.xml' file to the /vqmod/xml/ folder on your webhost.
Done!

• With the Extension Installer (OC v2.x.x.x)

Download the .ocmod.xml file from the Opencart Extension platform and upload it with the built-in Extension Installer. Next, navigate to Extensions >> Modifications and refresh the modifications cache by clicking the button. Done!

OCMOD installation on OC versions lower than v2.2

By default, the database field where Opencart stores the modification files is limited in size. This extension (from v2.0.7) is too big to be stored in the database field, and will be cropped. The cropping will result in failure to refresh the modification cache with PHP warning:

PHP Warning: DOMDocument::loadXML(): CData section not finished <\script type="text/javascript">$ in Entity, line: 1413 in /Applications/MAMP/htdocs/oc_2020/admin/controller/extension/modification.php on line 139 2016-01-19 18:44:44 - PHP Warning: DOMDocument::loadXML(): Premature end of data in tag add line 1352 in Entity, line: 1413 in /Applications/MAMP/htdocs/oc_2020/admin/controller/extension/modification.php on line 139

Remove the extension from the modification list and refresh the modification cache to fully remove the OCMOD extension from your system. Now copy the fb_conversion_pixel.ocmod.xml file in root of the /system folder, then refresh the modification cache. This will install the OCMOD extension but this method doesn't have the file size limitation.

To store bigger modification files, you need to edit the database table "oc_modifications" -> change the 'xml' field type from 'TEXT' to 'MEDIUMTEXT'. Or you can run this SQL command in PHPMyAdmin:

ALTER TABLE `oc_modification` CHANGE `xml` `xml`MEDIUMTEXT CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL; (change the database prefix according to your DB_PREFIX).


If you don't do this, the OCMOD extension will not work and refreshing the modification cache will fail consistently. Using the vQmod version doesn't require any workarounds.

Tracking AddToCart and AddToWishlist conversions

To enable 'AddToCart' and 'AddToWishlist' events you have to manually edit the common.js file. (Both vQmod and OCMOD don't modify .js files)
From the root of your installation, navigate to the catalog > view > javascript folder and open the common.js file in a plain text-editor (eg. Notepad).

Depending on the version of Opencart you are using, modify the file accordingly (create a backup copy of the original file first!)

Default theme

OC 1.5.x.x:

Find this line:
$('#cart-total').html(json['total']);
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToCart', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }
Next, find this line:
$('#wishlist-total').html(json['total']);
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToWishlist', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }
Next, save the file.

---

OC 2.x.x.x:

Find the first occurence of this line:
$('html, body').animate({ scrollTop: 0 }, 'slow');
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToCart', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }

Next, find the second occurence of this line:
$('html, body').animate({ scrollTop: 0 }, 'slow');
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToWishlist', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }

Now save the file.

Journal2 theme

From the root of your installation, navigate to the catalog > view > theme > journal2 > js folder and open the journal.js file in a plain text-editor (eg. Notepad).





OC1.5.x.x

Find last occurence of this line line: (in function AddToCart)
$('#cart-total').html(json['total']);
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToCart', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }
Next, find second occurence of this line: (in function AddToWishlist)
$('.wishlist-total .product-count').html(json['total'].match(/\(\d+\)/g)[0].replace('(', '').replace(')', ''));
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToWishlist', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }


---

OC2.x.x.x

Find the first occurence of this line line:
$('#cart ul').load('index.php?route=common/cart/info ul li');
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToCart', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }
Next, find the first occurence of this line:
$('.wishlist-total .product-count').html(json['total'].match(/\(\d+\)/g)[0].replace('(', '').replace(')', ''));
Insert this code below:
if(json['product_id']) { fbq(['track', 'AddToWishlist', { 'value' : '' + json['pixel_value'] + '', 'currency': '' + json['pixel_currency'] + '', content_ids: ['' + json['product_id'] + ''], content_type: 'product', content_name: ''+ json['product_name'] +'' , product_catalog_id:'' + json['product_catalog_id'] + ''}]); }

Now save the file.

Now start configuration of your conversion pixel(s).

Configuration

Facebook Pixel Implementation Guide

Navigate to Facebook Help Center - Facebook Implementation Guide and read the documentation.

The Facebook Pixel ID is the same id as its predecessor, the Custom Audience Pixel. In case you haven't created a Custom Audience Pixel previously, follow these guidelines to create a Facebook Pixel ID:

1. Go to your Facebook Pixel tab in Ads Mananger.
2. Click Create a Pixel.
3. Enter a name for your pixel. There's only one pixel per ad account, so choose a name that represents your business.
4. Make sure you've checked the box to accept the terms.
5. Click Create Pixel.

In the backend of your webshop navigate to System/Settings and click the 'Edit' button next to the webshop where you want to implement a Facebook Pixel.

Under the 'Facebook Pixel(s)' tab, paste the Facebook Pixel ID in the designated input field.

To learn how to fully benefit from this Facebook feature visit the Facebook Help Center - Audiences section

Facebook Product Catalog

To run Dynamic Product Ads (DPA) campaigns, you will have to upload your product catalog to the Facebook Business Manager.

Configuring Facebook Conversion Pixels

The conversion tracking pixels will be removed in the second half of 2016, and replaced by the Facebook Pixel (former Custom Audience Pixel).

Navigate to the Facebook Ads Manager and select 'Conversion Tracking'.
Click on the Create Pixel button in the upper right corner of the screen, a popup window will appear.
Choose an appropriate category from the dropdown and name your pixel. It is good practice to include the webshop url/name and campaign name in the pixel name eg. Yourwebshop.url - Campaign
Confirm by clicking 'Create Pixel'.

Next, a popup window 'View Pixel Code' will appear. You can close this window and return to the Conversion Tracking pixel overview.

×Close

Select and copy (Ctrl-V) your pixel ID

Close

In the backend of your webshop navigate to System/Settings and click the 'Edit' button next to the webshop where you want to integrate your conversion pixel. Under the 'Facebook Pixel(s)' tab create a pixel by clicking on 'Add Conversion Pixel'.

Paste in the pixel ID and select the appropriate Conversion Pixel Category for the pixel:

• Checkouts:

  A second dropdown will appear where you can choose between the default checkout/success page or a custom checkout/success page (eg. checkout/custom_success). For the default success page both Path and Value will be automatically set to the correct setting. The input fields are read-only, user input is disabled. For custom success pages, the Path should be set to the corresponding path, usually similar to checkout/custom_success_page where you replace the custom_success_page with the actual value to reach the custom page. The Value will be automatically set to match the order total.

• Registrations:

  A second dropdown will appear where you can choose between new customer registrations or new affiliate registrations. The Path field will be set according to the select option. The Value field can be used to input a value for the conversion.

• Leads:

  The Path can be set to any page where a conversion pixel should be displayed. Set Path to the seo keyword of the page. The Value field can be used to input a value for the conversion.

• Key Page Views:

  A second dropdown will appear where you can choose between 'Product Page', 'Category Page', 'Manufacturer Page' & 'Information Page'. In the Path field you can then search for the product, category, manufacturer or information page you want to display a conversion pixel on. Type in at least three characters and autocomplete will suggest possible matches. Select the desired page and optionally set the Value field to hold a value for the conversion.

• Adds To Cart:

  Both Path and Value will be automatically set to the correct setting. The input fields are read-only, user input is disabled. In the conversion pixel, the added product's price will be set as pixel value.

• Other:

  The Path can be set to any page where a conversion pixel should be displayed. Set Path to the seo keyword of the page. The Value field can be used to input a value for the conversion. Useful for displaying a conversion pixel on the homepage.
  To display a facebook conversion pixel on the homepage (eg. yourstore.com) set Category to 'Other' and Path to 'home' and make a duplicate with Path set to 'common/home'.
  To track conversions on other pages, there is a different approach depending on whether SEO URL's is enabled or not:
  • Example 1 - SEO URL's disabled:
    • Your URL's look similar to yourwebshop.com/index.php?route=product/manufacturer/info&manufacturer_id=5
    • Set Path to the portion following the ?route=, for the above url this would be product/manufacturer/info&manufacturer_id=5
  • Example 2 - SEO URL's enabled:
    • Your URL's look similar to yourwebshop.com/seokeyword
    • Set Path to seokeyword

Finally, in the Status column it is possible to enable/disable the conversion pixel.

Click Save when you are finished configuring the pixel(s).

For easy troubleshooting it is recommended to use the Facebook Pixel Helper (for Chrome).

Support

No support is provided for this extension.