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:
<!-- Facebook Pixel Code -->
<script></script>
!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', "PageView");
<noscript></noscript>
src="https://www.facebook.com/tr?id=ADD_FACEBOOK_ID&ev=PageView&noscript=1"
/>
<!-- End Facebook Pixel 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
<script></script>
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 = $("form").first().serializeArray()[0]["value"];
var variant_id = $("select#productSelect option:selected").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 }}'
}]);
});
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:
<script></script>
// Search
// Track searches on your website (ex. product searches)
fbq('track', 'Search');
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
{% if first_time_accessed %}
<script></script>
!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', "PageView");
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}}'
});
