Come implementare Enhanced E-commerce in Clickfunnels con Google Tag Manager

Enhanced E-commerce in Clickfunnels

Il tracciamento dei dati in un e-commerce è una tecnica vitale per la sopravvivenza e la crescita del business stesso.

Solo che, non è affatto facile implementare il tracciamento su un sito dove si esecutano delle vendite.

Specialmente se si chiama Clickfunnels!

In WordPress, Magento, Shopify etc, è un’idea più facile purché esistono dei plugin dedicati.

Per esempio, per Woocommerce esiste il plugin Duracell Tommi, che si occupa di creare e aggiornare il Data Layer con tutte le informazioni necessarie al tracciamento.

Tracciare i dati e-commerce è fondamentale per poter monitorare l’andamento di una strategia di marketing.

Sapere quale direzione prendere in base ad essi è perlomeno essenziale.

Questo se non si vuole lasciare niente al caso e alla fortuna.

Dal punto di vista tecnico realizzare ciò è davvero una sfida se non si è già un developer con solide conoscenze di Javascript.

In Clickfunnels, aihme, è ancora più complicato che in Woocomemrce.

Per Clickfunnels non esiste nessun plugin che inietti il Data Layer con le informazioni necessarie a Google Analytics Enhanced E-commerce.

Il tracciamento avviene in modo laborioso, andando a fare lo scraping del Dom e usando il metodo push per aggiornare il Data Layer.

Per il monitoraggio dei dati all’interno di un e-commerce esistono due librerie JavaScript che abilitano il tracciamento delle transazioni e di tutti quei dati che possono essere passati a Google Analytics.

E-commerce Standard,

Con l’e-commerce standard è possibile tracciare i dati della transazione e dei prodotti acquistati.

In particolare:

  • id della transazione

  • la revenue e cioè il valore dell’acquisto

  • l’ammontare delle spese di spedizione

  • le tasse della transazione.

Poi esiste Enhanced E-commerce, che vedremo come attuare in quest’articolo.

Enhanced E-commerce invece può tracciare molti più dati:

  • Visualizzazione prodotto

  • Click prodotto

  • Dettaglio prodotto

  • Aggiunta al carrello

  • Rimozione dal carrello

  • Utilizzo dei coupon

  • Comportamento di acquisto dell’utente

  • Comportamento di Checkout

  • Visualizzazione delle promo

  • Click delle promo

E molti altri dati fondamentali per la strategia dell’e-commerce.

Guide ufficiali di Google all’implementazione dell’e-commerce base ed e-commerce avanzato:

Guida all’ Ecommerce Standard

Guida all’Enhanced E-commerce

Vediamo come si possa realizzare il tracciamento Enhanced E-commece in Clickfunnels con Google Tag Manager:

Prima di tutto ti devi accertare che Enhanced E-commerce è accesso nell’account Analytics.

Assicurati di creare gli step per il checkout come nella foto:

Enhanced E-commerce Analytics accesso

Poi, dobbiamo aggiungere un cookie nella sezione Header del nostro Funnel:

/*<script>

;(function(factory){var registeredInModuleLoader=false;if(typeof define===’function’&&define.amd){define(factory);registeredInModuleLoader=true;}

if(typeof exports===’object’){module.exports=factory();registeredInModuleLoader=true;}

if(!registeredInModuleLoader){var OldCookies=window.Cookies;var api=window.Cookies=factory();api.noConflict=function(){window.Cookies=OldCookies;return api;};}}(function(){function extend(){var i=0;var result={};for(;i<arguments.length;i++){var attributes=arguments[i];for(var key in attributes){result[key]=attributes[key];}}

return result;}

function init(converter){function api(key,value,attributes){var result;if(typeof document===’undefined’){return;}

if(arguments.length>1){attributes=extend({path:’/’},api.defaults,attributes);if(typeof attributes.expires===’number’){var expires=new Date();expires.setMilliseconds(expires.getMilliseconds()+attributes.expires*864e+5);attributes.expires=expires;}

attributes.expires=attributes.expires?attributes.expires.toUTCString():”;try{result=JSON.stringify(value);if(/^[\{\[]/.test(result)){value=result;}}catch(e){}

if(!converter.write){value=encodeURIComponent(String(value)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent);}else{value=converter.write(value,key);}

key=encodeURIComponent(String(key));key=key.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent);key=key.replace(/[\(\)]/g,escape);var stringifiedAttributes=”;for(var attributeName in attributes){if(!attributes[attributeName]){continue;}

stringifiedAttributes+=’; ‘+attributeName;if(attributes[attributeName]===true){continue;}

stringifiedAttributes+=’=’+attributes[attributeName];}

return(document.cookie=key+’=’+value+stringifiedAttributes);}

if(!key){result={};}

var cookies=document.cookie?document.cookie.split(‘; ‘):[];var rdecode=/(%[0-9A-Z]{2})+/g;var i=0;for(;i<cookies.length;i++){var parts=cookies[i].split(‘=’);var cookie=parts.slice(1).join(‘=’);if(cookie.charAt(0)===’”‘){cookie=cookie.slice(1,-1);}

try{var name=parts[0].replace(rdecode,decodeURIComponent);cookie=converter.read?converter.read(cookie,name):converter(cookie,name)||cookie.replace(rdecode,decodeURIComponent);if(this.json){try{cookie=JSON.parse(cookie);}catch(e){}}

if(key===name){result=cookie;break;}

if(!key){result[name]=cookie;}}catch(e){}}

return result;}

api.set=api;api.get=function(key){return api.call(api,key);};api.getJSON=function(){return api.apply({json:true},[].slice.call(arguments));};api.defaults={};api.remove=function(key,attributes){api(key,”,extend(attributes,{expires:-1}));};api.withConverter=init;return api;}

return init(function(){});}));

</script>*/

 

