Javascript, HTML, CSS e... !
0 commenti

Add-on per Spreadsheet

Lista dei containers di Google Tag Manager in Spreadsheet con Google Apps Script

Uno degli strumenti Google con cui è possibile interfacciarsi tramite Apps Script è Google Tag Manager, un sistema di gestione Tag molto utile per agevolare l'implementazione e la gestione di attività di tracciamento e di marketing nei propri siti web ed app mobile.

Dalla documentazione ufficiale (TagManager Service) è possibile prendere spunto da blocchi di script pronti all'uso per la generazione di un container con tag, trigger e variabili, così come per la pubblicazione di un container o per la sua messa in preview. Validi spunti per l'automatizzazione di processi spesso effettuati manualmente quanto pericolosi se non si ha piena coscienza di ciò che vogliamo far fare al nostro script in termini di modifica e scrittura di dati, con il rischio di andare a danneggiare quanto fino a quel momento presente e funzionante.

Giocando con le API di GTM messe a disposizione (Google Tag Manager API) è possibile inoltre realizzare alcune utility più sobrie, che non hanno necessità di scrivere dati bensì di leggerli. Un valido tool da realizzare su cui basare una add-on per Spreadsheet, prendendo spunto da uno script in Google Apps Script, gtm-hierarchy, di Simo Ahava (un guru nello sviluppo in JS per Google Tag Manager) che riporto direttamente con una piccola modifica che ho aggiunto per evitare un'eccezione in caso di account senza container e con qualche commento esplicativo, è quello che permette di recuperare la gerarchia di account e containers del proprio GTM.

Per fare un esempio, ponendo che i nostri account/containers in GTM siano i seguenti, Fig. 1:



Lista degli account e dei containers in Google Tag Manager

Fig. 1 - Lista degli account e dei containers in Google Tag Manager


L'add-on per Spreadsheet, una volta avviata dal menu 'Componenti aggiuntivi -> Lista dei containers di Google tag Manager -> Recupera la lista dei containers' effettuerà le chiamate a metodi ed API di Tag Manager e Spreadsheet per la scrittura delle informazioni nel foglio di calcolo, Fig. 2:



Elenco degli account e dei containers di Google Tag Manager in Google Spreadsheet

Fig. 1 -Elenco degli account e dei containers di Google Tag Manager in Google Spreadsheet


Per realizzare il tool appena descritto sarà necessario integrarlo come bound script pertanto, da un nuovo Spreadsheet, selezionare la voce di menu 'Strumenti -> Editor di script...' e nel file .gs  all'interno dell'interfaccia di Apps Script copiare ed incollare il seguente codice:

function listAccounts() {
  // API per il recupero della lista di tutti gli account di GTM per l'utente in corso
  return TagManager.Accounts.list({
    fields: 'account(accountId,name)'
  }).account;
}

function listContainers(accountId) {
  // API per il recupero della lista di tutti i containers in base all'ID dell'account passato
  return TagManager.Accounts.Containers.list(
    'accounts/' + accountId,
    {fields: 'container(name,publicId)'}
  ).container;
}

function getContainers(accounts) {
  var accountsAndContainers = [];
  // Per ogni container inserisce in un array:
  // il nome del relativo account, il suo nome ed il suo ID pubblico (GTM-XXXXX)
  accounts.forEach(function(account) {
    var containerList = listContainers(account.accountId);
    if (!containerList) {
      accountsAndContainers.push([ account.name, '', '' ]);
      return accountsAndContainers;
    }
    containerList.forEach(function(container) {
      accountsAndContainers.push([
        account.name,
        container.name,
        container.publicId
      ]);
    });
  });
  return accountsAndContainers;
}

function getAccounts() {
  var accountsList = listAccounts();
  return getContainers(accountsList);
}

function buildRows(sheet,hierarchy,numColumns) {
  var range = sheet.getRange(2,1,hierarchy.length,numColumns);
  range.setValues(hierarchy);
}

function buildHeaders(sheet, headers) {
  var range = sheet.getRange(1,1,1,headers.length);
  range.setValues([headers]);
}

function buildSheet() {
  // Definizione della riga di intestazione dello Spreadsheet
  var headers = ['Account name', 'Container name', 'Container ID'];
  
  // Nome dello sheet
  var sheetName = 'GTM Containers List';
  
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName(sheetName);
  var hierarchy;
  
  // Se lo Spreadsheet non ha un foglio con il nome sopra definito, ne crea uno
  if (!sheet) {
    sheet = SpreadsheetApp.getActiveSpreadsheet().insertSheet(sheetName);
  } else {
    sheet.clear();
  }
  
  // Aggiunge allo Spreadsheet l'intestazione definita nella variabile 'headers'
  buildHeaders(sheet, headers);
  
  // Recupera, nella variabile 'hierarchy', l'intera gerarchia dei containers del GTM
  hierarchy = getAccounts();
  
  // Aggiunge allo Spreadsheet i dati recuperati per ciascun container
  buildRows(sheet, hierarchy, headers.length);
}

function onOpen() {
  // Crea il menu personalizzato nell'interfaccia dello Spreadsheet
  var menu = SpreadsheetApp.getUi().createAddonMenu();
  menu.addItem('Recupera la lista dei containers', 'buildSheet');
  menu.addToUi();
}

Avvalendosi dei metodi e delle API di Tag Manager e di Spreadsheet dovranno essere attivati, dall'editor di script di Apps Script, i servizi avanzati di Google (dal menu 'Risorse -> Servizi avanzati di Google'), nel caso specifico Google Sheets API e Tag Manager API abilitandoli anche nella Console API Google.

Tags

Michele Pisani

Michele Pisani

Sviluppatore Javascript ed esperto in Digital Analytics

L'esperienza nel settore Digital Analytics unita ad anni di sviluppo in Javascript ha trovato la massima espressione in Google Apps Script che mi ha permesso, con estrema facilità e poche righe di codice, di realizzare potenti applicazioni interattive e processi automatizzati integrati con i prodotti della G Suite.

Come contattarmi
scrivi un commento

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
Puoi utilizzare i seguenti tag nei commenti:
[bold]testo[/bold] se vuoi evidenziare un testo con il grassetto[code]function helloworld() { }[/code] se vuoi pubblicare una porzione di codice[url]http://www.appsscript.it[/url] se devi riferirti ad un indirizzo web