Integração com Shopify

Integre o Zenovay à sua loja Shopify para análise completa de e-commerce, rastreamento de receita e insights sobre a jornada do cliente.

Instalação

Instalação de tema

1. Vá para Online Store -> Themes
2. Clique em « Actions » -> « Edit code »
3. Encontre theme.liquid
4. Adicione antes de </head>:

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js">
</script>

Google Tag Manager

Se estiver usando GTM:

1. Crie uma nova tag Custom HTML
2. Adicione a tag de script do Zenovay
3. Dispare em All Pages

Rastreamento Automático de E-commerce

Eventos rastreáveis

Estes eventos podem ser rastreados usando os snippets abaixo:

• Visualizações de produto
• Adição ao carrinho
• Remoção do carrinho
• Checkout iniciado
• Informações de pagamento adicionadas
• Compra concluída
• Receita atribuída

Eventos Rastreados

Evento	Quando
view_product	Página do produto visualizada
add_to_cart	Item adicionado ao carrinho
remove_from_cart	Item removido
begin_checkout	Checkout iniciado
add_payment_info	Pagamento inserido
purchase	Pedido concluído

Rastreamento Manual de Receita

Página de Status do Pedido

Adicione em Configurações → Checkout → Página de status do pedido:

{% if first_time_accessed %}
<script>
if (window.zenovay) {
  zenovay('revenue', {{ total_price | money_without_currency | remove: ',' }}, '{{ currency }}', {
    order_id: '{{ order.name }}',
    shipping: {{ shipping_price | money_without_currency | remove: ',' }},
    tax: {{ tax_price | money_without_currency | remove: ',' }},
    items: [
      {% for item in line_items %}
      {
        id: '{{ item.sku | default: item.product_id }}',
        name: '{{ item.title | escape }}',
        price: {{ item.final_price | money_without_currency | remove: ',' }},
        quantity: {{ item.quantity }}
      }{% unless forloop.last %},{% endunless %}
      {% endfor %}
    ]
  });
}
</script>
{% endif %}

Rastreamento na Página do Produto

Adicione ao template do produto:

<script>
document.addEventListener('DOMContentLoaded', function() {
  if (window.zenovay) {
    zenovay('track', 'view_product', {
      product_id: '{{ product.id }}',
      product_name: '{{ product.title | escape }}',
      price: {{ product.price | money_without_currency | remove: ',' }},
      category: '{{ product.type | escape }}',
      variant: '{{ product.selected_or_first_available_variant.title | escape }}'
    });
  }
});
</script>

Rastreamento de Adição ao Carrinho

Para carrinhos Ajax, adicione ao JavaScript do tema:

// Escutar atualizações do carrinho
document.addEventListener('cart:added', function(event) {
  if (window.zenovay && event.detail) {
    const item = event.detail;
    zenovay('track', 'add_to_cart', {
      product_id: item.product_id,
      variant_id: item.variant_id,
      product_name: item.product_title,
      price: item.price / 100,
      quantity: item.quantity
    });
  }
});

Identificação do Cliente

Após o Checkout

{% if customer %}
<script>
if (window.zenovay) {
  zenovay('identify', '{{ customer.id }}', {
    email: '{{ customer.email }}',
    name: '{{ customer.name | escape }}',
    orders_count: {{ customer.orders_count }},
    total_spent: {{ customer.total_spent | money_without_currency | remove: ',' }}
  });
}
</script>
{% endif %}

Páginas de Conta

Adicione aos templates de cliente:

{% if customer %}
<script>
if (window.zenovay) {
  zenovay('identify', '{{ customer.id }}', {
    email: '{{ customer.email }}',
    name: '{{ customer.name | escape }}'
  });
}
</script>
{% endif %}

Recursos do Shopify Plus

Extensibilidade do Checkout

Para checkout no Shopify Plus:

// checkout.js
import { extension } from '@shopify/checkout-ui-extensions';

export default extension('Checkout::Dynamic::Render', (root, api) => {
  // Rastrear eventos do checkout
  if (window.zenovay) {
    zenovay('track', 'checkout_step', {
      step: api.step,
      total: api.cost.totalAmount.amount
    });
  }
});

Editor de Scripts

Para lojas Plus, use Scripts:

