Facebook-pikselin asentaminen verkkokauppaan

Starter Yes
Mini Yes
Active Yes
Pro Yes

Facebook-markkinointia varten pitää lisätä Facebokin seurantakoodit kauppaan. Facebookin omat ohjeet kertovat mitä tarkemmin pitää tehdä, mutta alla vielä esimerkit miten seurantakoodit lisätään kauppaan.

Vaihtoehto 1 - Facebook-pikselin lisääminen kauppaan head-alueelle

Facebookin ohjeissa opastetaan alla olevalla tavalla, että Facebook-pikselin koodi tulee lisätä <head> ja </head> väliin, joten se lisätään Asetukset > Yleiset asetukset > Lisäasetukset -sivulla "HTML-koodin head-alue" kenttään.

 

 Kaupasssa lisättynä se näyttäisi tältä.

 

Sen lisäksi konversion seurantakoodi lisätään kiitossivulle. Tämä voidaan lisätä yllä olevan kohdan 3 mukaisesti kohtaan Asetukset > Ostoskorin asetukset > Tekstit > Tilausvahvistussivun teksti / Kumppaniyrityksen seurantakoodi.

Facebookin omassa ohjeessa opastetaan lisäämään <script> tagit koodin ympärille ja yllä olevassa kohdassa kolme mainitaan paikkamerkkien muokkaamisesta koodiin. Loputuloksena asetuskenttään voi lisätä tällaisen koodin, jos halutaan seurata Facebookin hallinnassa ostoksien summia.

<script>
fbq('track', 'Purchase', {value: '#OrderTotalAmountGross[0]', currency: '#CurrencyCode'}); </script>

 

Kaupassa lisättynä se näyttäisi tältä. Ennenkuin koodin kopioi kenttään, niin täytyy muistaa napsauttaa kooditila päälle kuvassa ympyröidystä painikkeesta.

 

Tuotesivun seuranta (ViewContent-event) voidaan tehdä seuraavalla koodilla. Lisätään Asetukset > Yleiset asetukset > Lisäasetukset -sivulle:

<script>
require(['jquery', '$ready!'], function ($) {
// Jos tuotesivu
if($('.ProductDetails').length){
// Tunnistetaan tuotenumero
var ProductNoFB = epConfig.webUrlSsl.split('/').slice(-1)[0];

// Lähetetään
ViewContent event tuotenumerolla
fbq('track', 'ViewContent', {
content_ids: ProductNoFB,
content_type: 'product'
});

// Add to cart event
$(function(){
$('button.AddToBasketButton').click(function() {
fbq('track', 'AddToCart', {
content_ids: ProductNoFB,
content_type: 'product'
});
});
});

}
});
</script>

 

 

Vaihtoehto 2 - Facebook pikselin luonti Google Tag Managerilla

Google Tag Manager -integraatio saatavilla Pro -tasossa

Dynaamista markkinointia varten Facebook pikselin lisäksi pitää tehdä tapahtumat (event) ViewContent (kun tullaan tuotesivulle), AddToCart (kun tuote lisätään ostoskoriin), Basket (kun tullaan ostoskoriin) sekä Purchase (tilausvahvistus). Näiden tekeminen onnistuu helpoiten Google Tag Managerilla, jossa on aktivoitu "Enhanced Ecommerce" ominaisuus. Tämä löytyy Markkinointi > Google Tag Manager -sivulla

 

Google Tag managerin asetukset

Luo Google Tag Manageriin tagit Facebook-pikselille sekä halutuille eventeille:

Google Tag Manager tagit

 

Tagien laukaisuun luodaan triggerit:

Google Tag Manager triggerit

Tilausvahvistussivun triggeröinti on hieman tavallista hankalampaa kun siihen ei voi tarttua urlin perusteella eikä siellä ole uniikkia id:tä. Asian voi ratkaista esimerkiksi luomalla tilausvahvistussivulle oma html-koodi, jonka näkyminen on purchase-eventin triggeri:

Tilausvahvistussivun triggeri

ID:n luonti triggeriä varten

 

Purchase eventin luominen Enhanced Ecommerce Data Layeria hyödyntämällä

Täydellisen tilausvahvistuksen lähettäminen tuotetietoineen on hieman teknisempi työ edellisiin verrattuna. Se tehdään GTM:ssä JavaScriptillä lukemalla Enhanced Ecommerce Data Layerin tiedot ja lähettämällä ne Facebook-eventin mukana. Tämä on ohjeistettu yksityiskohtaisesti täällä: www.simoahava.com/analytics/enhanced-ecommerce-facebook-pixel/

Purchase eventin luonti GTM:llä

 

Testaaminen ja analytiikka

Kun seurantakoodit ovat kunnossa, tulokset näkyvät Business managerin analytiikassa

Facebook Business Manager analytics

Hyödyllisiä työkaluja testaamiseen:

 

Lisää aiheesta:

 

Jos haluat apua Tag Managerin & Facebook pikselin asentamisessa, ota yhteyttä asiakaspalveluumme tuki@vilkas.fi tai puh 020 743 1912.
Voimme tehdä yllä esitellyt seurantakoodit verkkokauppaasi 145€ toimenpidemaksulla (alv 0).

Jaa sisältö