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.

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

  • francesco

    Cia antonio, potresti mettere anche l’esempio dle contenido web con o snippet del contenitore

    • Antonio Musarra

      Buongiorno Francesco. Nel pomeriggio vedrò di aggiornare l’articolo con le informazioni che hai chiesto.

      A dopo,
      Antonio.

      • Antonio Musarra

        Ciao Francesco.
        Ho appena aggiornato l’articolo con le informazioni da te richieste.
        Fammi sapere se chiaro.

        Grazie,
        Antonio.