Cosa è un codice Pixel di Facebook
Oltre ai tag analytics di google utilizzati per monitorare le attività degli utenti sulle tua pagine del sito, allo stesso modo è possibile utilizzare i codici Pixel di Facebook utili per la registrazione delle visualizzazioni di contenuti associati alle url del sito.
Per utilizzare il codice Pixel devi avere un account pubblicitario Facebook, in questo caso utilizzeremo il codice base strutturato nel seguente modo:
<script type="text/javascript">
!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', '{pixel-id}');
fbq('track', 'PageView');
</script>
Il codice base presenta due parametri fondamentali che sono
- fbq('init', '{Tuo-pixel-id}');
dove inserire il codice pixel generato sul tuo account pubblicitario Facebook
- fbq('track', 'PageView');
Con evento PageView standard che si occupa di registrare le visualizzazioni degli utenti sulle pagine del tuo sito.
Come inserire il codice Pixel Facebook in Prestashop
In un'altro articolo abbiamo parlato della Procedura per inserire il codice cookies consent nelle pagine con un e-commerce Prestashop, quindi andremo a ricalcare la stessa procedura partendo dall'individuazione della cartella del tema installato nella root del nostro sito accedendo con FileZilla Ftp:
e in seguito individuare il solo file head.tpl
Una volta aperto il file andremo ad inserire il nostro codice Pixel Facebook subito prima del blocco di codice {block name='head_viewport'} facendo attenzione a non manomettere i codici tra le parentesi graffe {....} , in pratica il Pixel deve essere posizionato fuori da qualsiasi blocco di codice in questa posizione, diversamente si otterrà un errore 500:
{block name='head_charset'}
<meta charset="utf-8">
{/block}
{block name='head_ie_compatibility'}
<meta http-equiv="x-ua-compatible" content="ie=edge">
{/block}
{block name='head_seo'}
<title>{block name='head_seo_title'}{$page.meta.title}{/block}</title>
<meta name="description" content="{block name='head_seo_description'}{$page.meta.description}{/block}">
<meta name="keywords" content="{block name='head_seo_keywords'}{$page.meta.keywords}{/block}">
{if $page.meta.robots !== 'index'}
<meta name="robots" content="{$page.meta.robots}">
{/if}
{if $page.canonical}
<link rel="canonical" href="{$page.canonical}">
{/if}
{block name='head_hreflang'}
{foreach from=$urls.alternative_langs item=pageUrl key=code}
<link rel="alternate" href="{$pageUrl}" hreflang="{$code}">
{/foreach}
{/block}
{/block}
<!-- ------------- Facebook Pixel Code --------------------->
<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', 'TUO-CODICE-PIXEL');
fbq('track', 'PageView');
</script>
<noscript>
<img height="1" width="1"
src="https://www.facebook.com/tr?id=TUO-CODICE-PIXEL&ev=PageView
&noscript=1"/>
</noscript>
<!------------------ End Facebook Pixel Code ----------------------->
{block name='head_viewport'}
<meta name="viewport" content="width=device-width, initial-scale=1">
{/block}
{block name='head_icons'}
<link rel="icon" type="image/vnd.microsoft.icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
<link rel="shortcut icon" type="image/x-icon" href="{$shop.favicon}?{$shop.favicon_update_time}">
{/block}
{block name='stylesheets'}
{include file="_partials/stylesheets.tpl" stylesheets=$stylesheets}
{/block}
{block name='javascript_head'}
{include file="_partials/javascript.tpl" javascript=$javascript.head vars=$js_custom_vars}
{/block}
{block name='hook_header'}
{$HOOK_HEADER nofilter}
{/block}
{block name='hook_extra'}{/block}
Prima di copiare il file cosi modificato, assicuratevi di aver eseguito una copia di backup, solo dopo si andrà sostituire il file head.tpl con il pixel Facebook.
Come testare il Pixel di Facebook su Prestashop
Una volta copiato il file sarà necessario testare il corretto funzionamento del pixel utilizzando l'estensione per Chrome Facebook Pixel Helper
Facebook Analytics non sarà più disponibile a partire dal 30 giugno 2021 (giusto per rendere la vita più difficile quando ormai hai fatto pratica con un sistema) pertanto si raccomanda una lettura più approfondita nella pagina Facebook di riferimento: Facebook Analytics non sarà più disponibile