Creazione di un pixel personalizzato di Google Tag Manager
Questa pagina contiene istruzioni su come utilizzare Google Tag Manager (GTM) come pixel personalizzato per gestire i pixel di terze parti.
Su questa pagina
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
Procedura
- 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
headdi 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 dovrebbe apparire 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 dataLayer 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 dei clienti 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, 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, 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.
//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');
//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 del livello dati in Google Tag Manager.
Utilizza il seguente evento checkout_completed:
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
order_id: event.data.checkout.order.id,
currency: event.data.checkout.currencyCode,
});
});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.
order_id e currency sono le variabili che utilizzi in Google Tag Manager per acquisire i dati dall'evento. Possono essere associate a una variabile del livello dati in Google Tag Manager. Ogni variabile dell'evento richiede la propria variabile del livello dati. 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 order_id e currency sarebbero impostate come variabili del livello dati. Ogni volta che il tag si attiva, acquisisce order_id e currency 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 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>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
- 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.