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

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 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 Transactional Emails

Get more from your order confirmation emails by promoting other complementary products.

DataLayer for Tag Manager

Whether you are integrating Bing, Facebook, SnapChat, Pinterest, or any other services our extension make it easy.

Enhanced Success Page

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