{"id":12698,"date":"2017-02-01T11:50:47","date_gmt":"2017-02-01T09:50:47","guid":{"rendered":"https:\/\/dev.optiweb.com\/?post_type=post&p=12698"},"modified":"2018-09-03T12:29:04","modified_gmt":"2018-09-03T12:29:04","slug":"dinamicni-oglasi-fb-magento","status":"publish","type":"post","link":"https:\/\/dev.optiweb.com\/sl\/blog\/dinamicni-oglasi-fb-magento\/","title":{"rendered":"Dinami\u010dni remarketing na FB: Kako implementirati pixel v Magento"},"content":{"rendered":"
\n
<\/div><\/div><\/div>\n\n<\/div><\/div><\/main><\/div><\/div>
\n

V tem \u010dlanku bomo podrobneje pogledali, kako implementirati Facebook Pixel za Facebook dinami\u010dne oglase v platformo Magento.<\/p>\n

Kaj je Facebook Pixel?<\/h2>\n

Facebook Pixel je JavaScript skripta za va\u0161o spletno trgovino, ki omogo\u010da merjenje, optimiziranje in grajenje skupin obiskovalcev za va\u0161e kampanje oglasov. Facebook Pixel omogo\u010da, da z merjenjem aktivnosti obiskovalcev va\u0161e spletne trgovine gradite in vodite u\u010dinkovitej\u0161e ogla\u0161evanje.<\/p>\n

Kaj so Facebook dinami\u010dni oglasi<\/h2>\n

Facebook dinami\u010dni oglasi<\/a> (ang. Dynamic Ads) omogo\u010dajo promocijo relevantnih produktov strankam, ki brskajo po katalogu produktov v va\u0161i spletni trgovini. V praksi to pomeni, da z ogla\u0161evanjem stranki poka\u017eemo to\u010dno tiste izdelke, ki si jih je v trgovini \u017ee ogledovala.<\/p>\n<\/div><\/section>\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

Primer prikaza facebook pixel oglasov<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n<\/p>\n<\/div><\/div><\/div><\/div><\/div>

\n

Integracija v Magento:<\/h2>\n

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\u0161arico in na uspe\u0161en zaklju\u010dek nakupa.<\/p>\n

1. Kreiranje kataloga produktov<\/b><\/p>\n

Katalog produktov je seznam produktov, ki jih \u017eelite ogla\u0161evati na Facebooku. Vsak produkt v seznamu ima atribute: ID produkta, naziv, opis, povezava do produkta na spletni trgovini, povezava do slike produkta, dobavljivost, ipd.<\/p>\n

Katalog produktov je lahko v formatih: CSV, TSV, RSS XML ali ATOM XML<\/p>\n

V na\u0161em primeru bomo kreirali modul, s katerim je mogo\u010de enkratno izvoziti produkte v .csv katalog.<\/p>\n

V sistem .xml modula poleg ostalih polj dodamo slede\u010de:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Za prikaz gumba je treba v \u00bbBlock\/Adminhtml\u00ab dodati novo datoteko Button.php, v katerem nastavimo .phtml predlogo gumba, besedilo gumba in opcijsko tudi \u00bbonclick\u00ab dogodek.<\/p>\n

code\/local\/Optiweb\/Fbpixel\/Block\/Adminhtml\/Button.php:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

V na\u0161em primeru bomo na \u00bbonclick\u00ab dogodek klicali owGetCatalog() funkcijo, ki vrne podatke controllerja, navedenega v getAjaxCheckUrl() metodi.<\/p>\n

design\/adminhtml\/default\/default\/template\/optiweb\/button.phtml<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

V Controllerju nastavimo ime datoteke, iz helperja generiramo vsebino datoteke ter pripravimo datoteko za prenos.<\/p>\n

code\/local\/Optiweb\/Fbpixel\/controllers\/Adminhtml\/FbpixelController.php<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

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<\/a>)<\/p>\n

Metoda generateExportList() pripravi csv datoteko ter vanjo zapi\u0161e produkte.<\/p>\n

code\/local\/Optiweb\/Fbpixel\/Helper\/ Exportcsv.php<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n
<\/div>

S klikom na gumb \u00bbExport Catalog CSV\u00ab, se prenese datoteka FBPixelCatalog.csv z atributi produktov.<\/p>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n\n<\/div><\/div><\/div><\/div><\/div>

\n

2. Implementacija Facebook Pixel skripte:<\/strong><\/p>\n

V administraciji bomo kreirali novo polje, kamor bomo nato prilepili Facebook pixel skripto.<\/p>\n

V system.xml modula dodamo slede\u010do kodo:<\/p>\n<\/div><\/section>\n\n\n

<\/div><\/div><\/div><\/div><\/div>

\n

Za prikaz polja v administraciji je potrebno kreirati \u0161e Data.php helper:<\/p>\n

code\/local\/Optiweb\/Fbpixel\/Helper\/Data.php<\/p>\n<\/div><\/section>\n\n<\/p>\n<\/div><\/div><\/div><\/div><\/div>

\n

Kreiramo \u0161e predlogo\u00a0design\/frontend\/base\/default\/template\/optiweb\/product.phtml:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Facebook pixel bele\u017ei podatke tudi na strani uspe\u0161no oddanega naro\u010dila. Skripta, ki jo moramo dodati na to stran je:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Kodo dodamo podobno, kot smo jo dodali na product view. Najprej v optiweb.xml dodamo nov layout z referenco na success.phtml predlogo:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Nato kreiramo novo\u00a0design\/frontend\/base\/default\/template\/optiweb\/success.phtml\u00a0datoteko z vsebino:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Nazadnje pa je treba \u0161e\u00a0bele\u017eiti dogodek, ko stranka doda artikel v ko\u0161arico.
\nDogodek bomo bele\u017eili tako, da bomo naredili Observer, ki bo, ob trenutku dodanega artikla v ko\u0161arico, v sejo zabele\u017eil podatke artikla. Ob naslednji osve\u017eitvi strani se bodo iz seje prebrali podatki in pognali Facebook Pixel funkcijo:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Najprej kreiramo Observer:<\/p>\n

code\/local\/Optiweb\/Fbpixel\/Model\/Observer.php<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Nato registriramo observer na event \u00bbcheckout_cart_product_add_after\u00ab.<\/p>\n

V config.xml datoteko modula dodamo:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

V optiweb.xml layout dodamo vrstice, s katerimi dodamo addtocart.phtml na ko\u0161arico, pogled produkta oziroma pogled kategorije:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Kreiramo \u0161e novo predlogo\u00a0design\/frontend\/base\/default\/template\/optiweb\/addtocart.phtml:<\/p>\n<\/div><\/section>\n\n\n<\/div><\/div><\/div><\/div><\/div>

\n

Vam je uspelo? Dinami\u010dni remarketing na Facebooku je eno izmed najbolj u\u010dinkovitih orodij za prodajo, \u010de ga le znate uporabiti sebi v prid. \u010ce se vam pri postopku porajajo vpra\u0161anja ali pa naletite na te\u017eave, pa vam z veseljem prisko\u010dimo na pomo\u010d.<\/p>\n<\/div><\/section>\n\n

<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"

Facebook pixel je JavaScript skripta za va\u0161o spletno trgovino, ki omogo\u010da merjenje, optimiziranje in grajenje skupin obiskovalcev za va\u0161e kampanje oglasov.<\/p>\n","protected":false},"author":1,"featured_media":15452,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1031],"tags":[],"_links":{"self":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/12698"}],"collection":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/comments?post=12698"}],"version-history":[{"count":25,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/12698\/revisions"}],"predecessor-version":[{"id":31555,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/posts\/12698\/revisions\/31555"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media\/15452"}],"wp:attachment":[{"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/media?parent=12698"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/categories?post=12698"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.optiweb.com\/sl\/wp-json\/wp\/v2\/tags?post=12698"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}