facebook-pixel-via-gtm-integration

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:

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.

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

The triggers we'll be implementing: Dom Ready, Add To Betting Slip, Bets (main wallet), Deposit, FTD, Registration.

The most important parts are:

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.

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

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: {{Currency}},
    external_id: {{user ID}},
    value: {{Amount}} 
  });
</script>

The custom HTML should contain this code:

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

The custom HTML should contain this code:

<script>
fbq("track", "Lead", {
  currency: {{Currency}},
  value: 0,
  external_id: {{user ID}},
});
</script>
  • facebook-pixel-via-gtm-integration.txt
  • Last modified: 2024/04/24 11:48
  • by evaldas-luksys