In this tutorial we will use the InPlayer Paywall Events to setup different types of tracking integrating Facebook Pixel code, Google Analythics and Instragram tracking code.
In the following section we will explain what needs to be done to develop custom tracking with Facebook Pixel.
The Facebook pixel is code that you place on your website. It collects data that helps you track conversions from Facebook ads, optimize ads, build targeted audiences for future ads, and remarket to people who have already taken some kind of action on your website.
Before you start tracking purchases with the paywall you will need the standard PageView pixel code installed on your website. The base pixel code contains your pixel's ID in two places and looks like this:
Although its recommended adding the pixel directly to your website's
<head> tags, the pixel will work in most tag management and tag container solutions.
Once having the standard pixel code installed on your website, you can track specific events like purchases. All standard events are tracked by calling the pixel's fbq('track') function, with the event name, and (optionally) a JSON object as its parameters. For example, here's a function call to track when a visitor has completed a purchase event, with currency and value included as a parameter:
In order to connect the facebook purchase pixel code with the InPlayer Paywall you need to combine that code with the Paywall Events. For example:
The complete html code for basic usage of the Paywall embed code and the Facebook Pixel Code for tracking purchases would be:
As shown in the example from abobe the Paywall
onPayment event is used to pass the pixel event code each time a succesfull purchases from the InPlayer Paywall is made.
Aditionaly you can use the data from the Paywall event to send dynamic details to the Pixel Code:
Similar as the Pixel Purchase event there is apropriate code for tracking registered users. The Facebook completeRegistration event can be conntected to the InPlayer Paywall as well. The Pixel Code alone looks like the following:
The same Pixel Code can be wrapped into the
onRegister Paywall Event: