Premetto che lo scopo di questo articolo è a puro titolo sperimentale e che, in Google Tag Manager, rilevare il valore di una variabile inviata al dataLayer (e successivamente gestirla all'occorrenza) è molto più solido ed efficace farlo tramite un evento di accompagnamento, tuttavia l'idea potrebbe rivelarsi utile in determinate circostanze o dare adito a nuovi sviluppi.
Solitamente, nel caso di invio di un valore di variabile al dataLayer, quello che di consueto avviene è effettuare un push, appunto, al dataLayer passando il valore della variabile in oggetto insieme ad un evento di accompagnamento che poi verrà gestito da Google Tag Manager, come nell'esempio seguente:
button.addEventListener('click', function() {
dataLayer.push({
'event' : 'myevent',
'myvar' : '5'
});
}, false);
Allo stesso modo siamo abituati a non vedere alcun effetto tangibile nel caso venga passata la sola variabile senza l'evento di accompagnamento, come nel caso di questo esempio:
button.addEventListener('click', function() {
dataLayer.push({
'myvar' : '5'
});
}, false);Sperimentando un po' con Google Tag Manager ho notato che tramite il metodo watch() è possibile identificare il cambiamento di valore di una variabile passando solamente quest'ultima senza essere affiancata da nessun evento.
Per far questo mi sono avvalso dello snipped object-watch.js disponibile su GitHub e che riporto di seguito:
// object.watch
if (!Object.prototype.watch) {
Object.defineProperty(Object.prototype, "watch", {
enumerable: false
, configurable: true
, writable: false
, value: function (prop, handler) {
var
oldval = this[prop]
, newval = oldval
, getter = function () {
return newval;
}
, setter = function (val) {
oldval = newval;
return newval = handler.call(this, prop, oldval, val);
}
;
if (delete this[prop]) { // can't watch constants
Object.defineProperty(this, prop, {
get: getter
, set: setter
, enumerable: true
, configurable: true
});
}
}
});
}
// object.unwatch
if (!Object.prototype.unwatch) {
Object.defineProperty(Object.prototype, "unwatch", {
enumerable: false
, configurable: true
, writable: false
, value: function (prop) {
var val = this[prop];
delete this[prop]; // remove accessors
this[prop] = val;
}
});
}Il test che ho effettuato è relativamente semplice ovvero, ho creato una pagina web con due bottoni che inviano al dataLayer un diverso valore per una determinata variabile (senza evento di accompagnamento); da GTM raccolgo la variabile ed automaticamente, tramite il metodo watch, viene controllato se il suo valore è diverso da quello precedente ed agisco di conseguenza (nel caso specifico mi limito a scrivere in console il valore precedente e quello appena inviato), il tutto senza l'utilizzo di nessun trigger (a parte ovviamente quello di inizializzazione, 'All pages', per avviare il metodo in oggetto al caricamento della pagina).
Più nel dettaglio, la pagina web contenente i due bottoni che inviano al dataLayer la variabile con diverso valore (nel caso specifico, a titolo esemplificativo, il primo bottone valorizza la variabile con '5' mentre il secondo con '19') è la seguente:
Fig. 1 - Google Tag Manager - metodo watch() - Pagina HTML con bottoni per invio variabile valorizzata al dataLayer
Di seguito il codice per eventuale copia/incolla:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>My first HTML document</TITLE>
<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ 'mia_variabile' : '1' });
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-K78QWQC');</script>
<!-- End Google Tag Manager -->
</HEAD>
<BODY>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-K78QWQC"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<button id="btn1">push value '5'</button>
<button id="btn2">push value '19'</button>
<script>
btn1.addEventListener('click', function() {
dataLayer.push({'mia_variabile' : '5'});
}, false);
btn2.addEventListener('click', function() {
dataLayer.push({'mia_variabile' : '19'});
}, false);
</script>
</BODY>
</HTML>In Google Tag Manager i Tags utilizzati sono stati i seguenti:
Fig. 2 - Google Tag Manager - metodo watch() - Tags
Quello chiamato "HTML - object-watch.js" contiene il codice Javascript dello snipped precedentemente discusso, mentre quello chiamato "HTML - functs based vars whatched" contiene il codice per creare l'oggetto contenente la variabile "da monitorare" e filtra in base al cambiamento del suo valore (scrivendo il risutato in console):
Fig. 3 - Google Tag Manager - funzione per determinare il cambiamento del valore della variabile
Per il copia/incolla:
<script>
mia_variabile_oldval = '';
mia_variabile_newval = '';
var myObject = {"mia_variabile" : {{DLV mia_variabile}}};
myObject.watch("mia_variabile", function (id, oldval, newval) {
if (newval != oldval) {
mia_variabile_oldval = oldval;
mia_variabile_newval = newval;
console.log(mia_variabile_oldval + '|' + mia_variabile_newval);
}
return newval;
});
</script>La sezione "Trigger" come anticipato è vuota, mentre nella sezione "Variabili" ho inserito:
Fig. 4 - Google Tag Manager - variabili utilizzate
Dove "DLV mia_variabile" non è altro che una variabile di tipo dataLayer con nome "mia_variabile", mentre "JS watched DLV mia_variabile" contiene il codice che ritorna alla funzione nel Tag, vista precedentemente, il valore aggiornato della variabile "mia_variabile":
Fig. 5 - Google Tag Manager - recupero del valore aggiornato della variabile
Di seguito il codice per eventuale copia/incolla:
function() {
myObject.mia_variabile = {{DLV mia_variabile}};
return myObject.mia_variabile;
}A questo punto non resta che effettuare dei test in Preview.
Avviando la pagina si nota che vengono semplicemente attivati i due Tags indicati:
Fig. 6 - Google Tag Manager - avvio pagina web con GTM in Preview
Successivamente cliccando sul primo bottone (push value '5') viene passata al dataLayer la variabile 'mia_variabile' valorizzata con '5' ed in console, senza che nessun trigger intervenga, viene scritto il valore che la variabile aveva in precedenza (ovvero il valore di inizializzazione, 1) insieme a, separato da un pipe, quello appena passato, appunto '5':
Fig. 7 - Google Tag Manager - push al dataLayer del primo valore
Cliccando sul secondo bottone viene scritto in console il valore che la variabile aveva in precedenza ('5') e quello nuovo ('19'), anche in questo caso senza che nessun evento venga passato e senza che alcun trigger intervenga.
Fig. 8 - Google Tag Manager - push al dataLayer del secondo valore
Come ulteriore verifica, cliccando ulteriormente sul secondo bottone si può notare (Fig. 9) che non viene scritto niente in console (in quanto dal tag si evince che la condizione per far scrivere in console è solo quella in cui il valore precedente della variabile e quello nuovo siano diversi) ma che nel dataLayer i push vengono comunque recuperati, dopodichè cliccando di nuovo sul primo bottone la differenza del valore viene rilevata e viene scritto il messaggio in console, senza che nessun trigger entri in gioco.
Fig. 9 - Google Tag Manager - push al dataLayer ancora del secondo valore e poi del primo
Con queste premesse, all'interno della funzione nel tag "HTML - functs based vars whatched" potrebbe essere inserita una serie di condizioni che, in base al valore passato, inviano al dataLayer un determinato nome di evento che attiverà a sua volta un eventuale Tag per compiere una determinata azione. Il vantaggio è sicuramente che, in caso di implementazione non corretta da parte di uno sviluppatore o in caso di modifiche a Trigger e nomi di eventi la situazione diventa più dinamicamente gestibile direttamente da Tag Manager riservando sul sito il solo invio del valore delle variabili di interesse.
Unico interrogativo che rimane aperto è che tale metodo, nelle prove da me fin'ora effettuate, funziona solo con il Tag Manager nella modalità "Preview", uscendo da tale modalità il risultato sembra venire invalidato senza che vengano indicati errori Javascript in console...
Nessuno ha ancora commentato questo articolo, fallo tu per primo!
Scrivi un Commento