====== Description ======

In this example we'll need to set up GTM custom variables, triggers and tags. This will allow us submitting the required data to FB pixel.

Bare in mind, this is an example of the FB pixel set up and your final set up might differ.

===== Custom variables =====
We will be creating these custom variables: User ID, Amount, Wallet type, Event UUIDS, Selection, Market, Content name, Deposits count.

As an example, we'll be creating User ID custom variable. Let's visit Variables section in the GTM and click to create a new variable. The final result for the User ID variable should look like this:

{{:online:gtm:facebook-pixel:user_id_variable.jpg|}}

In this case we:
  * Named the new variable as **User ID**
  * Chose the Variable type to be **Data Layer Variable**
  * Data Layer Variable Name is **userID**

The most important part here is the Data Layer Variable Name, since this piece of data will be coming from our app and so we need to enter this key correctly.

Other variables should be created using the same principle:

^ Variable name ^ Data Layer Variable Name ^
| Amount         | amount         |
| Wallet type    | walletType     |
| Event UUIDS    | eventUUIDS     |
| Selection      | selection      |
| Market         | market         |
| Content name   | contentName    |
| Deposits count | depositsCount  |


----


Additionally, we need to create a constant variable for the currency.

{{:online:gtm:facebook-pixel:currency_variable.jpg|}}

This variable will be used to send your currency to FB pixel with some events. Please make sure to replace 'EUR' currency with your own.

Supported currencies can be found here: https://developers.facebook.com/docs/marketing-api/currencies
===== Triggers =====
The triggers we'll be implementing: Dom Ready, Add To Betting Slip, Bets (main wallet), Deposit, FTD, Registration.

The most important parts are:
  * Event names (e.g. depositSuccess, registrationFinished, ...)
  * Correctly added previously created variables and their value comparisons, e.g. FTD trigger.
  * Event names might have slightly changed, so please check for the up to date documentation - https://wiki.advbet.com/admin/online-platform-cms/google-events?s[]=gtm&s[]=events#events-and-their-data-gtm.

Let's implement these triggers according to the screenshots:

==== DOM ready ====

{{:online:gtm:facebook-pixel:trigger_dom_ready.jpg|}}

==== Add To Betting Slip ====

{{:online:gtm:facebook-pixel:trigger_add_to_betting_slip.jpg|}}

Entered Event name: addBetToBettingSlip

====  Bets (main wallet) ====

{{:online:gtm:facebook-pixel:trigger_bets_main_wallet.jpg|}}

Entered Event name: slipBuy

====  Deposit ====

{{:online:gtm:facebook-pixel:trigger_deposit.jpg|}}

Entered Event name: depositSuccess

====  FTD (First Time Deposit) ====

{{:online:gtm:facebook-pixel:trigger_ftd.jpg|}}

Entered Event name: depositSuccess

====  Registration ====

{{:online:gtm:facebook-pixel:trigger_registration.jpg|}}

Entered Event name: registrationFinished

===== Tags =====

We will be implementing these tags: Install FB Pixel, Add To Betting Slip, Bet (Main), First Deposit, 2nd Deposit, Reg-Complete. The responsibility of these tags is to send data to FB pixel.

Please make sure to use the same settings for tags when implementing, otherwise the FB pixel might not properly work.

**When adding scripts to tags, please do not use ones from the screenshots as they might not be correct. Please copy the correct code snippets from the below screenshots (code blocks).**

==== Install FB Pixel ====

{{:online:gtm:facebook-pixel:tag_install_fb_pixel.jpg|}}

This tag will install the FB pixel. The custom HTML should contain this code:

<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');
// FB init
fbq('init', 'xxxxxxxxxxxx');
</script>
<!-- End Meta Pixel Code -->
</code>

**Please do not forget to update xxxxxxxxxxxx part in this code with your own FB pixel tracking code!!!**

==== Add To Betting Slip ====

{{:online:gtm:facebook-pixel:tag_add_to_betting_slip.jpg|}}

The custom HTML should contain this code:

<code>
<script>
  var eventIDS = {{Event UUIDS}};
  var selection = {{selection}};
  var market = {{market}};
  fbq(
    'track',
    'AddToCart',
    {
    content_name: {{Content name}},
    content_ids: eventIDS[0],
    content_type: 'product',
    contents: [{'id': selection + '|' + market, 'quantity': 1}]}
  );
</script>
</code>

==== Bet (Main) ====

{{:online:gtm:facebook-pixel:tag_bet_main.jpg|}}

The custom HTML should contain this code:

<code>
<script type="text/javascript">
    fbq("trackCustom", "MainPurchase", {
        type: "purchase",
        value: {{Amount}},
        wallet_type: {{walletType}}
    });
</script>
</code>



==== First Deposit ====

{{:online:gtm:facebook-pixel:tag_first_deposit.jpg|}}

The custom HTML should contain this code:

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

==== 2nd Deposit ====

{{:online:gtm:facebook-pixel:tag_2nd_deposit.jpg|}}

The custom HTML should contain this code:

<code>
<script>
  fbq("trackCustom", "Subscribe", {
    value: {{Amount}},
    currency: {{Currency}},
    external_id: {{user ID}}
  });
</script>
</code>

==== Reg-Complete ====

{{:online:gtm:facebook-pixel:tag_reg_complete.jpg|}}

The custom HTML should contain this code:

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