Dinamični remarketing na FB: Kako implementirati pixel v Magento - Optiweb

Svet in splet sta polna zanimivih novic. Za vas izberemo tiste, ki so najbolj zanimive na našem področju.

Dinamični remarketing na FB: Kako implementirati pixel v Magento

Objavljeno: 1.2.2017
Kategorija: Magento

implementacija_facebook_pixel

V tem članku bomo podrobneje pogledali, kako implementirati Facebook Pixel za Facebook dinamične oglase v platformo Magento.  

Kaj je Facebook Pixel?

Facebook Pixel je JavaScript skripta za vašo spletno trgovino, ki omogoča merjenje, optimiziranje in grajenje skupin obiskovalcev za vaše kampanje oglasov. Facebook Pixel omogoča, da z merjenjem aktivnosti obiskovalcev vaše spletne trgovine gradite in vodite učinkovitejše oglaševanje.

Kaj so Facebook dinamični oglasi

Facebook dinamični oglasi (ang. Dynamic Ads) omogočajo promocijo relevantnih produktov strankam, ki brskajo po katalogu produktov v vaši spletni trgovini. V praksi to pomeni, da z oglaševanjem stranki pokažemo točno tiste izdelke, ki si jih je v trgovini že ogledovala.

Primer prikaza facebook pixel oglasov

Primer prikaza facebook pixel oglasov

 

Integracija v Magento:

Izdelali bomo modul, ki bo v administracijo dodal novo stran, na kateri bo polje za vnos Facebook pixel javascript kode in gumb za izvoz kataloga produktov, primernega za uvoz v Facebook. Nato bomo Facebook Pixel skripto implementirali v pogled produkta, na dogodek dodaj v košarico in na uspešen zaključek nakupa.

1. Kreiranje kataloga produktov

Katalog produktov je seznam produktov, ki jih želite oglaševati na Facebooku. Vsak produkt v seznamu ima atribute: ID produkta, naziv, opis, povezava do produkta na spletni trgovini, povezava do slike produkta, dobavljivost, ipd.

Katalog produktov je lahko v formatih: CSV, TSV, RSS XML ali ATOM XML

V našem primeru bomo kreirali modul, s katerim je mogoče enkratno izvoziti produkte v .csv katalog.

 V sistem .xml modula poleg ostalih polj dodamo sledeče:

<check translate="label">
<label>Export FB pixel Catalog CSV</label>
<frontend_type>button</frontend_type>							
<frontend_model>optiweb_fbpixel/adminhtml_button</frontend_model>
<sort_order>3</sort_order>
<show_in_default>1</show_in_default>
<show_in_website>1</show_in_website>
<show_in_store>1</show_in_store>
</check>

 

Za prikaz gumba je treba v »Block/Adminhtml« dodati novo datoteko Button.php, v katerem nastavimo .phtml predlogo gumba, besedilo gumba in opcijsko tudi »onclick« dogodek.

code/local/Optiweb/Fbpixel/Block/Adminhtml/Button.php:

<?php 
class Optiweb_Fbpixel_Block_Adminhtml_Button extends Mage_Adminhtml_Block_System_Config_Form_Field
{
    protected function _construct()
    {
        parent::_construct();
        $this->setTemplate('optiweb/button.phtml');
    }
    protected function _getElementHtml(Varien_Data_Form_Element_Abstract $element)
    {
        return $this->_toHtml();
    }
 
    public function getAjaxCheckUrl()
    {
        return Mage::helper('adminhtml')->getUrl('adminhtml/fbpixel/exportcsv');
    }
    public function getButtonHtml()
    {
        $button = $this->getLayout()->createBlock('adminhtml/widget_button')->setData(array(
            'id'        => 'optiweb_button',
            'label'     => $this->helper('adminhtml')->__('Export Catalog CSV'),
            'onclick'   => 'javascript:check(); return false;'
        ));
 
        return $button->toHtml();
    }
}

 

V našem primeru bomo na »onclick« dogodek klicali owGetCatalog() funkcijo, ki vrne podatke controllerja, navedenega v getAjaxCheckUrl() metodi.

