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 extension.
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 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>
If your are using Magento + Google Analytics, then you need Enhanced E-commerce for Google Tag Manager.
Whether you are integrating Bing, Facebook, SnapChat, Pinterest, or any other services our extension make it easy.
Minification is the process of removing all unnecessary characters and spacing from your source code without changing its functionality.