MICHELEPISANI.IT
 

Tramite l'utilizzo del metodo watch()

Rilevare il cambiamento di Valore di una Variabile Senza Evento in GTM

google tag manager - rilevare il cambiamento di valore di una variabile senza trigger
Dicembre 28
07:272016

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:

Google Tag Manager - metodo watch - html

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:

Google Tag Manager - metodo watch - Tags

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):

Google Tag Manager - metodo watch - Tag watched

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:

Google Tag Manager - metodo watch - variabili

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":

Google Tag Manager - metodo watch - recupero del valore aggiornato della 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:

Google Tag Manager - metodo watch - avvio pagina web con gtm in preview

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':

Google Tag Manager - metodo watch - push al dataLayer del primo valore

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.

Google Tag Manager - metodo watch - push al dataLayer del secondo valore

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.

Google Tag Manager - metodo watch - push al dataLayer ancora del secondo valore e poi del primo

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...

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Umberto

Grazie Michele, in realtà faccio un po' fatica a districarmi con l'assistenza di FB... Ora provo e …

Michele Pisani

Ciao Umberto,
hai provato a contattare il supporto tramite la community?

Umberto

Salve, dopo un paio di mesi di tentativi e di modifiche, sono riuscito a far partire la procedura …

Rosa

Salve. Sto unendo due Pagine. Tutto è stato da me 'omogeneizzato', quindi coi nomi simili ci siamo …