# Rastrear com atributos personalizados
Output.cart.attributes["zenovay_session"] = Input.cart.token

Configuração de Metas

Meta de Compra

Configuração manual:

1. Acesse Zenovay → Metas
2. Crie a meta "Compra"
3. Tipo: Evento
4. Nome do evento: purchase

Meta de Adição ao Carrinho

1. Crie a meta "Adicionar ao Carrinho"
2. Tipo: Evento
3. Nome do evento: add_to_cart

Cadastro em Newsletter

Rastreie formulários de newsletter do Shopify:

<script>
document.querySelector('[data-newsletter-form]')?.addEventListener('submit', function() {
  if (window.zenovay) {
    zenovay('goal', 'newsletter_signup');
  }
});
</script>

Funil de Conversão

Funil Padrão de E-commerce

Visualização do Produto   100%
    ↓
Adição ao Carrinho         15%
    ↓
Checkout                    8%
    ↓
Compra                      4%

Configurando o Funil

1. Acesse Funis → Criar
2. Adicione as etapas:
   • view_product
   • add_to_cart
   • begin_checkout
   • purchase
3. Salve e analise

Suporte a Múltiplas Moedas

Rastrear na Moeda do Cliente

<script>
if (window.zenovay) {
  zenovay('revenue', {{ total_price | money_without_currency | remove: ',' }}, '{{ cart.currency.iso_code }}');
}
</script>

Moeda dos Relatórios

Nas configurações do Zenovay, defina:

• Moeda principal para relatórios
• Conversão automática aplicada

Shopify Headless

Hydrogen/Oxygen

// No componente de confirmação do checkout
import { useEffect } from 'react';

export function OrderConfirmation({ order }) {
  useEffect(() => {
    if (window.zenovay) {
      window.zenovay('revenue', parseFloat(order.totalPrice.amount), order.totalPrice.currencyCode, {
        order_id: order.id,
        items: order.lineItems.map(item => ({
          id: item.variant.sku,
          name: item.title,
          price: parseFloat(item.variant.price.amount),
          quantity: item.quantity
        }))
      });
    }
  }, [order]);

  return <div>Obrigado!</div>;
}

Storefront API

Ao usar a Storefront API:

// Após o checkout bem-sucedido
const response = await fetch('/api/checkout', {
  method: 'POST',
  body: JSON.stringify(checkoutData)
});

const order = await response.json();

// Rastrear no Zenovay
zenovay('revenue', order.total, order.currency, {
  order_id: order.id
});

Opções de Configuração

Opções de Configuração

Configuração	Descrição
ID do site	Seu ID de rastreamento do Zenovay
Rastrear produtos	Ativar eventos de visualização de produto
Rastrear carrinho	Eventos de adição/remoção do carrinho
Rastrear checkout	Eventos do funil de checkout
Rastrear pedidos	Conclusão de compra
Excluir funcionários	Não rastrear visitas de funcionários

Configurações de Privacidade

Configuração	Descrição
Anonimização de IP	Mascarar IPs dos visitantes
Consentimento de cookies	Aguardar consentimento
Respeitar DNT	Honrar Do Not Track

Solução de Problemas

Eventos Não Rastreando

Verifique:

• Se o script de rastreamento foi adicionado ao theme.liquid
• Se o ID do site está correto
• Se não está logado como funcionário (se excluído)
• O console do navegador para erros

Receita Não Correspondendo

Verifique:

• Configurações de moeda
• Inclusão de impostos/frete
• Tratamento de reembolsos
• Rastreamento de pedido de teste

Checkout Não Rastreando

Para checkouts:

• O script deve estar no checkout
• Shopify Plus pode precisar de configuração personalizada
• Teste com um checkout real

Compatibilidade com Temas

Funciona com:

• Dawn
• Debut
• Brooklyn
• Todos os temas 2.0
• A maioria dos temas personalizados

Testes

Modo de Teste

Ative o modo de teste:

1. Adicione ?zenovay_debug=true à URL
2. Veja os eventos no console
3. Verifique a estrutura dos dados

Pedido de Teste

1. Ative o modo de teste
2. Conclua um checkout
3. Verifique em tempo real no Zenovay
4. Confira a atribuição de receita

Próximos Passos

• Guia de Receita em E-commerce
• Funis de Conversão
• Receita por Fonte