This is an old revision of the document!
This is an example of Meta pixel and Fresh8 integration based on the following example https://docs.google.com/document/d/1rpbE_3YGjyUF8lcjLsNc-NLFPVGE5emzock1glXy8Wc/edit#heading=h.p0jnzxwfmugg.
Bare in mind, all integration is done via Google Tag Manager.
When integrating Facebook pixel, there are a couple required events that need to be set up:
- Init
- Pageview
Other events are optional, but the more are added, the better result can be achieved.
Custom variables
In some code snippets we use
{{variable name}}
These variables represent data sent from our app. For instance, when user adds bet to betting slip, addBetToBettingSlip event is sent with some data, e.g. event UUID, market and etc… So each
{{variable}}
created represents single piece of data, which then can be used in Tags.
Triggers
Some of the Tags are using triggers. Trigger is basically and event sent from our app. We need to create a trigger for each event, and then those triggers are assigned to Tags.
GTM Tags
Init
Set up screenshot below.
Code snippet below. Please replace 'META PIXEL ID' with your Pixel ID.
<!-- Meta Pixel Code --> <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'); // Line to enable Manual Only mode. fbq('set', 'autoConfig', false, 'META PIXEL ID'); // FB init fbq('init', 'META PIXEL ID'); </script> <!-- End Meta Pixel Code -->
Pageview
View content
<script type='text/javascript'> var operatorID = {{Fresh8 operatorID}} var eventIDS = {{Event UUIDS}} var url = 'https://pixel.fresh8.co/' + operatorID + '/' + eventIDS[0] + '?type=ViewContent' var ids = new Request(url); fetch(ids).then(function(res) { return res.json(); }).then(function(data) { fbq('track', 'ViewContent', { content_type: 'product', content_ids: data, content_name: {{Content name}} }); }); </script>
Add to cart
<script type='text/javascript'> <script type='text/javascript'> var operatorID = {{Fresh8 operatorID}} var eventIDS = {{Event UUIDS}} var url = 'https://pixel.fresh8.co/' + operatorID + '/' + eventIDS[0] + '?type=AddToCart' var selection = {{selection}} var market = {{market}} var ids = new Request(url); fetch(ids) .then(function(res) { return res.json(); }) .then(function(data) { fbq( 'track', 'AddToCart', { content_name: {{Content name}}, content_ids: data, content_type: 'product', contents: [{'id': selection + '|' + market, 'quantity': 1}]} ); // When user uses ad blocker, request throws unhandled error. Catch prevents this. }).catch(function() {}); </script> </script>
Initiate checkout
<script> fbq("track", "InitiateCheckout", { step: 'registration_start' }); </script>
Lead
<script> fbq("track", "Lead", { currency: {{Currency}}, value: 0, external_id: {{user ID}}, }); </script>
Purchase
<script type='text/javascript'> var operatorID = {{Fresh8 operatorID}} var eventIDSCollection = {{Event UUIDS}} var eventIDSAsString = eventIDSCollection.join(','); var url = 'https://pixel.fresh8.co/' + operatorID + '/' + eventIDSAsString + '?type=Purchase' var ids = new Request(url); fetch(ids).then(function(res) { return res.json(); }).then(function(data) { fbq('track', 'purchase', { content_type: 'product', content_ids: data, currency: {{Currency}}, value: {{Amount}} }); }); </script>
Login
Complete registration
<script> fbq("track", "CompleteRegistration", { currency: {{Currency}}, external_id: {{user ID}}, value: {{Amount}} }); </script>
Subscribe
<script> fbq("trackCustom", "Subscribe", { value: {{Amount}}, currency: {{Currency}}, external_id: {{user ID}} }); </script>