Crea un pixel personalizzato di Google Tag Manager

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

Quando sei pronto per testare il pixel personalizzato di GTM, utilizza Shopify Pixel Helper per assicurarti che tutti gli eventi che desideri tracciare vengano aggiunti alla sandbox senza errori.

Puoi anche utilizzare l'estensione Google Tag Assistant per testare quali tag di Google vengono caricati sulla pagina. Tuttavia, la funzionalità Risoluzione dei problemi relativi ai tag di Google Tag Assistant non è compatibile con i pixel personalizzati e non rileva alcun tag di Google in un pixel personalizzato, né altri pixel caricati da GTM.

In questa pagina

Preparazione alla creazione di un pixel personalizzato

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

Crea o apri un account Google Tag Manager e ottieni l'ID del contenitore GTM.
Per motivi di sicurezza, i tag manager caricati nella nostra sandbox hanno le stesse restrizioni di qualsiasi altro pixel. Scopri di più sulle limitazioni della sandbox per i pixel.

Crea 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 quello che userai per impostare un pixel personalizzato.
Clicca su Admin, quindi su Installa Google Tag Manager per aprire il codice di installazione.
Copia il blocco di codice che va inserito nella 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.
Sottoscrivi gli eventi dei clienti ed esegui il push nel dataLayer di GTM.
Per controllare come viene visualizzato il codice, fai riferimento all’esempio di pixel personalizzato per Google Tag Manager.
Configura Google Tag Manager per accettare gli eventi dal pixel personalizzato.
Facoltativo: se disponi di chiamate dataLayer.push(event) esistenti nel file checkout.liquid, sostituiscile con analytics.publish().

Sottoscrizione agli eventi dei clienti e push nel data layer di GTM

Puoi sottoscrivere gli eventi dei clienti utilizzando il dataLayer di GTM nel codice del pixel personalizzato.

Per impostazione predefinita, è disponibile un set di eventi standard che puoi sottoscrivere. Tuttavia, se desideri tracciare eventi dei clienti che non fanno parte dell'offerta di eventi standard, puoi pubblicare eventi personalizzati dai file dei modelli Liquid.

Di seguito è riportato un esempio di sottoscrizione all’evento standard “product_viewed”, che indica quando qualcuno visualizza un prodotto. Quando l’evento si attiva, ne viene eseguito il push 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 preferisci.

Esempio di pixel personalizzato per Google Tag Manager

L'esempio seguente è una versione semplificata di un pixel personalizzato per Google Tag Manager che mostra come inviare dati a Google Tag Manager. Per eseguire il push di più eventi nel dataLayer, puoi sottoscrivere 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 gli eventi dal pixel personalizzato

Dopo aver creato il pixel personalizzato, devi configurare Google Tag Manager per accettare gli eventi dal pixel personalizzato. A tal fine, sono necessari un tag, un trigger e delle variabili dataLayer in Google Tag Manager.

Nella tabella seguente sono elencati alcuni esempi di eventi dei clienti standard selezionati e i loro equivalenti in Google Tag Manager:

Elenco di eventi dei clienti standard di Shopify da usare con i pixel, a confronto con gli eventi dei clienti equivalenti in Google Tag Manager, oltre al trigger necessario per l'attivazione degli eventi.
Evento Shopify	Trigger	Evento GTM
payment_info_submitted	Invio dei dati di pagamento	add_payment_info
checkout_address_info_submitted	Invio dei dati di spedizione	add_shipping_info
product_added_to_cart	Aggiunta di un articolo al carrello	add_to_cart
checkout_started	Inizio del check-out	begin_checkout
checkout_completed	Completamento del check-out	purchase
product_removed_from_cart	Rimozione dell'articolo dal carrello	remove_from_cart
cart_viewed	Visualizzazione del carrello	view_cart
product_viewed	Visualizzazione della pagina dei dettagli del prodotto	view_item
collection_viewed	Visualizzazione di un elenco di articoli	view_item_list

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

