Creazione di un pixel personalizzato di Google Tag Manager

Questa pagina è stata stampata il Mar 27, 2023. Per la versione aggiornata, visita https://help.shopify.com/it/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial.

Questa pagina contiene istruzioni su come utilizzare Google Tag Manager (GTM) come pixel personalizzato per gestire i pixel di terze parti.

Preparazione alla creazione di un pixel personalizzato

Prima di creare un pixel personalizzato utilizzando Google Tag Manager, per assicurarti di capire come configurare il pixel controlla le seguenti informazioni:

Creazione di un pixel personalizzato di Google Tag Manager

Procedura

  1. Apri il tuo account Google Tag Manager e seleziona l'account con cui desideri configurare un pixel personalizzato.
  2. Clicca su Pannello di controllo, quindi su Installa Google Tag Manager per aprire il codice di installazione.
  3. Copia il blocco di codice che appartiene alla sezione head di una pagina.
  4. Rimuovi i tag HTML da questo blocco di codice.
  5. Inserisci il codice rimanente in un nuovo Pixel personalizzato di Shopify.
  6. Inizializza l'oggetto dataLayer con window.dataLayer = window.dataLayer || [];.

Il codice del pixel personalizzato dovrebbe avere un aspetto simile a questo e il GTM-XXXXXXX deve corrispondere al tuo ID di GTM Container.

(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-XXXXXXX');

window.dataLayer = window.dataLayer || [];

Iscrizione agli eventi personalizzati e push al dataLayer di GTM

Invece di aggiungere chiamate dataLayer.push() ai file template liquid, potrai eseguire tutto il lavoro del dataLayer di GTM nel codice del pixel personalizzato.

Per impostazione predefinita, è disponibile un insieme di eventi personalizzati standard che puoi sottoscrivere subito, ma puoi anche pubblicare eventi personalizzati da file template liquid.

Di seguito è riportato un esempio di iscrizione all'evento standard "product_viewed", che indica quando qualcuno visualizza un prodotto. Quando l'evento si attiva, l'evento viene spinto nel dataLayer.

analytics.subscribe('product_viewed', (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_title': event.data.productVariant.title,
  });
});

In questo esempio vengono passati i dati relativi al titolo del prodotto, che utilizzando le variabili di Google Tag Manager possono essere inoltrati ad altri tag.

Sostituzione delle vecchie chiamate dataLayer.push(event) con analytics.publish()

Se hai già configurato Google Tag Manager in precedenza, devi sostituire le chiamate dataLayer.push con le chiamate Shopify.analytics.publish() .

Di seguito è riportato un esempio semplificato di evento personalizzato con iscrizione via email, monitorato utilizzando dataLayer.

<script>
  dataLayer.push({ event: 'email_signup', email: customer.email });
</script>

L'equivalente di Shopify è simile a questo, che inserisce i dati nel pixel personalizzato.

<script>
  Shopify.analytics.publish('email_signup', {email: customer.email });
</script>

Quindi, nel codice del pixel personalizzato aggiungerei qualcosa di simile.

analytics.subscribe("email_signup", (event) => {
  window.dataLayer.push({
   'event': 'email_signup',
   'email': event.customData.email,
  });
});

Sostituzione del vecchio dataLayer.push(dati)

Google Tag Manager dispone di una funzionalità che ti consente di inserire un oggetto livello dati con stato in ogni evento. Anche se l'ambiente di prova per i pixel di Shopify non include una funzionalità equivalente, puoi ottenere lo stesso risultato creando il tuo oggetto dati e passandolo agli eventi personalizzati.

Ad esempio, definisci un oggetto "customData" prima che uno qualsiasi degli eventi personalizzati venga pubblicato.

<script>
  const customData = {email: customer.email}
</script>

Poi, ogni volta che vuoi includere i tuoi dati personalizzati, passalo al tuo metodo di pubblicazione.