design/adminhtml/default/default/template/optiweb/button.phtml

<script type="mce-text/javascript">// <![CDATA[
function check() {		
window.location.assign("<?php echo $this->getAjaxCheckUrl() ?>");
    }
    //]]>
	 
<?php echo $this->getButtonHtml() ?>

 

V Controllerju nastavimo ime datoteke, iz helperja generiramo vsebino datoteke ter pripravimo datoteko za prenos.

code/local/Optiweb/Fbpixel/controllers/Adminhtml/FbpixelController.php

<?php
class Optiweb_Fbpixel_Adminhtml_FbpixelController extends Mage_Adminhtml_Controller_Action
{
	public function exportcsvAction()
	{
        $filename = 'FBPixelCatalog.csv';
        $content = Mage::helper('fbpixel_exportcsv/exportcsv')->generateExportList();
 
        $this->_prepareDownloadResponse($filename, $content);
	}
}

 

V helperju Exportcsv.php pripravimo collection produktov, za export. V metodi _parseProduct, produktom nastavimo pravilne nazive atributov, kot jih navaja facebook dokumentacija (https://developers.facebook.com/docs/marketing-api/dynamic-product-ads/product-catalog)

Metoda generateExportList() pripravi csv datoteko ter vanjo zapiše produkte.

code/local/Optiweb/Fbpixel/Helper/ Exportcsv.php

<?php
class Optiweb_Fbpixel_Helper_Exportcsv extends Mage_Core_Helper_Abstract
{
    protected $_list = null;
	protected $_currency_code = null;
 
    public function __construct()
    {
        $collection = Mage::getModel('catalog/product')->getCollection()
            ->addAttributeToSelect(array('name', 'description', 'thumbnail', 'url_path', 'price'))
			->addFieldToFilter('visibility', Mage_Catalog_Model_Product_Visibility::VISIBILITY_BOTH);          
		Mage::getSingleton('cataloginventory/stock')->addInStockFilterToCollection($collection);		
        $this->setList($collection);
    }
 
    public function setList($collection)
    {
        $this->_list = $collection;
    }
	
	public function setCurrencyCode()
    {
        $this->_currency_code = Mage::app()->getStore()->getCurrentCurrencyCode();
    }

	protected function _parseProduct($product)
	{
		$ow_product = array(
			'id' => $product->getId(),
			'availability' => 'in stock',
			'condition' => 'new',
			'description' => $product->getDescription(),
			'image_link' => $product->getThumbnailUrl(),
			'link' => Mage::getBaseUrl(Mage_Core_Model_Store::URL_TYPE_WEB).$product->getUrlPath(),
			'title' => $product->getName(),
			'price' => $product->getPrice() . " " . $this->_currency_code,
			'brand' => $product->getManufacturer()			
		);
		return $ow_product;
	}    

    protected function _getCsvHeaders($products)
    {
		$product = $this->_parseProduct(current($products));
        $headers = array_keys($product);
        return $headers;
    }

    public function generateExportList()
    {
        if (!is_null($this->_list)) {
            $items = $this->_list->getItems();
            if (count($items) > 0) {
                $io = new Varien_Io_File();
                $path = Mage::getBaseDir('var') . DS . 'export' . DS;
                $name = md5(microtime());
                $file = $path . DS . $name . '.csv';
                $io->setAllowCreateFolders(true);
                $io->open(array('path' => $path));
                $io->streamOpen($file, 'w+');
                $io->streamLock(true);
				
                $io->streamWriteCsv($this->_getCsvHeaders($items));
                foreach ($items as $product) {					
                    $io->streamWriteCsv($this->_parseProduct($product));
                }
				$io->streamClose();
                return array(
                    'type'  => 'filename',
                    'value' => $file,
                    'rm'    => true
                );
            }
        }
    }
}

 

Končna rešitev v administraciji izgleda sledeče:

Primer prikaza facebook pixel oglasov

S klikom na gumb »Export Catalog CSV«, se prenese datoteka FBPixelCatalog.csv z atributi produktov.

2. Implementacija Facebook Pixel skripte:

V administraciji bomo kreirali novo polje, kamor bomo nato prilepili Facebook pixel skripto.

V system.xml modula dodamo sledečo kodo:

<fbpixel_basecode>
                            <label>Facebook Pixel base code</label>
                            <frontend_type>textarea</frontend_type>
                            <sort_order>2</sort_order>
                            <show_in_default>1</show_in_default>
                            <show_in_website>1</show_in_website>
                            <show_in_store>1</show_in_store>
                            <comment>Paste Facebook Pixel base code.</comment>
 </fbpixel_basecode>
 

 

 Za prikaz polja v administraciji je potrebno kreirati še Data.php helper:

code/local/Optiweb/Fbpixel/Helper/Data.php

<?php
class Optiweb_Fbpixel_Helper_Data extends Mage_Core_Helper_Abstract
{
}

 

V administraciji imamo sedaj prikazano novo textfield polje, kamor prilepimo osnovno Facebook pixel skripto:

Facebook pixel base source code

Facebook pixel base source code

 

Sedaj bomo vsebino tega polja vnesli v glavo strani.

Najprej kreiramo Block, ki z metodo owPixelSource() prebere vsebino polja v administraciji:

code/local/Optiweb/Fbpixel/Block/Fbpixel.php:

<?php
class Optiweb_Fbpixel_Block_Fbpixel extends Mage_Core_Block_Template
{
    public function owPixelSource()
    {
        return Mage::getStoreConfig('optiweb_fbpixel/fbpixel_general/fbpixel_basecode');
    }
}

 

Nato kreiramo design/frontend/base/default/template/optiweb/head.phtml datoteko z vsebino, ki izpiše vrednost owPixelSource() blok metode:

<?php
    echo $this->owPixelSource();

 

Kreiramo še predlogo design/frontend/base/default/template/optiweb/product.phtml:

<?php 
    $ow_product = $this->getProduct();
    ?><script type="mce-mce-text/javascript">
        fbq('track', 'ViewContent', {
          content_type: 'product',
          content_ids: ['<?php echo $ow_product->getId(); ?>'],
          value: <?php echo $ow_product->getFinalPrice(); ?>,
          currency: '<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>'
        });
// ]]></script>

 

Facebook pixel beleži podatke tudi na strani uspešno oddanega naročila. Skripta, ki jo moramo dodati na to stran je:

fbq('track', 'Purchase', {
            content_type: 'product',
            content_ids:  'ID – ji produktov, ki so enaki tistim, ki smo jih izvozili v katalog produktov'
            value: 'Cena naročila'
            currency: 'Valuta v kateri je bilo naročilo oddano'          
});

 

Kodo dodamo podobno, kot smo jo dodali na product view. Najprej v optiweb.xml dodamo nov layout z referenco na success.phtml predlogo:

    
<checkout_onepage_success>
      	<reference name="content">
            <block type="checkout/onepage_success" name="fbpixel_purchase" template="optiweb/success.phtml" />
        </reference>
</checkout_onepage_success>

 

Nato kreiramo novo design/frontend/base/default/template/optiweb/success.phtml datoteko z vsebino:

<?php 
    $ow_product = $this->getOrderId();
    $ow_lastOrderId = Mage::getSingleton('checkout/session')->getLastOrderId();
    $ow_order = Mage::getSingleton('sales/order');
    $ow_order->load($ow_lastOrderId);

    $ow_items = $ow_order->getAllItems();
    $content_ids = "";
    $i = 1;
    $ow_count = count($ow_items);
    foreach($ow_items as $_item) {
        $content_ids .= "'" . $ow_item->getId() . "'";
        if($i < $ow_count)
        {
          $content_ids .= ",";
        }
        $i++;
    }

    $ow_totalData = $ow_order->getData();
    $ow_grand = $ow_totalData['grand_total'];

    ?>
<script type="mce-mce-text/javascript">// <![CDATA[
fbq('track', 'Purchase', {
            content_type: 'product',
            content_ids: [<?php echo $content_ids; ?>],
            value: <?php echo $ow_grand; ?>,
            currency: '<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>'
          });
// ]]></script>

 

Nazadnje pa je treba še beležiti dogodek, ko stranka doda artikel v košarico.
Dogodek bomo beležili tako, da bomo naredili Observer, ki bo, ob trenutku dodanega artikla v košarico, v sejo zabeležil podatke artikla. Ob naslednji osvežitvi strani se bodo iz seje prebrali podatki in pognali Facebook Pixel funkcijo:

fbq('track', 'AddToCart', {
	content_ids: 'ID – ji produktov, ki so enaki tistim, ki smo jih izvozili v katalog produktov',
	content_type: 'product',
	value: 'Cena produkta',
	currency: 'Valuta trenutno ogledane trgovine'
});

 

Najprej kreiramo Observer:

code/local/Optiweb/Fbpixel/Model/Observer.php

<?php 
class Optiweb_Fbpixel_Model_Observer
{
    public function addProductToSession(Varien_Event_Observer $observer) {
		$event = $observer->getEvent();
		$product = $event->getProduct();
		
        Mage::getModel('core/session')->setProductToShoppingCart(
            new Varien_Object(array(
                'id' => $product->getEntityId(),
                'price' => $product->getPrice()
            ))
        );
    }
}

 

Nato registriramo observer na event »checkout_cart_product_add_after«.

V config.xml datoteko modula dodamo:

      
           <events>
            <checkout_cart_product_add_after>
                <observers>
                    <optiweb_fbpixel_add_product_to_session>
                        <class>optiweb_fbpixel/observer</class>
                        <method>addProductToSession</method>
                    </optiweb_fbpixel_add_product_to_session>
                </observers>
            </checkout_cart_product_add_after>
      </events>      

 

V optiweb.xml layout dodamo vrstice, s katerimi dodamo addtocart.phtml na košarico, pogled produkta oziroma pogled kategorije:

    
    <checkout_cart_index>
		<reference name="before_body_end">
		  <block type="core/template" name="optiweb_fbpixel_log_cart_add" template="optiweb/addtocart.phtml" />
		</reference>
    </checkout_cart_index>

    <catalog_product_view>
		<reference name="before_body_end">
          <block type="core/template" name="optiweb_fbpixel_log_cart_add" template="optiweb/addtocart.phtml" />
		</reference>
    </catalog_product_view>

<catalog_category_layered>
		<reference name="before_body_end">
		  <block type="core/template" name="optiweb_fbpixel_log_cart_add" template="optiweb/addtocart.phtml" />
		</reference>
    </catalog_category_layered>

 

Kreiramo še novo predlogo design/frontend/base/default/template/optiweb/addtocart.phtml:

<?php $_product = Mage::getModel('core/session')->getProductToShoppingCart() ?>
<?php if ($_product && $_product->getId()): ?>
    <script type="text/javascript">
	
fbq('track', 'AddToCart', {
	content_ids: ['<?php echo $_product->getId(); ?>'],
content_type: 'product',
	value: <?php echo $_product->getPrice(); ?>,
	currency: '<?php echo Mage::app()->getStore()->getCurrentCurrencyCode(); ?>'
		});
    </script>
    <?php Mage::getModel('core/session')->unsProductToShoppingCart(); ?>
<?php endif; ?>
<script>

 

Vam je uspelo? Dinamični remarketing na Facebooku je eno izmed najbolj učinkovitih orodij za prodajo, če ga le znate uporabiti sebi v prid. Če se vam pri postopku porajajo vprašanja ali pa naletite na težave, pa vam z veseljem priskočimo na pomoč. 🙂

mailing
Ne bi bilo bolj praktično, če bi naše novice enkrat na mesec dobili kar po
e-pošti?
Enkrat na mesec za vas v e-pošti izberemo naše najbolj uporabne prispevke o malih skrivnostih dobrih spletnih strani, trendih v spletnem oblikovanju, trikih za optimizacijo in učinkovitem spletnem marketingu.
Ste pripravljeni, da skupaj zavihamo rokave in se lotimo dela?