Integra il tag Google nel tuo CMS o strumento per la creazione di siti web

Il tag Google è uno snippet di codice che può essere aggiunto a un sito web per misurare l'attività utente in una serie di prodotti Google, tra cui Google Analytics 4, Google Ads e Google Marketing Platform. Scopri di più sul tag Google

Questa guida descrive come integrare il tag Google nel tuo sistema di gestione dei contenuti (CMS) o nello strumento per la creazione di siti web per fornire ai tuoi utenti finali l'accesso ai prodotti di misurazione di Google.

Pubblico

Questa guida è rivolta ai proprietari di sistemi di gestione dei contenuti (CMS) o ai creator di siti web che vogliono offrire ai propri utenti un'integrazione con i prodotti di misurazione di Google. Questa guida non è destinata agli utenti di un CMS o di uno strumento per la creazione di siti web.

Prima di iniziare

Assicurati di avere un ID sviluppatore del tag Google. Se non hai un ID sviluppatore del tag Google, compila il modulo di richiesta per l'ID sviluppatore del tag Google. Il tuo ID sviluppatore è diverso da altri ID, come l'ID misurazione o l'ID conversione, che gli utenti finali aggiungono al codice di misurazione del proprio sito web.

Panoramica

Per integrare la tua piattaforma con i prodotti Google, segui questi passaggi:

  1. Creare un'integrazione con il tag Google
  2. Aggiornare la struttura degli input utente
  3. Implementare l'API Consent
  4. Configurare i dati sugli eventi
  5. Verificare l'integrazione aggiornata
  6. Aggiornare le istruzioni per l'implementazione degli utenti

Creare un'integrazione con il tag Google

Creando un'integrazione con il tag Google, i tuoi clienti possono implementare i prodotti di misurazione di Google (tramite gtag.js) in ogni pagina del loro sito. Assicurati di rimuovere eventuali integrazioni di tag precedenti esistenti (ad es. analytics.js) prima di creare un'integrazione con gtag.js.

Per creare un'integrazione con il tag Google, sostituisci lo snippet di codice esistente con lo snippet riportato di seguito. Assicurati che gli utenti possano sostituire TAG_ID con il proprio ID tag.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

Tieni presente quanto segue:

  • Gli inserzionisti possono disattivare le funzionalità di personalizzazione degli annunci come il remarketing con il parametro allow_ad_personalization_signals (consulta la sezione Disattivare la raccolta di dati per la pubblicità personalizzata.
  • Idealmente, lo snippet del tag Google dovrebbe apparire solo una volta per pagina. Lo snippet può contenere più ID tag. Se esiste già un'istanza di gtag.js, devi aggiungere nuovi ID tag al tag esistente. Scopri di più

Aggiorna la struttura dell'input utente

I clienti devono essere in grado di fornire più forme del proprio ID tag Google tramite un'unica interfaccia, indipendentemente dal prodotto di misurazione Google che stanno implementando.

Ad esempio, di seguito è riportato un semplice input del tag Google. L'integrazione deve essere inquadrata come un deployment per il tag Google. Questo può essere definito come un metodo per implementare Google Ads e Google Analytics.

Un&#39;immagine di una casella di immissione dell&#39;ID tag Google

In alternativa, il seguente diagramma mostra come una piattaforma potrebbe avere flussi utente separati per Analytics e Google Ads, ma ognuno rimanda a un'interfaccia in cui gli utenti forniscono il proprio ID tag Google.

Un&#39;immagine di Analytics e Google Ads che portano a un unico flusso di input

L'input dell'ID tag deve accettare più varianti dell'ID utilizzando il pattern di espressione regolare [A-Z]{1,3}\w{5,}[\w]*

Il tag Google ha un'API Consent integrata per gestire il consenso dell'utente. È in grado di distinguere il consenso dell'utente per i cookie a fini pubblicitari da quelli a fini di analisi.

Il risultato previsto è che i clienti ricevano almeno la chiamatagtag('consent', 'update' {...}) integrata senza alcuna azione da parte loro. In questo modo, i tag Google (Google Ads, Floodlight, Google Analytics, Linker conversioni) dovrebbero essere in grado di leggere lo stato del consenso dell'utente più recente e includerlo nelle richieste di rete a Google (tramite il parametro &gcs).

Ulteriori passaggi di implementazione potrebbero essere il deployment o l'assistenza agli inserzionisti per il deployment (ad es. tramite un'interfaccia utente) dello stato gtag('consent', default' {...}) e lo sblocco dei tag Google (ovvero nessun aggiornamento condizionale basato sul consenso) per consentire alla modalità di consenso di attivarli in base al consenso.

Per informazioni dettagliate sull'implementazione, consulta Gestire le impostazioni per il consenso (web).

Configurare i dati sugli eventi

Devi inviare dati sugli eventi completi dal sito web del cliente al suo Account Google senza che sia richiesta alcuna azione da parte del cliente. Ad esempio, potresti aggiungere gli eventi lungo una canalizzazione di acquisto (ad es. add_to_cart, begin_checkout, add_payment_info, add_shipping_info e purchase), generazione di lead e registrazioni.

Di seguito sono riportate le best practice per l'aggiunta di eventi:

  • Registra tutto ciò che è possibile
  • Configura almeno 8 eventi principali
  • Dare la priorità agli eventi di e-commerce

Registra tutto ciò che è possibile

Se possibile, devi configurare gli eventi per impostazione predefinita. È incluso quanto segue:

  • Eventi chiave, ad esempio purchase o sign_up
  • Eventi prima di eventi chiave come add_to_cart
  • Coinvolgimenti comportamentali, come le interazioni con i media, che aiutano i clienti a comprendere in che modo coinvolgono i propri utenti finali

Devi aggiungere gli snippet evento chiave solo alle pagine degli eventi chiave (ad es. conferma dell'acquisto, conferma dell'invio del modulo). Tieni presente che devi comunque aggiungere il tag Google su ogni pagina del sito.

Gli eventi vengono inviati utilizzando il comando event. tra cui lo stesso ID sviluppatore del tag Google incluso nel tag sito globale descritto sopra: 

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Ad esempio, puoi utilizzare il comando event per inviare un evento login con un valore method pari a "Google":

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Tieni presente quanto segue:

  • Il tuo ID sviluppatore <developer ID> è univoco e specifico per la tua piattaforma. Allega l'ID a ogni evento.
  • I seguenti parametri sono facoltativi e possono essere omessi:
    • 'value' è il valore numerico dell'evento chiave (ad es. il prezzo di un acquisto)
    • 'currency' è un codice valuta di tre lettere, utile per gli inserzionisti che accettano più valute
    • 'transaction_id' è un ID univoco per la transazione (ad es. un ID ordine); viene utilizzato per la deduplicazione.
  • Anche se alcuni parametri sono facoltativi, è consigliabile includere tutte le informazioni disponibili per ogni evento.
    • I parametri forniscono informazioni aggiuntive sulle modalità con cui gli utenti interagiscono con il tuo sito web o la tua app. Ad esempio, quando un utente visualizza un prodotto che vendi, puoi includere parametri che descrivono il prodotto che ha visualizzato, come nome, categoria e prezzo.
    • Alcuni parametri completano automaticamente le dimensioni e le metriche predefinite in Google Analytics e consentono agli utenti di comprendere meglio i propri clienti.

Se vuoi misurare un evento chiave in base a un clic (ad es. un clic su un pulsante o una risposta dinamica per un sito che utilizza AJAX), puoi anche utilizzare il seguente snippet:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Configura almeno 8 eventi principali

Ti consigliamo di configurare un insieme di eventi di base che hanno il maggiore valore per i proprietari di siti. Ti consigliamo di configurare almeno i seguenti eventi:

  • view_item_list: quando un utente visualizza un elenco di elementi (ad es. un elenco di prodotti). Scopri di più

    gtag('event', 'view_item_list', {
  item_list_id: "related_products",
  item_list_name: "Related products",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Item",
    currency: "USD",
    discount: 2.22,
    price: 99.9,
    quantity: 1
  }]
});

  • add_to_cart: quando un utente aggiunge uno o più prodotti a un carrello degli acquisti. Scopri di più

    gtag('event', 'add_to_cart', {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • begin_checkout: quando un utente avvia la procedura di pagamento per uno o più prodotti. Scopri di più

    gtag('event', 'begin_checkout') {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • purchase: quando un utente acquista uno o più prodotti o servizi. Scopri di più

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});

  • sign_up: quando un utente si registra, in modo che l'utente finale possa vedere i metodi di registrazione più popolari (ad es. Account Google, indirizzo email e così via). Scopri di più

    gtag('event', 'sign_up', {method: 'web'});

  • generate_lead: quando un utente invia un modulo. Scopri di più

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});

  • subscribe: quando un utente si iscrive a un servizio o a una newsletter.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});

  • book_appointment: quando un utente prenota un appuntamento.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});