Enhance E-commerce cokkie nella Header del funnel in Clickfunnels

Dopo, aggiungiamo quest’altro pezzettino di codice nella pagina di Ordinazione (order Page), nei settings – tracking code!

 

/*<script>

   dataLayer.push({

     ‘event’: ‘OrderForm’

   });

</script>*/

Header Clickfunnels Data layer push

Questo pezzo di codice crea un evento push nella Data Layer della pagina di ordinazione.

In Data Layer le informazioni, cioè i parametri saranno poi aggiornate dinamicamente.

Adesso vai in Tag Manager e crea un nuovo tag.

Lo devi chiamare: dataLayer.OrderForm

Scegli Custom HTML e incolla questo codice:

 

/*<script>

jQuery(function($){     

   $(‘[href=”#submit-form”]’).click(function(){

     var prodName = $(‘.product-name:eq(0)’).text();

     var prodAddon = $(‘.product-name:eq(1)’).text();

     var getPrice = $(‘.product-price:eq(0)’).text().substr(1);

     var getUpgrade = $(‘.product-price:eq(1)’).text().substr(1);

     var totalPurchase = parseFloat(getPrice || 0) + parseFloat(getUpgrade || 0);

    

     //Save Total Price

     Cookies.set(‘price’, totalPurchase);

     Cookies.set(‘ispurchase’, ‘1’);

    

     //Save Product Names

     Cookies.set(‘prodName’, prodName);

     Cookies.set(‘prodAddon’, prodAddon);

    

     //Save Product Price

     Cookies.set(‘productPrice’, getPrice);

     Cookies.set(‘addonPrice’, getUpgrade); 

    })  

     //Generate Transaction ID

     var TSID = randomNumberFromRange(100000000, 999999999);

     function randomNumberFromRange(min,max){return Math.floor(Math.random()*(max-min+1)+min);}

     Cookies.set(‘TSID’, TSID);

});

</script>*/

Tag data Layer Order Form Clickfunnels

Adesso crea un attivatore di tipo evento e chiamalo: trigger.OrderForm

Nella parte dell’evento incolla: OrderForm
Salva tutto.

attivatore Order Form ClickfunneEnhanced E-commerce

Invieremo questi dati in Analytics.

I dati inviati contengono i dettagli del prodotto, il prezzo, etc.

Vai adesso alla pagina dove hai il primo upsell, One Time Offer .

Cioè, la prossima pagina con un offerta di un prodotto, seguente alla order page della prima offerta dove avevamo incollato il push.datalayer,

Aggiungi questo codice nei settings, tracking code come nella foto:

/*<script>

dataLayer.push({

  ‘event’: ‘OTO1Page’

});

</script>*/

Data Layer push in OTO1 Clickfunnels

Crea un nuovo tag e chiamalo: conversion.dataLayer,

Il tag sarà un custom HTML dove andari a incollare questo codice (dovresti modificare i SKU id):

 