<script>
  Shopify.analytics.publish('email_signup', customData);
</script>

Esempio di pixel personalizzato di Google Tag Manager

L'esempio seguente è una versione semplificata di un pixel personalizzato di Google Tag Manager che mostra come inviare dati a GTM. Per inviare più eventi al tuo dataLayer, puoi iscriverti a più eventi standard e personalizzati.

(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-XXXXXXX');

window.dataLayer = window.dataLayer || [];

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
   'event': 'product_viewed',
   'product_id': event.data.product.id,
   'product_title': event.data.product.title,
  });
});

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
   'event': 'checkout_completed',
   'order_id': event.data.order.id,
   'currency': event.data.checkout.currencyCode,
  });
});

Consigli e suggerimenti per la configurazione di Google Analytics 4

Quando utilizzi Google Tag Manager come pixel personalizzato, considera i seguenti suggerimenti per la configurazione di Google Analytics 4 (GA4).

URL delle pagine più lineari

Quando GA4 è in esecuzione in un ambiente di prova, potresti notare che gli URL della pagina includono informazioni sull'ambiente di prova in cui sta operando. Se desideri rimuovere tali informazioni di sandbox da questi URL, puoi disattivare il monitoraggio automatico delle pagine di GA4 e implementare il tuo, utilizzando l'evento standard page_viewed.

analytics.subscribe('page_viewed', (event) => {
  window.dataLayer.push({
   'event': 'page_viewed',
   'page_location': event.context.window.location.href,
   'page_title': event.context.document.title,
  });
});

Dopo aver pubblicato il tuo evento su dataLayer, puoi creare un tag page_view GA4 che si attiva nell'evento page_viewed. Più comunemente, puoi utilizzare il tipo di tag Google Analytics: Evento GA4 e impostare il Nome dell'evento su page_view. Dopo aver impostato il tipo di tag e il nome dell'evento, devi aggiungere un parametro per page_location e impostare il valore sullo stesso valore che hai passato al livello dati dal pixel personalizzato.

Misurazione avanzata

Quando si carica GA4 all'interno dell'ambiente di prova per i pixel di Shopify, alcuni eventi che normalmente vengono desunti in automatico dovranno essere impostati manualmente. Ad esempio, i clic sui link in uscita, nell'ambito dell'impostazione Misurazione avanzata di GA4, non possono essere attivati automaticamente per motivi di sicurezza quando utilizzi pixel personalizzati. Tuttavia, puoi implementare personalmente gli eventi di misurazione avanzata di GA4 come eventi personalizzati.

Il codice fornito di seguito include un esempio semplificato di monitoraggio dei clic sui link in uscita.

<script>
  function detectOutboundLink() {
    // add your logic for determining if a link click is outbound

    // if the link click is outbound then publish it
    if (isOutboundLink) {
      Shopify.analytics.publish('outbound_link', { link_url: link_url });
    }
  }
</script>

Infine, in GTM, crea un tag GA4 che invia il clic sul link a GA4, assicurando che il nome dell'evento sia clic, in modo che corrisponda alla denominazione avanzata degli eventi di GA4.

Puoi ottenere lo stesso monitoraggio per qualsiasi metrica di misurazione avanzata di Google.

Test e debug

  1. Apri il tuo negozio Shopify su un browser Chrome.
  2. Apri la scheda di rete sul tuo browser e trova la richiesta chiamata collect?..., che conterrà il tuo ID di misurazione GA4 se i dati vengono inviati a GA4 dal tuo Google Tag Manager.
  3. Nel tuo account Google Analytics, clicca su Pannello di controllo, quindi clicca su DebugView.
  4. Assicurati di aver aggiunto l'estensione Google GA Debug al tuo browser Chrome:
    • Attiva GA Debug.
    • Apri il tuo negozio Shopify in una scheda separata.
    • Torna a GA4 nella vista di debug ed esamina gli eventi page_viewed.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis