Facebook pixel code pro dynamický remarketing na Shopify

Vložení základního facebook pixel kódu je u Shopify docela jednoduché. V nastavení vložíš svoje facebook ID číslo a je po starostech. O vše ostatní se postará Shopify samo.

Facebook pixel kód pro dynamický remarketing

Složitější je ale varianta, kdy potřebuješ facebooku předávat více informací o produktu a celém nákupu pro dynamický remarketing. V tom případě je již nutné zásah do šablon e-shopu.

Liquid šablony e-shopu najdeš v administraci Sales channel – Online store – Themes, vpravo nahoře je tlačítko se 3 tečkama, po kliknutí se rozbalí menu a vybereš položku Edit HTML/CSS.

Po rozkliknutí hlavních složek (Layout a Templates) vidíš v levém sloupci jednotlivé šablony. Pro vložení Facebook pixel kódu nás zajímají pouze – theme.liquid, product.liquid a search.liquid.

Vygenerování facebook pixel kódu

Cituji z dokumentace facebooku.

Vytvoření Facebook pixelu:

  • Ve Správci reklam přejděte na kartu Facebook Pixel.
  • Klikněte na Vytvořit pixel.
  • Zadejte název pixelu. Na jeden účet pro reklamu může existovat jenom jeden pixel, a proto si zvolte název, který reprezentuje vaši firmu.
  • Nezapomeňte zaškrtnout políčko pro přijetí podmínek.
  • Klikněte na Vytvořit pixel.
  • Nezapomeňte, že u každého účtu můžete vytvořit jen jeden Facebook pixel. Pokud už ho máte, nebude se vám tlačítko Vytvořit pixel zobrazovat.

Vložení základního pixel kódu – theme.liquid

Základní facebook pixel kód se vkládá do šablony theme.liquid do hlavičky celého webu mezi tagy <head> a </head>. Úpravu uložíš tlačítkem Save vpravo nahoře. Zatím se vložení kódu neliší od všech dostupných návodů na internetu.

ADD_FACEBOOK_ID – nahraď svým facebook ID
Ukázka vloženého facebook pixel kódu s událostí PageView:
[code lang=“js“]
&lt;!– Facebook Pixel Code –&gt;
&lt;script&gt;
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version=’2.0′;n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,’script‘,’https://connect.facebook.net/en_US/fbevents.js‘);

fbq(‚init‘, ‚ADD_FACEBOOK_ID‘);
fbq(‚track‘, &quot;PageView&quot;);&lt;/script&gt;
&lt;noscript&gt;&lt;img height=&quot;1&quot; width=&quot;1&quot; style=&quot;display:none&quot;
src=&quot;https://www.facebook.com/tr?id=ADD_FACEBOOK_ID&amp;ev=PageView&amp;noscript=1&quot;
/&gt;&lt;/noscript&gt;
&lt;!– End Facebook Pixel Code –&gt;
[/code]

Vložení ViewContent do detailu produktu

Detail produktu zobrazuje šablona product.liquid. Kódy pro facebook pixel vkládám dolů na úplný konec šablony.

Z e-shopu na facebook budeme přenášet tyto data:
content_ids – poskládané identifikační číslo produktu ve tvaru shopify_productID_variantID
content_type – product
content_name – název produktu
value – cena produktu zobrazená bez měny, pokud máš nastavený jako oddělovač desetin čárku, je dobré ještě nahrazovat čárku za tečku
currency – měna e-shopu (EUR, USD, Kč, apod.)
content_category – kategorie produktu

Vložení AddToCart do detailu produktu

Hodně e-shopů vkládá událost AddToCart až do košíku. My jsme na milvade.de vložili událost při kliknutí na tlačítko Koupit v detailu produktu.

Pro šablonu SUPPLY a její kopie se AddToCart může posílat facebooku:
content_ids – poskládané identifikační číslo produktu ve tvaru shopify_productID_variantID
content_type – product
content_name – název produktu
value – cena produktu zobrazená bez měny, pokud máš nastavený jako oddělovač desetin čárku, je dobré ještě nahrazovat čárku za tečku
currency – měna e-shopu (EUR, USD, Kč, apod.)
content_category – kategorie produktu

