DataLayer for Google Tag Manager
How To Configure
DataLayer for Google Tag Manager

Integrate Facebook Tracking Pixel with Google Tag Manager

Please Note: The settings below require our Datalayer for Google Tag Manager for Magento and some features also require our Enhanced Ecommerce or Google Analytics 4 extensions.

Product Page View
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : productPage

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    <!-- Facebook Pixel Code -->
    fbq('track', 'ViewContent', {
        content_name: product.getName(),
        content_category: product.getCategory(),
        content_ids: product.getProductSkus(),
        content_type: 'product',
        value: product.getPrice(),
        currency: product.getCurrencyCode()
    });
    <!-- End Facebook Pixel Code -->
});
</script>
Add To Cart
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : addToCart

HTML

<script>
require(['DataLayerProductApi'], function (dataLayerProductApi) {
    var product = dataLayerProductApi();
    
    <!-- Facebook Pixel Code -->    
	fbq('track', 'AddToCart', {
        content_category: product.getCategory(),
        contents: product.getFacebookAddedToCartItems(),
        content_type: 'product',
        value: product.getAddedToCartTotal(),
        currency: product.getCurrencyCode()
    });
    <!-- End Facebook Pixel Code -->
});
</script>

*Enhanced Ecommerce and/or Ga4 extension required for this functionality.

Initiate Checkout
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : checkoutPage

HTML

<script>
require(['DataLayerCheckoutApi'], function (dataLayerCheckoutApi) {
    var checkout = dataLayerCheckoutApi();
     
    <!-- Facebook Pixel Code -->
	fbq('track', 'InitiateCheckout', {
        contents: checkout.getFacebookItems(),
        content_type: 'product',
        currency: checkout.getCurrencyCode(),
        content_ids: checkout.getSkus(),
        value: checkout.getCartTotal(),
        num_items: checkout.getItemCount()
    });
    <!-- End Facebook Pixel Code -->
});
</script>
Purchase
Tag Configuration
  Tag type : Custom Html

Trigger Configuration
  Trigger: All Custom Events
  Event Name : purchase

HTML

<script>
require(['DataLayerPurchaseApi'], function (dataLayerPurchaseApi) {
    var purchase = dataLayerPurchaseApi();

    <!-- Facebook Pixel Code -->
	fbq('track', 'Purchase', {
        contents: purchase.getFacebookItems(),
        content_type: 'product',
        currency: purchase.getCurrencyCode(),
        value: purchase.getOrderTotal(),
        num_ids: purchase.getItemCount()
    });
    <!-- End Facebook Pixel Code -->
});
</script>
Related

Related Extensions

Get more from your Magento2 store!

Enhanced Success Page

Add cross-sell, upsell, related products, social media links and other elements to your order confirmation.

Magento Enhanced E-commerce

If your are using Magento + Google Analytics, then you need Enhanced E-commerce for Google Tag Manager.

HTML Minifier for Magento2

Minification is the process of removing all unnecessary characters and spacing from your source code without changing its functionality.