Altri consigli

Google supporta molti più eventi e parametri, in particolare per l'e-commerce. In generale, ti consigliamo di acquisire quanto segue:

  • Qualsiasi evento di successo associato direttamente al valore
  • Eventi di successo che contribuiscono agli eventi chiave principali (add_to_cart, sign_up e così via).
  • Coinvolgimenti e interazioni utente che aiutano gli inserzionisti a capire in che modo coinvolgere gli utenti finali

Di seguito sono riportate risorse aggiuntive che spiegano ulteriormente la raccolta di eventi:

Ci interessa discutere delle potenziali estensioni di questo schema, quindi non esitare a contattarci se hai suggerimenti.

Verificare l'integrazione aggiornata

Prima di inviare le modifiche in produzione, verifica la compatibilità con quanto segue:

  • Il tag Google con una destinazione Google Analytics 4
  • Il tag Google per il remarketing e la misurazione delle conversioni

Verifica inoltre che il tag si attivi correttamente su tutte le pagine, incluse quelle degli eventi chiave, utilizzando uno dei seguenti strumenti:

  • Google Tag Assistant: Tag Assistant ti consente di vedere quali tag Google sono stati attivati e in quale ordine. La modalità di debug di Tag Assistant mostra i dati trasmessi al livello dati e gli eventi che hanno attivato questi scambi di dati.
  • Strumenti per sviluppatori di Chrome: utilizza la scheda Rete per filtrare le richieste contenenti il termine "google" e verificare la modalità di invio dei dati.
  • (Lato server) Report In tempo reale di Google Analytics: crea un account Google Analytics senza costi e utilizza il report In tempo reale per verificare se gli hit dei tag vengono ricevuti dai server di Google.

Per segnalare un bug o fornire un feedback sulle informazioni mancanti, compila il modulo di assistenza per il sistema di gestione dei contenuti.

Se possibile, condividi l'accesso di prova con Google per la verifica continua.

Aggiorna le istruzioni di deployment per gli utenti

Aggiorna la documentazione per fornire istruzioni chiare su come implementare i prodotti di misurazione di Google tramite la tua implementazione. Condividi una bozza di queste istruzioni compilando il modulo di revisione della documentazione di configurazione dell'integrazione del CMS per consentirci di fornirti un feedback.