Creazione di un pixel personalizzato di Google Tag Manager

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

Puoi utilizzare Google Tag Manager (GTM) come pixel personalizzato per gestire i pixel di terze parti.

Quando sei pronto per testare il tuo pixel personalizzato, puoi utilizzare l'estensione Chrome di Google Tag Assistant Legacy per testare i pixel personalizzati. Google Tag Assistant non funziona con i pixel personalizzati.

Su questa pagina

Preparazione alla creazione di un pixel personalizzato
Creazione di un pixel personalizzato di Google Tag Manager

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:

Crea o apri un account Google Tag Manager e ottieni l'ID di GTM Container.
Per motivi di sicurezza, i tag manager caricati nel nostro ambiente di prova hanno le stesse restrizioni di qualsiasi altro pixel. Scopri di più sulle limitazioni dell'ambiente di prova per i pixel.

Creazione di un pixel personalizzato di Google Tag Manager

Puoi creare un pixel personalizzato di Google Tag Manager per gestire i pixel di terze parti.

Passaggi:

Apri il tuo account Google Tag Manager e seleziona l'account con cui desideri configurare un pixel personalizzato.
Clicca su Pannello di controllo, quindi su Installa Google Tag Manager per aprire il codice di installazione.
Copia il blocco di codice che appartiene alla sezione head di una pagina.
Rimuovi i tag HTML dal blocco di codice. Ad esempio, <script></script>.
Inserisci il codice rimanente in un nuovo Pixel personalizzato di Shopify.
Iscrizione agli eventi personalizzati e push al dataLayer di GTM.
Per controllare come deve essere visualizzato il codice, consulta l'Esempio di pixel personalizzato di Google Tag Manager.
Configura Google Tag Manager per accettare gli eventi dal tuo Custom Pixel.
Facoltativo: se sono presenti chiamate a dataLayer.push(event) nel file checkout.liquid, sostituiscilo con analytics.publish().

Iscrizione agli eventi dei clienti e push al data layer di GTM

Puoi iscriverti agli eventi dei clienti utilizzando il dataLayer di GTM nel codice del pixel personalizzato.

Per impostazione predefinita, è disponibile un insieme di eventi standard a cui puoi iscriverti. Tuttavia, se desideri monitorare gli eventi dei clienti che non fanno parte dell'offerta di eventi standard, puoi pubblicare eventi personalizzati dai file dei modelli di 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, viene spinto nel dataLayer.

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

In questo esempio, il titolo del prodotto viene passato nel payload dell'evento. Puoi utilizzare una variabile di Google Tag Manager per acquisire il titolo del prodotto dal payload dell'evento nel tag che hai scelto.

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 Google Tag Manager. Per inviare più eventi al tuo dataLayer, puoi iscriverti a più eventi standard e personalizzati.

// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

//Initialize GTM tag
(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');

//Google Consent Mode v2
gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  window.dataLayer.push({
    event: "payment_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_shipping_info_submitted", (event) => {
  window.dataLayer.push({
    event: checkout_shipping_info_submitted,
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_address_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_address_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_contact_info_submitted", (event) => {
  window.dataLayer.push({
    event: "checkout_contact_info_submitted",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("checkout_started", (event) => {
  window.dataLayer.push({
    event: "checkout_started",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    email: event.data?.checkout?.email,
    phone: event.data?.checkout?.phone,
    first_name: event.data?.checkout?.shippingAddress?.firstName,
    last_name: event.data?.checkout?.shippingAddress?.lastName,
    address1: event.data?.checkout?.shippingAddress?.address1,
    address2: event.data?.checkout?.shippingAddress?.address2,
    city: event.data?.checkout?.shippingAddress?.city,
    country: event.data?.checkout?.shippingAddress?.country,
    countryCode: event.data?.checkout?.shippingAddress?.countryCode,
    province: event.data?.checkout?.shippingAddress?.province,
    provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
    zip: event.data?.checkout?.shippingAddress?.zip,
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    subtotal: event.data?.checkout?.subtotalPrice?.amount,
    shipping: event.data?.checkout?.shippingLine?.price?.amount,
    value: event.data?.checkout?.totalPrice?.amount,
    tax: event.data?.checkout?.totalTax?.amount,
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "product_added_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    price: event.data?.cartLine?.merchandise?.price?.amount,
    currency: event.data?.cartLine?.merchandise?.id,
    product_title: event.data?.cartLine?.merchandise?.product?.title,
    quantity: event.data?.cartLine?.quantity,
    total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
  });
});

analytics.subscribe("cart_viewed", (event) => {
  window.dataLayer.push({
    event: "cart_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    total_cost: event.data?.cart?.cost?.totalAmount?.amount,
    quantity: event.data?.cart?.totalQuantity,
    cart_id: event.data?.cart?.id,
  });
});

analytics.subscribe("page_viewed", (event) => {
  window.dataLayer.push({
    event: "page_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    page_title: event.context.document.title,
  });
});

analytics.subscribe("product_viewed", (event) => {
  window.dataLayer.push({
    event: "product_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    product_id: event.data?.productVariant?.product?.id,
    product_title: event.data?.productVariant?.title,
    product_sku: event.data?.productVariant?.sku,
  });
});

analytics.subscribe("search_submitted", (event) => {
  window.dataLayer.push({
    event: "search_submitted",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    query: event.data?.searchResult?.query,
  });
});

analytics.subscribe("collection_viewed", (event) => {
  window.dataLayer.push({
    event: "collection_viewed",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    collection_id: event.data?.collection?.id,
    collection_title: event.data?.collection?.title,
  });
});

Configurazione di Google Tag Manager per accettare eventi dal Pixel personalizzato

Dopo aver creato il tuo pixel personalizzato, devi configurare Google Tag Manager per accettare eventi dal pixel personalizzato. Per fare ciò, devi disporre di un tag, di un trigger e di variabili dataLayer in Google Tag Manager.

Nella tabella seguente sono elencati alcuni esempi di eventi cliente standard e dei relativi equivalenti in Google Tag Manager:

Elenco degli eventi cliente standard di Shopify e degli eventi equivalenti in GTM
Evento Shopify	Trigger	Evento GTM
payment_info_submitted	Invia i dati di pagamento	add_payment_info
checkout_address_info_submitted	Invia i dati di spedizione	add_shipping_info
product_added_to_cart	Aggiungi un articolo al carrello	add_to_cart
checkout_started	Inizia il check-out	begin_checkout
checkout_completed	Completa il check-out	acquisto
product_removed_from_cart	Rimuovi gli articoli dal carrello	remove_from_cart
cart_viewed	Visualizza carrello	view_cart
product_viewed	Visualizza la pagina dei dettagli del prodotto	view_item
collection_viewed	Visualizza un elenco di articoli	view_item_list

I parametri degli eventi del tag GTM devono corrispondere alle convenzioni di denominazione previste affinché gli eventi del pixel personalizzato dataLayer possano essere elaborati.

Di seguito sono riportati alcuni esempi di proprietà degli eventi del pixel personalizzato dataLayer selezionate e i parametri dell'evento Google Analytics 4 (GA4) equivalente:

Seleziona l'elenco di eventi del pixel personalizzato `dataLayer` utilizzando la convenzione di denominazione GA4
Eventi del pixel personalizzato `dataLayer`	Parametri dell'evento GA4
`event.data?.checkout?.currencyCode`	`Valuta`
`event.data?.checkout?.totalPrice?.amount`	`value`
`event.data?.checkout?.order?.id`	`transaction_id`
`event.data?.checkout?.discountAllocations`	`coupon`
`event.data?.checkout?.shippingLine?.price?.amount`	`shipping`
`event.data?.checkout?.totalTax`	`tax`
`event.data?.checkout?.lineItems`	`items`

Ecco un esempio di utilizzo dell'evento checkout_completed:

analytics.subscribe("checkout_completed", (event) => {
  window.dataLayer.push({
    event: "checkout_completed",
    orderId: event.data?.checkout?.order?.id,
    currency: event.data?.checkout?.currencyCode,
    price: event.data.checkout.totalPrice.amount,
    shippingLine: event.data.checkout.shippingLine.price.amount,
    totalTax: event.data.checkout.totalTax,
  });
});

Il trigger di Google Tag Manager è un tipo di evento personalizzato con il nome checkout_completed. Il campo Nome evento nel trigger deve corrispondere alla chiave dell'evento nel pixel personalizzato.

orderId e currency sono le variabili che utilizzi in Google Tag Manager per acquisire i dati dall'evento. Possono essere associate a una variabile dataLayer in Google Tag Manager. Ogni variabile dell'evento richiede la propria variabile dataLayer. Imposta il trigger in modo che si attivi su tutti gli eventi personalizzati.

Crea un tag che utilizzi il trigger che hai appena creato. Sotto i parametri dell'evento, aggiungi le variabili che desideri acquisire. Nell'esempio sopra riportato orderId, currency, price, shippingLine e totalTax sarebbero impostati come variabili dataLayer. Ogni volta che viene generato, il tag acquisisce queste variabili dataLayer con l'evento.

Tieni presente che almeno un tag e un trigger devono essere configurati in Google Tag Manager per il trasferimento di dati.

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

Se hai configurato Google Tag Manager in precedenza, devi sostituire le chiamate dataLayer.push con le chiamate Shopify.analytics.publish(). Puoi trovare le chiamate dataLayer.push nei file theme.liquid nella sezione Layout dell'editor del tema.

Devi anche sostituire le chiamate dataLayer.push in checkout.liquid. Tuttavia, poiché checkout.liquid non è compatibile con Checkout Extensibility, devi utilizzare un'estensione UI per inviare i dati ai pixel web.

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

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

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 nel dataLayer 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

Apri il tuo negozio Shopify su un browser Chrome.
Aggiungi l'estensione Chrome di Google Tag Assistant Legacy al browser.
Clicca sull'icona dell'estensione, quindi clicca su Abilita.
Passa al tuo sito e attiva gli eventi che desideri testare.
Nell'estensione clicca sul tag Google Tag Manager. La sezione Data Layer (Livello dati) dovrebbe mostrare il payload dell'evento attivato.
Nell'estensione sono elencati anche tutti gli altri tag caricati da Google Tag Manager. Puoi cliccare su questi tag per controllare i dati a loro inviati.

Creazione di un pixel personalizzato di Google Tag Manager

Su questa pagina

Preparazione alla creazione di un pixel personalizzato

Creazione di un pixel personalizzato di Google Tag Manager

Passaggi:

Iscrizione agli eventi dei clienti e push al data layer di GTM

Esempio di pixel personalizzato di Google Tag Manager

Configurazione di Google Tag Manager per accettare eventi dal Pixel personalizzato

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

Sostituzione del vecchio dataLayer.push(dati)

Suggerimenti per la configurazione di Google Analytics 4

URL delle pagine più lineari

Misurazione avanzata

Test e debug

Sei pronto per iniziare a vendere con Shopify?