Add facebook pixel code into magento 2

magento.stackexchange https://magento.stackexchange.com/questions/327897

  •  15-04-2021
  •  | 
  •  

문제

I'm using magento 2 and I'm trying to add the facebook pixel code into it , what's the right file to add it ?

도움이 되었습니까?

해결책

It has not changed much from Magento 1, I reckon you should use the app/code/Magento/Checkout/view/frontend/templates/success.phtml

NB: don't change that file directly as your changes will be overriden by Magento upgrades, override the template in your theme or module.

다른 팁

You need to create your own module to add facebook pixel tracking. Here are few links which could help you create your own module -:

http://www.magento.scommerce-mage.co.uk/create-module-in-magento-2.html http://devdocs.magento.com/guides/v2.1/extension-dev-guide/build/create_component.html

Once you have created your module then you can add checkout_onepage_success.xml file under \view\frontend\layout with the following content -:

<?xml version="1.0"?>
<!--
/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.success">
            <block class="CompanyName\ModuleName\Block\Checkout\Success" name="modulename.checkout.success" template="checkout/success.phtml"/>
        </referenceBlock>
    </body>
</page>

Then add success.phtml file under \view\frontend\templates\checkout with the following content -:

<?php
$order = $this->getOrder();
$pixelValue     = number_format($order->getBaseGrandTotal(),2);
$pixelCurrency  = $order->getOrderCurrencyCode();

<script>
fbq('track', 'Purchase', {
  value: <?php echo $pixelValue;?>,
  currency: '<?php echo $pixelCurrency;?>'
});
</script>

Then add success.php file under **\CompanyName\ModuleName\Block\Checkout** with the following content -:

<?php
/**
 * Copyright © 2015 Scommerce Mage. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile

namespace CompanyName\ModuleName\Block\Checkout;

/**
 * FB Page Block
 */
class Success extends \Magento\Framework\View\Element\Template
{
    /**
     * @var \Magento\Sales\Model\OrderFactory
     */
    protected $_salesFactory;

    /**
     * Checkout session
     *
     * @var \Magento\Checkout\Model\Session
     */
    protected $_checkoutSession;


    /**
     * @param \Magento\Framework\View\Element\Template\Context $context
     * @param \Magento\Sales\Model\OrderFactory $salesOrderFactory
     * @param \Magento\Checkout\Model\Session $checkoutSession
     */
    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        \Magento\Sales\Model\Order $salesOrderFactory,
        \Magento\Checkout\Model\Session $checkoutSession,
        array $data = []
    ) {
        $this->_salesFactory = $salesOrderFactory;
        $this->_checkoutSession = $checkoutSession;
        parent::__construct($context, $data);
    }


    /**
     * Retrieve current order
     *
     * @return \Magento\Sales\Model\Order\OrderFactory
     */
    public function getOrder()
    {
        $orderId = $this->_checkoutSession->getLastOrderId();
        return $this->_salesFactory->load($orderId);
    }
}

Hope the above information helps you set up facebook conversation tracking but if you are not a developer then you can buy the following extension.

https://www.scommerce-mage.co.uk/magento2-facebook-conversion-audience-tracking.html

It is the same as in version 1.0.

checkout/success.phtml

Use templates - Be ware any change can be overridden by an upgrade, hence don't change the file directly.

Look here as well: Install Facebook Pixel Tracking

There are 3 methods to add pixel code to your Magento 2 website:

Full reference for all methods can be found in this tutorial: https://magentip.com/add-facebook-pixel-magento-2/

Hope this helps!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 magento.stackexchange
scroll top