Di seguito sono riportati alcuni esempi di proprietà di evento dataLayer del pixel personalizzato selezionate e dei parametri di evento equivalenti di Google Analytics 4 (GA4):

Elenco di eventi `dataLayer` del pixel personalizzato che utilizzano la convenzione di denominazione GA4
Eventi `dataLayer` del pixel personalizzato	Parametri evento GA4
`event.data?.checkout?.currencyCode`	`currency`
`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 che utilizza il seguente 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 evento checkout_completed. Il campo Nome evento nel trigger deve corrispondere alla chiave event nel pixel personalizzato.

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

Crea un tag che utilizzi il trigger appena creato. Sotto i parametri dell'evento, aggiungi le variabili che desideri acquisire. Nell'esempio precedente, orderId, currency, price, shippingLine e totalTax verrebbero impostate come variabili dataLayer. Ogni volta che il tag si attiva, acquisirà queste variabili dataLayer con l'evento.

Tieni presente che in Google Tag Manager devono essere impostati almeno un tag e un trigger perché avvenga il trasferimento di dati.

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

Se hai già impostato Google Tag Manager, 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 sostituire le chiamate dataLayer.push anche nel file checkout.liquid. Tuttavia, poiché checkout.liquid non è compatibile con le Shopify Extensions, devi utilizzare un'estensione UI per inviare dati ai pixel web.

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

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

L'equivalente di Shopify viene visualizzato in questo modo e invia i dati al pixel personalizzato:

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

Quindi, nel codice del pixel personalizzato dovrai aggiungere qualcosa di simile a questo:

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

Sostituzione del vecchio dataLayer.push(data)

Google Tag Manager ha una funzionalità che ti consente di inviare un oggetto dataLayer stateful a ogni evento. Sebbene la sandbox dei pixel di Shopify non includa una funzionalità equivalente, puoi ottenere lo stesso risultato creando il tuo oggetto di dati e passandolo agli eventi personalizzati.

Ad esempio, definisci un oggetto “customData” prima che vengano pubblicati gli eventi personalizzati:

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

Quindi, ogni volta che desideri includere i dati personalizzati, passali nel metodo di pubblicazione:

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

Consigli per la configurazione di Google Analytics 4

Considera i seguenti consigli per configurare Google Analytics 4 (GA4) quando utilizzi Google Tag Manager come pixel personalizzato.

URL di pagina più puliti

Quando GA4 è in esecuzione in una sandbox, potresti notare che gli URL delle pagine includono informazioni sulla sandbox in cui opera. Se desideri rimuovere le informazioni sulla sandbox da tali URL, puoi disattivare il monitoraggio automatico delle pagine di GA4 e implementarne uno personalizzato, 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 di visualizzazione pagina GA4 che si attiva con l'evento page_viewed. In genere, 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 che hai passato al dataLayer dal pixel personalizzato.

Misurazione avanzata

Quando carichi GA4 all'interno della sandbox dei pixel di Shopify, alcuni eventi che normalmente vengono dedotti in automatico dovranno essere impostati manualmente. Ad esempio, i clic su link in uscita, come parte dell'impostazione Misurazione avanzata di GA4, non possono essere attivati automaticamente per motivi di sicurezza quando si utilizzano i pixel personalizzati. Tuttavia, è possibile implementare autonomamente gli eventi di misurazione avanzata di GA4 come eventi personalizzati.

Il codice fornito di seguito include un esempio semplificato del monitoraggio dei clic su 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 invii il clic sul link a GA4, assicurandoti che il nome dell'evento sia click, in modo che corrisponda alla denominazione degli eventi avanzati di GA4.

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

Test e debug del pixel personalizzato

Quando sei pronto per testare il pixel personalizzato di GTM, utilizza Shopify Pixel Helper per assicurarti che tutti gli eventi che desideri tracciare vengano aggiunti alla sandbox senza errori.