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.

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:

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:

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.

Let's implement these triggers according to the screenshots:

Entered Event name: addBetToBettingSlip

Entered Event name: slipBuy

Entered Event name: depositSuccess

Entered Event name: depositSuccess

Entered Event name: registrationFinished

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.

This tag will install the FB pixel. The custom HTML should contain this 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 -->

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

The custom HTML should contain this 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>

The custom HTML should contain this code:

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

The custom HTML should contain this code:

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

Do not forget to update currency field if it's different!!!

The custom HTML should contain this code:

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

Do not forget to update currency field if it's different!!!

The custom HTML should contain this code:

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

Do not forget to update currency field if it's different!!!