Come integrare Google Tag Manager in Liferay

Di recente mi è stato chiesto se fosse fattibile integrare Google Tag Manager su di un portale realizzato con Liferay e in tempi brevissimi (un giorno). Confesso che fino a quel momento non avevo completamente idea di cosa fosse Google Tag Manager, eppure il progetto esiste dal lontano 2012. La richiesta mi ha spiazzato un pò ma ho dato comunque una risposta da “commerciale”: l’integrazione è semplice, si può fare tranquillamente anche in un giorno.

Integrare Google Tag Manager vuol dire inserire in ogni pagina del vostro portale uno snippet (frammento di codice html) fornito dal servizio stesso di Google. Questo frammento di codice (mostrato a seguire) deve essere inserito subito dopo il tag body e contiene un codice (del tipo GTM-XXXXX) che identifica il contenitore che avete definito.

Rispetto alla versione standard del javascript, in questa versione è stata inserita una variabile chiamata dataLayer. Questa variabile è un oggetto che contiene informazioni utili da passare a Google Tag Manager.

 

La soluzione d’integrazione che ho ritenuto in quel momento ideale e veloce da applicare a Liferay è stata:

  1. La creazione di un Web Content sul sito d’interesse contenente lo snippet del contenitore (mostrato precedentemente);
  2. Modifica del template del tema applicato al sito del portale in modo da inserire il contenuto del Web Content (che ricordo contiene lo snippet del contenitore) subito dopo il tag body.
Creazione del Web Content per il codice javascript di Google Tag Manager

Figura 1 – Creazione del Web Content per il codice javascript di Google Tag Manager

In pratica cos’è necessario fare? Semplicemente questo:

  1. Modificare il file di configurazione del tema liferay-look-and-feel.xml aggiungendo un proprietà al tema chiamata per esempio GoogleTagManagerSnippet e valorizzata con l’id del Web Content dello snippet;
  2. Utilizzare la variabile Apache Velocity $journalContentUtil richiamando il metodo getContent() il quale è responsabile di recuperare il contenuto del Web Content definito in precedenza. La modifica in genere va eseguita sul file init_custom.vm e il file portal_normal.vm.

A seguire i frammenti di codice che consentono di raggiungere l’obiettivo sperato. Dopo il deploy del tema, su ogni pagina del vostro portale sarà inserito il frammento di codice di Google Tag Manger.

Codice Javascript di Google Tag Manager iniettato tramite il tema

Figura 2 – Codice Javascript di Google Tag Manager iniettato tramite il tema

Un post davvero molto veloce ma spero utile per qualcuno di voi. A presto.

0 Condivisioni

Antonio Musarra

I began my journey into the world of computing from an Olivetti M24 PC (http://it.wikipedia.org/wiki/Olivetti_M24) bought by my father for his work. Day after day, quickly taking control until … Now doing business consulting for projects in the enterprise application development using web-oriented technologies such as J2EE, Web Services, ESB, TIBCO, PHP.

Potrebbero interessarti anche...

Cos'è il progetto CIE/CNS Apache Docker - Developers Italia

In questo video https://youtu.be/TcAzn1POhsM introdurrò il progetto CIE/CNS Apache Docker di Developers Italia (https://developers.italia.it/it/cie/#resourcecontent-3) nato circa due anni fa.

L'obiettivo di questo progetto è quello di fornire un template pronto all'uso che realizza un sistema di autenticazione tramite la Smart Card TS-CNS (o CNS) e la CIE (Carta d'Identità Elettronica) basato su Apache HTTP. Ognuno può poi modificare o specializzare questo progetto sulla base delle proprie esigenze Si tratta di un progetto docker per la creazione di un container che implementa un sistema di mutua autenticazione o autenticazione bilaterale SSL/TLS.

Questo meccanismo di autenticazione richiede anche il certificato digitale da parte del client, certificato che in questo caso risiede all'interno della TS-CNS o della CIE. La particolarità del sistema implementato (attraverso questo container) è quella di consentire l'autenticazione tramite:

  • La TS-CNS (Tessera Sanitaria - Carta Nazionale Servizi), rilasciata dalla regione di appartenenza;
  • La CIE (Carta d'Identità Elettronica), rilasciata dal comune di residenza.

Nella versione 2.0.0 il progetto è stato aggiornato per essere uniforme alle linee guida di Bootstrap Italia. A seguire alcune risorse che possono essere utili.

  • Cos’è il progetto CIE/CNS Apache Docker (http://bit.ly/3aJ5Gbl)
  • CIE Carta d'Identità Elettronica (https://developers.italia.it/it/cie/)
  • Carta Nazionale dei Servizi (https://www.agid.gov.it/it/piattaforme/carta-nazionale-servizi)
  • Raspberry Pi – Un esempio di applicazione della TS-CNS (https://bit.ly/3hkJ8Aj)
  • Pubblicare il servizio CIE/CNS Apache Docker su Azure Cloud (http://bit.ly/3aPoq8V)
  • Come accedere al portale VETINFO tramite TS-CNS e Mac OS (http://bit.ly/2VFMKq7)