> For the complete documentation index, see [llms.txt](https://docs.2checkout.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.2checkout.com/analytics/analytics/implement-facebook-pixel-in-default-carts-through-google-tag-manager.md).

# Implement Facebook Pixel in Default Carts through Google Tag Manager

## A. Create a tag for Facebook Pixel Page View Initialization

Create this tag if you don’t already have a Facebook Pixel tag on your website that fires on all pages where you have the Google Tag Manager code.

{% stepper %}
{% step %}

### Create Page View tag

* Click to create a new tag.
* As Tag Type select **Custom HTML**. In the script below, under '{your-pixel-id-goes-here}' type your Facebook pixel ID. The script below is the Pixel Base Code and can be found in the [Facebook/Meta Pixel](https://developers.facebook.com/docs/meta-pixel/get-started/) documentation.

{% code title="Facebook Pixel Base Code" %}

```
```

{% endcode %}

```html
<!-- Facebook 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');
     fbq('init', '{your-pixel-id-goes-here}');
     fbq('track', 'PageView');
</script>
```

* As Triggering select **All Pages**.

![All Pages](/files/29fa28c4b1b0c3b52cc00cb4c7458e06482809a5)
{% endstep %}
{% endstepper %}

## B. Configure dataLayer variables in Google Tag Manager

Configure dataLayer variables in Google Tag Manager to further use them in the Facebook implementation.

2checkout shopping carts contain a dataLayer with eCommerce information on the Google Analytics 4 structure. You can view this by typing `dataLayer` into the browser console and under `gtag4` you can see the eCommerce information on Google Analytics 4 structure both at checkout and at purchase on the order Finish page.

![dataLayer variables](/files/fb674947cf5f729607bebc1ba1ffd5abf7c9996e)

{% stepper %}
{% step %}

### Configure dataLayer variables in Google Tag Manager

To capture the eCommerce information from the dataLayer, create the following User-Defined Variables in Google Tag Manager. For each variable:

* Click to create a new User-Defined Variable.
* As Variable Type select **Data Layer Variable**.
* Under Data Layer Variable Name use the name below.
* Under Data Layer Version select **Version 2**.

Create the following variables:

* Name: `gtag4.event` — Data Layer Variable Name: `gtag4.event`. ![User-Defined Variable](/files/18a8abe23d84f3644d0d6ff6a2b906e7a1dbc84c) ![variable configuration](/files/357d8af30b7f1bd331e9aa8680272892f8c0733a)
* Name: `gtag4.currency` — Data Layer Variable Name: `gtag4.currency`. ![variable gtag4.currency](/files/1a4e2ffc94dcec10ef12d31db1e65e8316369b9c)
* Name: `gtag4.items` — Data Layer Variable Name: `gtag4.items`. ![variable gtag4.items](/files/b86fbd8390d61f35ecbd34cb17eec27515e79da2)
* Name: `gtag4.tax` — Data Layer Variable Name: `gtag4.tax`. ![variable gtag4.tax](/files/7cc6ac2a71a69d7ef22442d494371fd5956c95c9)
* Name: `gtag4.transaction_id` — Data Layer Variable Name: `gtag4.transaction_id`. ![variable gtag4.transaction\_id](/files/0a9ff11945eb9da3fd037a8d052c8be2d7d01f94)
* Name: `gtag4.value` — Data Layer Variable Name: `gtag4.value` (captures total order value, including tax). ![variable gtag4.value](/files/a9dba6a4272ad48847d616350c69e32c0ce6d758)
  {% endstep %}
  {% endstepper %}

## C. Create a User-defined variable in Google Tag Manager for Facebook called FacebookEventsScript

{% stepper %}
{% step %}

### Create the FacebookEventsScript variable

1. Click on **New** to create a new user-defined-variable.

![FacebookEventsScript](/files/a6f122e8f36392460b37409c9f3033df31f074fa)

2. As Variable Type select **Custom JavaScript**.
3. In the Custom JavaScript section paste the code below. This code will capture product, transaction id and transaction value data, using the dataLayer variables previously created.

{% code title="FacebookEventsScript (Custom JavaScript variable)" %}

```
```

{% endcode %}

```javascript
function(){
     var attr = {};
     attr.currency = {{gtag4.currency}};
     attr.content_type = "product";
     var fbContents = [];
     var fbIds = [];
     var fbNames = [];
//function fbData
var fbData = function() {
       attr.num_items = {{gtag4.items}}.length;
       for(var i=0;i<{{gtag4.items}}.length;i++){
         fbContents.push({
          'id':{{gtag4.items}}[i].item_id,
          'name':{{gtag4.items}}[i].item_name,
          'quantity':{{gtag4.items}}[i].quantity
         });
        	fbIds.push({{gtag4.items}}[i].item_id);
         fbNames.push({{gtag4.items}}[i].item_name);
      	 }
       attr.contents = fbContents;
       attr.content_ids = fbIds;
       attr.content_name = fbNames;
   	};
if ({{gtag4.event}} === 'begin_checkout' && window.omniture_vars && window.omniture_vars.CART_PRODUCTS){
   	var checkoutValue=0;
   	var checkoutCartProducts = omniture_vars.CART_PRODUCTS;
   	for (var i=0; i<checkoutCartProducts.length;i++){
   	checkoutValue += Number(checkoutCartProducts[i].ProductTotalPriceWithTaxAndDiscount * checkoutCartProducts[i].ProductQuantity);
   	}
       checkoutValue = parseFloat(checkoutValue.toFixed(2))
       attr.value=checkoutValue;
   	fbData();
}
     if({{gtag4.event}} === 'purchase'){
      attr.value = {{gtag4.value}};
       fbData();
     }
     return attr;
}
```

{% endstep %}
{% endstepper %}

## D. Create a trigger specifically for the purchase event

Create a new trigger which is restricted only to the purchase event and name it **Purchase Event Only**.

{% stepper %}
{% step %}

### Configure Purchase Event trigger

* As Trigger Type select **Custom Event**.
* As Event name type **2checkout event**.
* For this trigger to fire on, select **Some Custom Events**.
* Add the condition that variable `gtag4.event` equals `purchase`.

![Purchase event only](/files/566780a6c770ae344f2b0ea3358b8a00a67719db)
{% endstep %}
{% endstepper %}

## E. Create a tag for the Facebook Pixel for the purchase event

{% stepper %}
{% step %}

### Create Facebook Purchase tag

1. Create a new tag (for example: Facebook Purchase).
2. As Tag Type select **Custom HTML**.
3. In the HTML section, paste the following code (this code will send product, transaction id and transaction value data to Meta when a purchase takes place).

{% code title="Facebook Purchase tag (Custom HTML)" %}

```
```

{% endcode %}

```html
<script>
     fbq('track', 'Purchase', {{FacebookEventsScript}}, {eventID: {{gtag4.transaction_id}}});
</script>
```

4. For Triggering, select the trigger restricted to the purchase event (Purchase Event Only).

![Create a tag for the Facebook Pixel for the purchase event](https://verifone.cloud/sites/default/files/inline-images/13.jpg)
{% endstep %}
{% endstepper %}

## Optional — send information with the Facebook Pixel at checkout if needed

Create a trigger specifically for the checkout event

{% stepper %}
{% step %}

### Create Checkout Event trigger

Create a new trigger named **Checkout Event Only**.

* As Trigger Type select **Custom Event**.
* As Event name type **2checkout event**.
* For this trigger to fire on, select **Some Custom Events**.
* Add the condition that variable `gtag4.event` equals `checkout`.

![Checkout Event Only.](/files/ab412d2d7e43731b0198fbe26de99340f9c423a8)
{% endstep %}

{% step %}

### Create Facebook Checkout tag

1. Create a new tag (for example: Facebook Checkout).
2. As Tag Type select **Custom HTML**.
3. In the HTML section, paste the following code:

{% code title="Facebook Checkout tag (Custom HTML)" %}

```
```

{% endcode %}

```html
<script>
     fbq('track', 'InitiateCheckout', {{FacebookEventsScript}});
</script>
```

4. For Triggering, select the trigger restricted to the checkout event (Checkout Event Only).

![Facebook Checkout.](/files/df43d75b591d2ff1e7bf57c79d63d7709b901a46)
{% endstep %}
{% endstepper %}

Privacy/consent note

The tags for Facebook Pixel need to be based on consent. Adjust the tags described above to condition them based on your method of collecting consent.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.2checkout.com/analytics/analytics/implement-facebook-pixel-in-default-carts-through-google-tag-manager.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.