Jak nastavit Facebook pixel s pomocí GTM

Úspěch reklam na Facebooku hodně záleží na tom, zda mu poskytneš dostatek dat, na základě kterých se jeho algorytmus učí.

A jedním z důležitých zdrojů dat je Facebook pixel nasazený na tvůj web.

V tomto návodu neřeším, co to Facebook pixel je a jak jej použít v reklamách. O tom se dočteš třeba v článku o Facebook pixelu od Včeliště.

Ukáži ti zde ale, jak správně Facebook pixel vložit na web, aby do Facebooku odesílal potřebná data. Využijeme k tomu Google Tag Manager.

Základní kód pixelu
Event ViewContent
Event AddToCart
Event Purchase
Další eventy
Kontrola správné implementace

Pokud si chceš práci zjednodušit, můžeš si všechny kód popsané níže jednoduše do GTM naimportovat s pomocí této šablony FB pixelu pro GTM.

Základní kód pixelu

Základní kód pixelu posílá Facebooku informace o zobrazených stránkách. Díky němu tak budeš moci ve Facebooku cílit na všechny návštěvníky webu nebo jen na ty, kteří viděli konkrétní stránku.

Kód pixelu pro tvůj web získáš v nastavení pixelu po kliknutí na Install Pixel, kde vybereš manuální vložení kódu na web.

Tento kód pak vložíš v Google Tag Manageru jako novou značku Facebook – Pixel typu Vlastní HTML a spouštět ji budeš na všech stránkách webu.

V Advanced Settings ještě uprav, že značku chceš spouštět pouze jednou za stránku.

Konfigurace značky pro základní kód Facebook pixelu

Tímto nejjednodušší nastavení Facebooku pixelu končí. Pokud máš ale e-shop a chceš používat dynamické reklamy, měřit do Facebooku objednávky nebo odeslané formuláře, je potřeba donastavit ještě eventy.

Event ViewContent

Event ViewContent slouží k odeslání informací o zobrazeném detailu produktu. Využiješ ho tak, pokud máš e-shop. Díky němu bude Facebook vědět, které produkty si uživatel na webu prohlížel a které mu tak má ukazovat v dynamických reklamách. Můžeš si pak též tvořit vlastní publika podle zobrazených produktů nebo jejich kategorií.

Vytvoř novou značku Facebook – ViewContent typu Vlastní HTML a do ní vlož tento kód.

<script>
fbq('track', 'ViewContent', {
    content_name: '{{dl.ecommerce.detail.products.0.name}}',
    content_category: '{{dl.ecommerce.detail.products.0.category}}',
    content_ids: ['{{dl.ecommerce.detail.products.0.id}}'],
    content_type: 'product',
    currency: '{{dl.ecommerce.currencyCode}}',
    value: '{{dl.ecommerce.detail.products.0.price}}'
});
</script>

fbq('track', 'ViewContent', {

content_name: '{{dl.ecommerce.detail.products.0.name}}',

content_category: '{{dl.ecommerce.detail.products.0.category}}',

content_ids: ['{{dl.ecommerce.detail.products.0.id}}'],

content_type: 'product',

currency: '{{dl.ecommerce.currencyCode}}',

value: '{{dl.ecommerce.detail.products.0.price}}'

});

</script>

Pravidlo spouštění nastav dle svého webu tak, aby odpovídal zobrazení detailu produktu.

V Advanced Settings, sekci Tag Sequencing nastav, aby se před touto značkou vždy stihla ještě odpálit značka se základním kódem pixelu. Jen tak bude vše správně fungovat.

Uvedený kód odpovídá standarní implementaci Enhanced Ecommerce měření pro Google Analytics, odkud bere i potřebná data. Části kódu ve dvou složených závorkách se tak ve tvém případě nejspíše budou lišit. Nezbytným krokem je tak i vytvoření a nadefinování zmíněných proměnných. Pokud se s tím budeš trápit, dej mi vědět a pomohu.

ViewContent lze použít i na jiných webech, než jen na e-shopech. Místo údajů o produktu pak posíláš informace o zobrazeném obsahu.

V proměnné content_type můžeš místo hodnoty product posílat product_group. V tom případě Facebooku říkáš, že uživatel neviděl konkrétní produkt, ale produkt z dané produktové skupiny. Samozřejmě feed produktů pak musí obsahovat odpovídající item_group_id.

Event AddToCart

Další event, který oceníš u e-shopu, je AddToCart. Díky němu Facebooku pozná, které produkty uživatel přidal do košíku.

Vytvoř novou značku Facebook – AddToCart typu Vlastní HTML a vyplň ji kódem.

<script>
fbq('track', 'AddToCart', {
    content_name: '{{dl.ecommerce.add.products.0.name}}', 
    content_category: '{{dl.ecommerce.add.products.0.category}}',
    content_ids: ['{{dl.ecommerce.add.products.0.id}}'],
    content_type: 'product',
    value: {{dl.ecommerce.add.products.0.price}},
    currency: '{{dl.ecommerce.currencyCode}}' 
});          
</script>