/*<script>

var isAddon = Cookies.get(‘prodAddon’);

if(isAddon != ”){

dataLayer.push({

          ‘transactionId’: ‘{{TSID}}’,

          ‘transactionTotal’: {{totalPrice}},

          ‘transactionProducts’: [{

              ‘sku’: ‘SKU-1111111111’,

              ‘name’: ‘{{productName}}’,

              ‘category’: ‘Sample Category’,

              ‘price’: {{productPrice}},

              ‘quantity’: 1

          },

          {

              ‘sku’: ‘SKU-2222222222’,

              ‘name’: ‘{{productAddon}}’,

              ‘category’: ‘Sample Category’,

              ‘price’: {{addonPrice}},

              ‘quantity’: 1

          }],

          ‘event’: ‘transactionComplete’

      });

}

else {

dataLayer.push({

          ‘transactionId’: ‘{{TSID}}’,

          ‘transactionTotal’: {{totalPrice}},

          ‘transactionProducts’: [{

              ‘sku’: ‘SKU-1111111111’,

              ‘name’: ‘{{productName}}’,

              ‘category’: ‘Sample Category’,

              ‘price’: {{productPrice}},

              ‘quantity’: 1

          }],

          ‘event’: ‘transactionComplete’

      }); 

}

</script>*/

conversion Data Layer Tag Clickfunnels

Adesso devi creare un trigger per questo tag. Scegli event trigger e chiamalo: trigger.OTO1
Nella parte dell’event scrivi: OTO1Page

attivatore OTO1 Enhanced E-commerce Clickfunnels
Salva tutto.

Adesso dobbiamo creare le variabili.

In Tag Manager vai alla voce variabili e crea nuova variabile definita dall’utente, come nella foto:

variabile 1Part cookie Clickfunnels Enhanced E-commerce

Chiama la variabile: productName

Scegli Cookie Proprietario come tipo di variabile.

Come nome dovresti scrivere: prodName, come nella foto:

Adesso, simile a questa variabile che abbiamo costruito qua sopra, ne devi costruire altre 5.

In totale devi avere 6 variabili.

I nomi della variabili sono:

1. productAddon , nome cookie prodAddon
2. totalPrice , nome cookie price,
3. productPrice , nome cookie productPrice,
4. addonPrice , nome cookie addonPrice,
5. TSID , nome cookie TSID

Alla fine devi avere 6 variabili come nella foto:

variabili tracciamento Enhanced E-commerce in Clickfunnels

Per inviare i dati in Analytics, adesso abbiamo bisogno di un altro tag.

Il nome del tag sarà: event.eCommerceTransaction,

Il tipo di tag: Universal Analytics,

Tipo di monitoraggio: Transazione,

Impostazioni Google analytics, la constante con l’ID di Analytics (che avevi impostato quando hai aggiunto l’Analytics a Clickfunnels con il Tag Manager).

Nelle impostazioni della variabile, devi abilitare il tracciamento e-commerce avanzato e aggiungere event nel campo “dati letti dalla variabile”, come nella foto:

variabile GAUID ehanced e-commerce abilitato

(Probabilmente hai chiamato diversamente la variabile, sii attento ad inserire in nome coretto).

Adesso creiamo un trigger cioè un attivatore che attiverà il tag di Analytics.

Selezioniamo Custom Event come attivatore e scriviamo nella casella Nome evento: transactionComplete,

Diamo il nome di: trigger.transactionComplete all’attivatore (come nella foto) .

trigger transaction complet Enhanced E-commerce Clickfunnels

Adesso, tutto è impostato.

Dobbiamo solo controllare se esistono dei conflitti jQuery.

Clickfunnels supporta jQuery come default, ma è meglio se verifichiamo.

Andiamo nelle pagine dove avevamo incollato il codice, cioè, la order page e l’upsell (se te lo ricordi), e apriamo la console.

Click destra sulla pagina, Ispeziona.

jQuery libreria Clickfunnels

Se vediamo questa scritta in rosso, vuol dire che dobbiamo aggiungere la libreria jQuery.

Per fare questo, dobbiamo andare nelle impostazioni del funnel, nella sezione Header code (dove avevamo incollato il cookie se ricordi – lo devi trovare – e aggiungere sopra il script del cookie che avevamo incollato questa linea di codice:

/*<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>*/

Salviamo le impostazioni del funnel.

Io ho trovato questo metodo  in internet a una ricerca sul come implementare Enhanced E-commerce in Clickfunnels.

Come ti dicevo io l’ho testato è funziona benissimo.

Adesso, implementare Enhanced E-commere in Clickfunnels è abbastanza relativo. Le offerte sono quasi uniche per pagina e si possono usare i gols in Analytics per misurare il comportamento dell’utente, come visualizzazione di pagina. 

Tuttavia, l’enhanced e-commerce passa più info ad Analytics e in questo senso è una buona pratica. 

Quindi se lo vuoi implementare e non ti riesce, me lo chiedi e ti aiuto, soprattutto se hai aperto il tuo account Clickfunnels dal pulsante sotto, lo faccio gratis!

Apri un account Clickfunnels dal pulsante qua sotto e chiedimi di implementare Enhanced E-commerce nel tuo funnel.