Facebook动态广告像素（AddToCart，购买）-Magento和Google跟踪代码管理器

Question

We currently using GTM for all our tracking codes.

To setup Facebook Dynamic ads and Facebook pixel, I need to collect events like AddToCart, Purchase etc.

<script>
fbq('track', 'Purchase', {
content_ids: ['1234', '4642', '35838'],
content_type: 'product'
value: 247.35,
currency: 'USD'
});
</script>

How to get Magento's SKUs and Cart value and pass to Facebook tracking code using Google Tag Manager?

Answer 1

For cart event , you can get the information using the following snippet code

<?php $quote = Mage::getSingleton('checkout/cart')->getQuote();
$productIds = "";
foreach($quote->getAllItems() as $item):
    if($item->getParentItemId()) continue;
    if (strlen($productIds)==0){
        $productIds = "'".$item->getSku()."'";
    }
    else{
        $productIds = $productIds.",'".$item->getSku()."'";
    }
endforeach;
$pixelTotal = $quote->getBaseGrandTotal();
$pixelCurrency = $quote->getQuoteCurrencyCode();?>

<script>
fbq('track', 'Cart', {
   content_ids: <?php echo $productIds;?>,
   content_type: 'product'
   value: <?php echo $pixelTotal;?>,
   currency: <?php echo $pixelCurrency;?>
});
</script>

For purchase event , you can get the information using the following snippet code

<?php $orderId = Mage::getSingleton('checkout/session')->getLastOrderId();
$order = Mage::getModel('sales/order')->load($orderId);
$productIds = "";
foreach($order->getAllItems() as $item):
    if($item->getParentItemId()) continue;
    if (strlen($productIds)==0){
        $productIds = "'".$item->getSku()."'";
    }
    else{
        $productIds = $productIds.",'".$item->getSku()."'";
    }
endforeach;
$pixelTotal = $order->getBaseGrandTotal();
$pixelCurrency = $order->getOrderCurrencyCode();?>

<script>
fbq('track', 'Purchase', {
   content_ids: <?php echo $productIds;?>,
   content_type: 'product'
   value: <?php echo $pixelTotal;?>,
   currency: <?php echo $pixelCurrency;?>
});
</script>

For Contact us event, use the following observer event controller_action_postdispatch_contacts_index_post

Config.xml

<controller_action_postdispatch_contacts_index_post>
                <observers>
                    <custom_module_contact_submit_after>
                        <type>singleton</type>
                        <class>custom_module/observer</class>
                        <method>ContactPost</method>
                    </custom_module_contact_submit_after>
                </observers>
</controller_action_postdispatch_contacts_index_post>

Observer.php

/**
  * Triggers on contact us form    
  * @return void|Varien_Event_Observer   
  */
  public function ContactPost() {
     Mage::getSingleton('core/session')->setContactPost('1');
  }

header.phtml

if (Mage::getSingleton('core/session')->getContactPost()==1){
    fbq('track', 'Lead');
}

For complete registration event, use the following observer event customer_register_success

Config.xml

<customer_register_success>
                <observers>
                    <custom_module_customer_register_success>
                        <type>singleton</type>
                        <class>custom_module/observer</class>
                        <method>CustomerRegister</method>
                    </custom_module_customer_register_success>
                </observers>
</customer_register_success>

Observer.php

/**
  * Triggers on contact us form    
  * @return void|Varien_Event_Observer   
  */
  public function CustomerRegister() {
     Mage::getSingleton('core/session')->setRegistered('1');
  }

header.phtml

if (Mage::getSingleton('core/session')->getRegistered()=="1"){
    fbq('track', 'CompleteRegistration');
}

For Checkout events (CheckoutInitiate and PaymentInfo) , you can add them on onepage.pthml

CheckoutInitiate can be done on the page load and PaymentInfo can be triggered on Payment.prototype.save function

If you are a Magento developer then above events can easily be implemented but if not then I would recommend to use the following third party modules -:

For Magento 1

https://www.scommerce-mage.com/magento-google-tag-manager-enhanced-ecommerce-tracking.html

For Magento 2

https://www.scommerce-mage.com/magento-2-google-tag-manager-enhanced-ecommerce-tracking.html

Answer 2

The best way to go about this is a combination of datalayer variables and one custom html tag. when the user clicks on the purchase button you push an event to the datalayer that has the information you need to pass along to facebook. something like datalayer.push({ event:'PURCHASE_BUTTON_CLICKED', PURCHASE_BUTTON_CLICKED: { ids:['1234', '4642', '35838'], type:'product, value: getTotalValue(), currency: 'USD' }) then inside GTM use one or several (i recommend several) different datalayer variables referencing different attributes of this datalayer object. you can use these variables in your custom html tag by wrapping them in double curly braces as shown in the image. all that is left is to add a trigger to the custom html tag.

try and feed as much as you can into the datalayer and gtm so that you can reuse all these variables to send off any number of tags.