DataLayer for Google Tag Manager
How To Configure
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.
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>
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.
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>
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>
Add cross-sell, upsell, related products, social media links and other elements to your order confirmation.
If your are using Magento + Google Analytics, then you need Enhanced E-commerce for Google Tag Manager.
Minification is the process of removing all unnecessary characters and spacing from your source code without changing its functionality.