Bodi obveščen/a o digitalnih trendih in študijah primera.
Zaupaj nam svoj e-mail!
V tem članku bomo podrobneje pogledali, kako implementirati Facebook Pixel za Facebook dinamične oglase v platformo Magento.
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.
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.
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
);
}
}
}
}
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:
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" ></block>
</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" ></block>
</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" ></block>
</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" ></block>
</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č.
Bodi obveščen/a o digitalnih trendih in študijah primera.
Zaupaj nam svoj e-mail!