[code lang=“js“]
&lt;script&gt;
fbq(‚track‘, ‚ViewContent‘, {
content_ids: [‚shopify_{{ product.id }}_{{ product.variants.first.id }}‘],
content_type: ‚product‘,
content_name: ‚{{ product.title }}‘,
value: ‚{{ variant.price | money_without_currency | replace: ‚,‘, ‚.‘ }}‘,
currency: ‚{{ shop.currency }}‘,
content_category: ‚{{ collection.title }}‘
});

// Insert Your Add-To-Cart Button’s ID below.
$(‚#addToCart‘).bind( ‚click‘, function(){

// Change the line below to whatever is needed to extract the selected variants
// ID, e.g.: var variant_id = $(&quot;form&quot;).first().serializeArray()[0][&quot;value&quot;];
var variant_id = $(&quot;select#productSelect option:selected&quot;).val();

window._fbq.push([‚track‘, ‚AddToCart‘, {
content_ids: [‚shopify_{{ product.id }}_‘ + variant_id],
content_type: ‚product‘,
content_name: ‚{{ product.title }}‘,
value: ‚{{ variant.price | money_without_currency | replace: ‚,‘, ‚.‘ }}‘,
currency: ‚{{ shop.currency }}‘,
content_category: ‚{{ collection.title }}‘
}]);

});
&lt;/script&gt;
[/code]

Vložení události Search na stránku vyhledávání search.liquid

Tato událost není nutná posílat kvůli dynamickému remarketingu, ale když už je její implementace tak jednoduchá, proč to neudělat.

Na konec šablony search.liquid vlož kód:
[code lang=“js“]
&lt;script&gt;
// Search
// Track searches on your website (ex. product searches)
fbq(‚track‘, ‚Search‘);
&lt;/script&gt;
[/code]

Vložení události Purchase na děkovnou stránku

Vložení Checkout se neprovádí přímo v šabloně, ale Shopify má pro děkovnou stránku přímo vlastní formulářové pole, kde se obecně vkládají všechny kódy, které je nutné mít až po odeslání objednávky.

Najdeš jej v Settings -> Checkout sekce Additional content and scripts. Kód musí být načten pouze jednou, proto tam je podmínka first_time_accessed.

Z e-shopu na facebook budeme přenášet tyto data:

content_ids – poskládané identifikační čísla produktů objednávky ve tvaru shopify_productID_variantID
content_type – product
value – součet cen v objednávce bez dopravy a platby zobrazené bez měny, pokud máš nastavený jako oddělovač desetin čárku, je dobré ještě nahrazovat čárku za tečku
currency – měna e-shopu (EUR, USD, Kč, apod.)

ADD_FACEBOOK_ID – opět nahraď svým facebook ID z tvého pixel kódu

[code lang=“js“]
{% if first_time_accessed %}
&lt;script&gt;
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n;
n.push=n;n.loaded=!0;n.version=’2.0′;n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window,
document,’script‘,’//connect.facebook.net/en_US/fbevents.js‘);
// Insert Your Facebook Pixel ID below.
fbq(‚init‘, ‚ADD_FACEBOOK_ID‘);
fbq(‚track‘, &quot;PageView&quot;);
fbq(‚track‘, ‚Purchase‘, {
content_ids: [{% for item in order.line_items %}’shopify_{{ item.product.id }}_{{ item.variant.id }}‘,{% endfor %}],
content_type: ‚product‘,
value:'{{ order.subtotal_price | money_without_currency | replace: ‚,‘, ‚.‘ }}‘,
currency:'{{shop.currency}}‘
});

&lt;/script&gt;
{% endif %}
[/code]

Článek vyšel také na webu shopifycesky.cz

Online-Yellow-970x250

Zdeněk Stoklasa

Jsem multipotenciál a generalista. Pečlivý, samostatný, zodpovědný a Apple pozitivní. Sledujme se na LinkedIn. Nezávazně.

Napište mi

ahoj@zsto.cz

Fakturační údaje

Zdeněk Stoklasa
Na Zahrádkách 892
768 61 Bystřice pod Hostýnem
IČO 86931725
ID datovky gp753gh

Fyzická osoba zapsaná v Živnostenském rejstříku od 07.07.2008, eviduje: Městský úřad Bystřice pod Hostýnem, sídlo: Na Zahrádkách 892, Bystřice pod Hostýnem 768 61