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.

Please note, javascript code snippets in the screenshots were added just for display purposes. The correct code snippets are next to the screenshots and these should be pasted in Google Tag Manager.

====== Custom variables ======

In some code snippets we use <code>{{variable name}}</code>These variables represent data sent from our app. For instance, when user adds bet to betting slip, **gtm-addBetToBettingSlip** event is sent with some data, e.g. event UUID, market and etc... So each <code>{{variable}}</code> created represents single piece of data, which then can be used in Tags.

For custom variable list please read Custom variables section.

====== 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.

For trigger list please read triggers section.

====== GTM Tags ======

==== Init ====

Set up screenshot below. 

{{:online:meta-pixel-fresh8:fb_pixel_init_tag.jpg|}}


Code snippet below. Please replace 'META PIXEL ID' with your Pixel ID.
<code>
<!-- 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 -->
</code>

==== Pageview ====

Implementation screenshot:

{{:online:meta-pixel-fresh8:fb_pixel_tag_pageview.jpg|}}

<code>
<script>fbq('track', 'PageView');</script>
</code>

==== View content ====

{{:online:meta-pixel-fresh8:fb_pixel_view_content_tag.jpg|}}

<code>
<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}}
        });
      })
       // When user uses ad blocker, request throws unhandled error. Catch prevents this. 
      .catch(function() {});
</script>
</code>

==== Add to cart ====

{{:online:meta-pixel-fresh8:fb_pixel_add_to_cart_tag.jpg|}}

<code>
<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>
</code>
==== Initiate checkout ====

<code>
<script>
  fbq("track", "InitiateCheckout", {
   step: 'registration_start'
  });
</script>
</code>

==== Lead ====

{{:online:meta-pixel-fresh8:fb_pixel_lead_tag.jpg|}}

Code snippet below. Please replace currency 'EUR' with your currency symbol.

<code>
<script>
fbq("track", "Lead", {
  currency: 'EUR',
  value: 0,
  external_id: {{user ID}},
});
</script>
</code>
==== Purchase ====

{{:online:meta-pixel-fresh8:fb_pixel_slip_buy_tag.jpg|}}

Please replace currency with your own.

<code>
<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: 'EUR',
        value: {{Amount}}
        });
      })
      // When user uses ad blocker, request throws unhandled error. Catch prevents this. 
      .catch(function() {});
</script>
</code>

==== Login ====

{{:online:meta-pixel-fresh8:fb_pixel_login.jpg|}}

<code>
<script>
fbq("trackCustom", "Login", { account: {{user ID}} });
</script>
</code>

==== Complete registration ====

{{:online:meta-pixel-fresh8:fb_pixel_complete_registration.jpg|}}

Please replace currency with your own.

<code>
<script>
  fbq("track", "CompleteRegistration", {
    currency: 'EUR',
    external_id: {{user ID}},
    value: {{Amount}} 
  });
</script>
</code>

==== Subscribe ====

{{:online:meta-pixel-fresh8:fb_pixel_subscribe_tag.jpg|}}

Please replace currency with your own.

<code>
<script>
  fbq("trackCustom", "Subscribe", {
    value: {{Amount}},
    currency: 'EUR',
    external_id: {{user ID}}
  });
</script>
</code>
====== Data Layer Variables ======
To create data variables:

{{:online:meta-pixel-fresh8:create_user_defined_variables.jpg|}}

==== {{Fresh8 operatorID}} ====
Do not forget to replace the value field with correct Operator ID.
{{:online:meta-pixel-fresh8:custom_variable_fresh8_operator_id.jpg|}}

==== {{Event UUIDS}} ====
{{:online:meta-pixel-fresh8:custom_variable_event_uuids.jpg|}}


==== {{Content name}} ====
{{:online:meta-pixel-fresh8:custom_variable_content_name.jpg|}}

==== {{selection}} ====
{{:online:meta-pixel-fresh8:custom_variable_selection.jpg|}}

==== {{market}} ====
{{:online:meta-pixel-fresh8:custom_variable_market.jpg|}}


==== {{user ID}} ====
{{:online:meta-pixel-fresh8:custom_variable_user_id.jpg|}}

==== {{Amount}} ====
{{:online:meta-pixel-fresh8:custom_variable_amount.jpg|}}

==== {{depositsCount}} ====
{{:online:meta-pixel-fresh8:custom_variable_deposits_count.jpg|}}

==== More information about other possible data layer variables can be found here ====
https://wiki.advbet.com/admin/online-platform-cms/google-events#events-and-their-data


====== Triggers ======

Bare in mind, that event names in the screenshots might be out of date. For up to date event names please visit this page: https://wiki.advbet.com/admin/online-platform-cms/google-events?s[]=google&s[]=tag&s[]=manager#events-and-their-data-gtm
==== Pageview ====

{{:online:meta-pixel-fresh8:pageview_trigger.jpg|}}

==== Initiate Checkout ====

{{:online:meta-pixel-fresh8:registration_init_trigger.jpg|}}

==== Registration finished ====

{{:online:meta-pixel-fresh8:registration_finished_trigger.jpg|}}

==== Purchase ====
{{:online:meta-pixel-fresh8:slip_buy_trigger.jpg|}}

==== Login ====
{{:online:meta-pixel-fresh8:login_trigger.jpg|}}

==== First deposit success ====

{{:online:meta-pixel-fresh8:first_deposit_success_trigger.jpg|}}

==== Subsequent deposit success ====

{{:online:meta-pixel-fresh8:subsequent_deposit_success_trigger.jpg|}}

==== Add to slip event ====

{{:online:meta-pixel-fresh8:add_to_slip_trigger.jpg|}}