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.
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:
button
optiweb_fbpixel/adminhtml_button
3
1
1
1
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:
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
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:
Nato kreiramo novo design/frontend/base/default/template/optiweb/success.phtml datoteko z vsebino:
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'];
?>
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
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:
optiweb_fbpixel/observer
addProductToSession
V optiweb.xml layout dodamo vrstice, s katerimi dodamo addtocart.phtml na košarico, pogled produkta oziroma pogled kategorije:
Kreiramo še novo predlogo design/frontend/base/default/template/optiweb/addtocart.phtml:
getProductToShoppingCart() ?>
getId()): ?>
unsProductToShoppingCart(); ?>
