Passa ai contenuti principali

Setup Google Tag Manager con PrestaShop per l'e-commerce avanzato

Google Tag Manage e E-commerce Avanzato

all’interno della documentazione ufficiale è descritto sia il processo che il codice di implementazione per il monitoraggio avanzato dell’e-commerce
In breve il codice da inserire deve essere un array tipo dataLayer che contiene una serie di informazioni per il monitoraggio di:
  • impressioni di prodotto e di categoria
  • dettaglio di prodotto
  • checkout
  • acquisto
Sono presenti anche i meccanismi per il monitoraggio delle promozioni, per l’annullamento ordine e per l’aggiunta dinamica del prodotto in carrello
Nel caso del modulo BwAnalytics sono monitorati i primi 4.

Google Tag Manager

L’attivazione dell’ecommerce avanzato si effettua sulla vista di Google Analytics e si impostano i nomi degli step del processo di checout mappati all’interno del codice
Limpostazione di Google Tag Manager per l’e-commerce avanzato richiede la greazione di 3 tag:
  1. impressioni e dattagli categoria e prodotto
  2. checkout
  3. acquisto

pagine prestashop coinvolte

Su prestashop le pagine di:
  • prodotto terminano sempre per “.html”
  • checkout contengono la parola “ordine” nell’url
  • acquisto contiene la stringa “conferma-ordine” nell’url
Comunque su prestashop è possibile impostare le le url delle pagine appositamente per distinguere la pagina categoria dalla pagina prodotto dalle altre pagine, facendo attenzione al seo già acquisito

caratteristiche tag da impostare

I tag su Google Tag Manager sono di tipo Universal Analytics e devono avere come tipo di monitoraggio “visualizzazione Pagina”.
Nei tag in creazione deve essere abilitata l’opzione “attiva funzioni ecommerce avanzate” e “usa livello dati” sotto “altre impostazioni” e “Funzioni ecommerce (beta)”

regole di attivazione dei tag

I Tag in creazione devono attivarsi solo quando incontrano le pagine mappate sopra
  • impressioni di prodotto e di categoria: regola in cui l’url non contiene la parola “ordine”, per non mappare il checkout; regola in cui l’url non contiene la parola “module”, per vitare altre pagine non pertinenti; regola in cui l’evento è uguale a “gtm.js”
  • dettaglio di prodotto: come sopra, quindi basta un tag
  • checkout: regola in cui l’url contiene la parola “ordine”; regola in cui l’evento è uguale a “gtm.js”
  • acquisto: regola in cui l’url contiene la parola “conferma-ordine”; regola in cui l’evento è uguale a “gtm.js”

verificare il funzionamento

se avete Google Chrome potete installare il Tag Assistant che vi permette di monitorare tutti i tag di Google Tag Manager e anche il Data Layer dell'enhanced e-commerce


Se vuoi semplificare l'installazione

noi abbiamo sviluppato un modulo ad hoc: http://www.bwlab.it/product/google-analytics-extended/

Commenti

Post popolari in questo blog

install language on osTicket

this simple guide aims you to install and configure your language on osTicket i written this guide based on forum post http://osticket.com/forum/discussion/76252/installing-language-pack

Develop Prestashop Module - puntata 1 creazione di un modulo prestashop

la creazione o lo sviluppo di un modulo   Prestashop funziona sia per il front-end che il back-end del sistema la struttura di un modulo è fissa che si compone con una serie di step: file di configurazione file di installazione files controllers per l'amministrazione files controllers per il frontend files delle view creazione dell'infrastruttura base del modulo per Frontend all'interno della cartella modules di prestashop creare una cartella  esempio     <root>          |---modules                    |-----miomodulo naturalmente il nome del modulo lo potete personalizzare all'interno della cartella miomodulo  creare i seguenti file config.xml index.php miomodulo .php   <-- inserite il vostro nome modulo al posto di mio modulo index.php il codice di index php , file che dovrà essere inserito in ogni cartella : <?php /* ...

Vue.js inline component

title: Componente Vue.js inline browser tags: vue.js, single file component vue.js Come creare un componente con Vue.js? Come crearlo e come usarlo direttamente nella pagine? Mi trovo in diversi progetti a bisticciare con jquery che ritengo un ottimo tool, ma non supremo. In ogni progetto possono esistere più tecnologie per risolveere problemi diversi. La SPA la preferisco con React o Angular, ma per creare dei componenti ad hoc o uso Polymer o Vue. Senza scomodare l’intero scaffolding di progetto è possibile creare un semplice componente ed usarlo nella pagina del browser senza fare il transpiling. Come iniziare. Preparo la base di folder. Come server uso quello integrato in php. mkdir vuewjs cd vuejs php -S localhost:8080 touch index.html google-chrome index.html Io uso Ubuntu e quelli sopra sono semplici comandi shell che creano un folder vuejs e dentro creano un file html e avviano il server presente in php7; infine apro con chrome la pagina index.hml. Pagina base Ora prep...