fbq('track', 'AddToCart', {

content_name: '{{dl.ecommerce.add.products.0.name}}',

content_category: '{{dl.ecommerce.add.products.0.category}}',

content_ids: ['{{dl.ecommerce.add.products.0.id}}'],

content_type: 'product',

value: {{dl.ecommerce.add.products.0.price}},

currency: '{{dl.ecommerce.currencyCode}}'

});

</script>

Stejně jako u ViewContent nastav v sekci Tag Sequencing, aby se před toutou značkou vždy stihla ještě odpálit značka se základním kódem pixelu.

No a samozřejmě nezapomeň vybrat správné pravidlo spouštění. Tento kód je potřeba vykonat již v okamžiku přidání do košíku, ne až při zobrazení stránky košíku.

Mysli na to, že tlačítko na přidání do košíku se může nacházet i na homepage, v kategorii a detailu produktu.

Event Purchase

Nejdůležitějším eventem u e-shopu je Purchase. Díky němu se do Facebooku odešlou informace o provedené objednávce. Facebook tak bude moci reportovat, kolik konverzí přinesl a jakou měly hodnotu. Pozor si ale dej na různé atribuční modely.

Navíc Facebooku uvidí, jací uživatelé objednávají a co. Díky tomu budou jeho algorytmy moci úspěšněji hledat uživatele jim podobné přes lookalike publika. Při plné implementaci včetně nakoupených produktů pak dokážeš definovat ve Facebooku i publika typu Nakoupili konkrétní produkt před 20-30 dny a jim ukazovat speciální reklamy.

Pro měření eventu Purchase vytvoř novou značku Facebook – Purchase typu Vlastní HTML a do ní nakopíruj kód.

<script>
fbq('track', 'Purchase', {
    currency: '{{dl.ecommerce.currencyCode}}', 
    value: {{dl.ecommerce.purchase.actionField.revenue}},
    content_type: 'product',
    contents: {{js.contentsForFacebookPurchase}}
});
</script>

fbq('track', 'Purchase', {

currency: '{{dl.ecommerce.currencyCode}}',

value: {{dl.ecommerce.purchase.actionField.revenue}},

content_type: 'product',

contents: {{js.contentsForFacebookPurchase}}

});

</script>

V Advanced Settings, sekci Tag Sequencing nastav, aby se před toutou značkou vždy stihla odpálit značka s pixelem.

Pravidlo spouštění nastav na zobrazení děkovací stránky po nákupu.

Složitější na nastavení je proměnná js.contentsForFacebookPurchase. Facebook totiž potřebuje v proměnné contents zaslat pole, které obsahuje ID a množství objednaných produktů. To jde naštěstí poskládat z údajů pro měření transakce do Google Analytics. Proměnná js.contentsForFacebookPurchase je tak typu Vlastní JavaScript a obsahuje následující kód.

function() {
  var contents = [];
  for (i = 0; i < {{dl.ecommerce.purchase.products}}.length; i++) {
    contents[i] =  {
      id: {{dl.ecommerce.purchase.products}}[i].id, 
      quantity: {{dl.ecommerce.purchase.products}}[i].quantity
    }
  }
  return contents;
}

function() {

var contents = [];

for (i = 0; i < {{dl.ecommerce.purchase.products}}.length; i++) {

contents[i] = {

id: {{dl.ecommerce.purchase.products}}[i].id,

quantity: {{dl.ecommerce.purchase.products}}[i].quantity

}

return contents;

}

Celá konfigurace proměné tak vypadá takto.

Konfigurace js.contentsForFacebookPurchase

Další eventy

Facebook má i celou řadu dalších standardizovaných eventů a můžeš si posílat i eventy vlastní např. při odeslání formuláře nebo stažení souboru. To využije k definování publik nebo nastavení vlastních konverzí.

Posílání vlastního eventu uděláš v Google Tag Manageru přes vložení tohoto kódu do značky typu Vlastní HTML a nadefinování správného pravidla spouštění.

<script>
fbq('track', 'stazeniCeniku');
</script>

fbq('track', 'stazeniCeniku');

</script>

Řetězec stazeniCeniku samozřejmě nahraď vlastním názvem eventu.

Ani zde nezapomeň nastavit v Advanced Settings, že značka se má spustit až po značce základního kódu pixelu.

Kontrola správné implementace

Až budeš mít vše v Google Tag Manageru hotové, přepni se do Preview módu. Do Chromu si přidej rozšíření Facebook Pixel Helper a stránku obnov.

Dále pokračuj podle návodu na kontrolu implementace Facebook pixelu.

Trápíš se s nastavením a něco ti nejde? Ozvi se mi a rád pomohu.

nazakladedat.cz

Základní kód pixelu

Event ViewContent

Event AddToCart

Event Purchase

Další eventy

Kontrola správné implementace