Criar um pixel personalizado do Gerenciador de tags do Google
Use o Gerenciador de tags do Google (GTM) como um pixel personalizado para gerenciar os pixels de terceiros.
Quando quiser testar o pixel personalizado, use a extensão do Assistente de tags do Google para Chrome (legado). O Assistente de tags do Google não funciona com pixels personalizados.
Nesta página
Preparar-se para criar um pixel personalizado
Antes de usar o Gerenciador de tags do Google para criar um pixel personalizado, leia as informações abaixo para entender melhor como funciona a configuração do recurso:
- Crie ou abra uma conta do Gerenciador de tags do Google e acesse o ID do contêiner.
- Por questões de segurança, os gerenciadores de tags carregados em nossa sandbox têm as mesmas restrições que os demais pixels. Saiba mais sobre as limitações da sandbox de pixels.
Criar um pixel personalizado do Gerenciador de tags do Google
Você pode criar um pixel personalizado do Gerenciador de tags do Google para gerenciar os pixels de terceiros.
Etapas:
- Abra a conta do Gerenciador de tags do Google e selecione a conta para a qual você quer configurar um pixel personalizado.
- Clique em Administrador e depois em Instalar o Gerenciador de tags do Google para abrir o código de instalação.
- Copie o bloco de código que pertence à seção
head
de uma página. - Remova as tags HTML desse bloco de código. Por exemplo,
<script></script>
. - Insira o código restante em um novo pixel personalizado da Shopify.
- Inscreva-se em eventos do cliente e envie para o dataLayer do GTM.
- Para analisar como o código será exibido, consulte o exemplo de pixel personalizado do Gerenciador de tags do Google.
- Configure o Gerenciador de tags do Google para aceitar eventos do pixel personalizado.
- Opcional: se você tiver chamadas
dataLayer.push
(event) no arquivocheckout.liquid
, substitua-o por analytics.publish().
Inscrever-se em eventos de clientes e enviar para a camada de dados do GTM
Para assinar eventos de clientes, use o dataLayer
do GTM no código de pixel personalizado .
Por padrão, há um conjunto de eventos padrão que você pode assinar. No entanto, se você quiser acompanhar eventos de clientes que não fazem parte da oferta de eventos padrão, poderá publicar seus próprios eventos personalizados de arquivos de modelos do Liquid.
Veja abaixo um exemplo de inscrição para o evento-padrão "product_viewed", que indica quando alguém vê um produto. Quando é acionado, o evento é enviado para o dataLayer
.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});
Neste exemplo, o título do produto está sendo transmitido no payload do evento. Utilize uma variável do Gerenciador de tags do Google para capturar o título do produto a partir do payload do evento na tag escolhida.
Exemplo de pixel personalizado do Gerenciador de tags do Google
O exemplo abaixo é uma versão simplificada de um pixel personalizado do Gerenciador de tags do Google e mostra como enviar dados para ele. Para enviar mais eventos para o dataLayer
, inscreva-se em outros eventos-padrão e eventos personalizados.
// 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,
});
});
Configurar o Gerenciador de tags do Google para aceitar eventos do pixel personalizado
Depois de criar o pixel personalizado, configure o Gerenciador de tags do Google para aceitar eventos dele. Para fazer isso, é preciso ter uma tag, um acionador e variáveis do dataLayer
no Gerenciador de tags do Google.
A tabela abaixo mostra alguns exemplos de eventos-padrão de clientes e de equivalentes do Gerenciador de tags do Google:
Evento da Shopify | Acionador | Evento do GTM |
---|---|---|
payment_info_submitted | Enviar informações de pagamento | add_payment_info |
checkout_address_info_submitted | Enviar informações de frete | add_shipping_info |
product_added_to_cart | Adicionar um item ao carrinho de compras | add_to_cart |
checkout_started | Iniciar checkout | begin_checkout |
checkout_completed | Concluir checkout | compra |
product_removed_from_cart | Remover item do carrinho | remove_from_cart |
cart_viewed | Ver carrinho de compras | view_cart |
product_viewed | Ver a página de informações do produto | view_item |
collection_viewed | Ver uma lista de itens | view_item_list |
Os parâmetros de evento da tag do GTM precisam corresponder às convenções de nomenclatura previstas para que os eventos do dataLayer
com pixel personalizado sejam processados.
Estes são alguns exemplos de propriedades para eventos do dataLayer com pixel personalizado e seus parâmetros de evento equivalentes do Google Analytics 4 (GA4):
Eventos do dataLayer com pixel personalizado |
Parâmetros de evento GA4 |
---|---|
event.data?. Checkout?. currencyCode | Moeda |
event.data?.checkout?.totalPrice?.amount | valor |
event.data?.checkout?.order?.id | transaction_id |
event.data?.checkout?.discountAllocations | cupom |
event.data?.checkout?.shippingLine?.price?.amount | frete |
event.data?.checkout?.totalTax | tax |
event.data?.checkout?.lineItems | itens |
Veja um exemplo que usa este 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,
});
});
O acionador do Gerenciador de tags do Google é um tipo de evento personalizado com o nome de evento checkout_completed. O campo Nome do evento no acionador precisa corresponder à chave event no pixel personalizado.
orderId e currency são as variáveis que você usa no Gerenciador de tags do Google para capturar os dados do evento. Eles podem ser mapeados para uma variável do dataLayer
no Gerenciador de tags do Google. Vale lembrar que cada variável de evento requer sua própria variável do dataLayer
. Defina o acionador em todos os eventos personalizados.
Crie uma tag que use o acionador que você acabou de gerar. Em parâmetros do evento, adicione as variáveis que você quer capturar. No exemplo acima, orderId, currency, price, shippingLine e totalTax seriam configuradas como variáveis do dataLayer
. Cada vez que a tag é acionada, ela captura essas variáveis do dataLayer
com o evento.
É preciso configurar pelo menos uma tag e um acionador no Gerenciador de tags do Google para que a transferência de dados ocorra.
Substituir chamadas dataLayer.push(event) antigas por analytics.publish()
Se você já tiver configurado o Gerenciador de tags do Google, será preciso substituir as chamadas dataLayer.push
por chamadas Shopify.analytics.publish()
. As chamadas dataLayer.push
podem ser encontradas nos arquivos theme.liquid, na seção Layout do editor de temas.
Além disso, é preciso substituir as chamadas dataLayer.push
no checkout.liquid
. No entanto, como o checkout.liquid
não é compatível com a extensibilidade de checkout, é necessário usar uma extensão de interface do usuário para fazer o push dos dados para os pixels da web.
O exemplo simplificado abaixo mostra um evento de inscrição de e-mail personalizado rastreado com dataLayer
em arquivos theme.liquid.
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>
O equivalente da Shopify se parece com este, que envia os dados para o pixel personalizado.
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>
Em seguida, no código de pixel personalizado, você adicionaria um código como este.
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});
Substituir dataLayer.push(data) antigos
O Gerenciador de tags do Google tem um recurso que permite enviar por push um objeto dataLayer
de estado em todos os eventos. Embora a sandbox de pixels da Shopify não inclua um recurso equivalente, é possível chegar ao mesmo resultado criando seu próprio objeto de dados e transmitindo-o para eventos personalizados.
Por exemplo, defina um objeto "customData" antes que os eventos personalizados sejam publicados.
<script>
const customData = {email: customer.email}
</script>
Em seguida, sempre que você quiser incluir os dados personalizados, transmita-os para o método de publicação.
<script>
Shopify.analytics.publish('email_signup', customData);
</script>
Dicas para configurar o Google Analytics 4
Considere as dicas abaixo para configurar o Google Analytics 4 (GA4) quando usar o Gerenciador de tags do Google como pixel personalizado.
URLs de página mais limpas
Quando o GA4 está em execução em uma sandbox, talvez você note que os URLs da página incluem informações sobre a sandbox em operação. Se você quiser remover essas informações dos URLs, desative o rastreamento automático de páginas do GA4 e use o evento-padrão page_viewed para implementar o seu próprio.
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});
Depois de você publicar seu próprio evento no dataLayer
, é possível criar uma tag page_view do GA4 que é acionada no evento page_viewed. Na maioria dos casos, é possível usar o tipo de tag Google Analytics: GA4 Event e definir o nome do evento como page_view. Após você definir o tipo de tag e o nome do evento, adicione um parâmetro para page_location e defina o valor para o mesmo que você transferiu do pixel personalizado para o dataLayer
.
Medição aprimorada
No carregamento do GA4 dentro da sandbox de pixels da Shopify, alguns eventos que costumam ser inferidos automaticamente precisarão ser definidos de modo manual. Por exemplo, os cliques em links externos, como parte da configuração de medição aprimorada do GA4, não podem ser acionados automaticamente por questões de segurança durante o uso de pixels personalizados. No entanto, é possível implementar por conta própria os eventos de medição aprimorada do GA4 como eventos personalizados.
O código fornecido abaixo inclui um exemplo simplificado do rastreamento de cliques em links externos.
<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>
Por último, no GTM, crie uma tag do GA4 que envie o clique no link para o GA4, garantindo que o nome do evento seja click para corresponder à nomenclatura de evento aprimorado do GA4.
Você pode conseguir o mesmo rastreamento em qualquer métrica de medição aprimoradas do Google.
Testar e depurar
- Abra a loja da Shopify no navegador Chrome.
- Adicione a extensão do Assistente de tags do Google para Chrome (legado) ao navegador.
- Clique no ícone da extensão e em Habilitar.
- Navegue até o site e acione os eventos que você quer testar.
- Na extensão, clique na tag do Gerenciador de tags do Google. A seção Camada de dados exibe o payload do evento acionado.
- Todas as outras tags carregadas pelo Gerenciador de tags do Google também estão listadas na extensão. Você pode clicar nessas tags para revisar os dados que foram enviados para elas.