Conectar o Rankito CRM ao Shopify é o passo que transforma uma loja online genérica num projeto com tracking de e-commerce completo. Você consegue ver não só o que aconteceu na loja, mas qual keyword orgânica gerou cada venda, qual produto converte melhor por canal, e qual etapa do funil está perdendo dinheiro. Esse tutorial mostra o passo a passo da integração.
Eu configurei essa integração em duas lojas Shopify de clientes da SpiderRank. Para entender o módulo de e-commerce dentro do produto inteiro, vale ler antes o review completo do Rankito CRM.
Por que fazer essa integração
Lojas Shopify rodam com tracking nativo do Shopify e geralmente algum pixel de Meta/Google. Esses sistemas mostram o que aconteceu na loja, mas não cruzam bem com SEO orgânico. Você não consegue dizer com facilidade “essa keyword do Google trouxe esse cliente que comprou tanto”.
O Rankito resolve esse problema. Ele captura o caminho completo: keyword → página de pouso → navegação → adição ao carrinho → checkout → compra. Cada venda fica vinculada ao termo de busca de origem, e o relatório de ROI por keyword vira realidade.
Pré-requisitos antes de começar
Você precisa de:
- Conta Shopify ativa (qualquer plano)
- Acesso de admin à loja
- Projeto criado no Rankito para essa loja
- Search Console e GA4 conectados (para o cruzamento de keyword fazer sentido)
- Plano Rankito que suporte o módulo de e-commerce
Se algum desses itens ainda está pendente, resolva primeiro. A integração depende dessa base.
Passo 1: Instalar o pixel base do Rankito no tema
O Shopify não tem app oficial do Rankito (ainda). A integração é feita via injeção de código JavaScript no tema da loja, manualmente.
Acessa a loja Shopify, vai em Loja online → Temas → Editar código. No editor, abre o arquivo theme.liquid dentro da pasta Layout. Procura a tag </head> e cola o snippet do Rankito imediatamente antes:
<script>
(function() {
var rk = document.createElement('script');
rk.src = 'https://cdn.rankito.com/pixel.js?id=SEU_ID_PROJETO';
rk.async = true;
document.head.appendChild(rk);
})();
</script>Substitui SEU_ID_PROJETO pelo identificador que aparece no painel do Rankito (em Tracking → Pixel Universal). Salva o arquivo.
O Shopify renderiza esse layout em todas as páginas da loja, então o pixel passa a carregar automaticamente em tudo: home, coleções, produtos, blog, carrinho.
Passo 2: Configurar evento de visualização de produto
Esse evento é o que permite separar visitas de produto das visitas de outras páginas. No tema Shopify, abre o template product.liquid ou main-product.liquid (depende do tema). Cola o seguinte código no final, antes do fechamento da última div:
<script>
window.rankito = window.rankito || function(){(window.rankito.q=window.rankito.q||[]).push(arguments)};
window.rankito('event', 'view_product', {
product_id: '{{ product.id }}',
product_name: '{{ product.title | escape }}',
product_price: {{ product.price | money_without_currency }},
product_category: '{{ product.type | escape }}'
});
</script>O Shopify renderiza variáveis Liquid no momento da página, então cada visualização de produto dispara o evento com os dados reais. O Rankito recebe e armazena.
Passo 3: Configurar evento de adicionar ao carrinho
Esse evento é o que mede a primeira intenção de compra. A maioria dos temas Shopify modernos usa AJAX para adicionar ao carrinho sem recarregar a página. Por isso, você precisa interceptar a chamada e disparar o evento Rankito junto.
No tema, procura o arquivo theme.js ou cart.js. Adiciona um listener:
document.addEventListener('cart:item:added', function(e) {
if (window.rankito) {
window.rankito('event', 'add_to_cart', {
product_id: e.detail.product_id,
product_name: e.detail.product_name,
quantity: e.detail.quantity,
value: e.detail.price
});
}
});O nome exato do evento (cart:item:added) varia entre temas. Alguns usam “cart:added”, outros “ajaxCart.afterAddToCart”. Verifica no código do tema qual evento o seu dispara.
Passo 4: Configurar evento de início de checkout
O Shopify redireciona o usuário para a página de checkout quando ele clica em “finalizar compra”. Você precisa disparar o evento de início de checkout antes desse redirecionamento.
O caminho mais simples é interceptar o clique no botão de checkout. No theme.js:
document.querySelector('[name="checkout"]')?.addEventListener('click', function() {
if (window.rankito) {
window.rankito('event', 'begin_checkout', {});
}
});Isso garante que o pixel registra o início do checkout antes da página mudar. Funciona para 95% dos temas Shopify modernos.
Passo 5: Configurar evento de compra concluída
Esse é o evento mais importante. Ele dispara depois da compra bem-sucedida, na página de obrigado (Order Status Page).
O Shopify permite injetar scripts customizados na Order Status Page apenas em planos Shopify Plus, infelizmente. Em planos comuns, a alternativa é usar o Web Pixels do Shopify Admin (em Configurações → Aplicativos e canais de venda → Web Pixels) para registrar o evento.
No editor de Web Pixels, adiciona um pixel customizado com o seguinte código:
analytics.subscribe('checkout_completed', (event) => {
if (window.rankito) {
window.rankito('event', 'purchase', {
transaction_id: event.data.checkout.token,
value: event.data.checkout.total_price.amount,
currency: event.data.checkout.total_price.currency_code,
items: event.data.checkout.line_items.map(item => ({
id: item.variant.product.id,
name: item.title,
quantity: item.quantity,
price: item.variant.price.amount
}))
});
}
});Esse pixel captura o checkout completed nativamente do Shopify e dispara o evento purchase no Rankito com todos os dados da compra.
Passo 6: Validar a integração
Faz uma compra teste (use cupom de 100% off para não pagar) e acompanha o painel do Rankito. Em até 60 segundos, deve aparecer:
- Sessão registrada com a página de pouso correta
- Evento view_product nas páginas de produto visitadas
- Evento add_to_cart na adição
- Evento begin_checkout no início
- Evento purchase com valor total na conclusão
Se algum evento não aparece, abre o console do navegador (F12) na página correspondente e procura erros. Geralmente é problema de seletor CSS errado ou nome de evento custom diferente.
Passo 7: Configurar metas de conversão no Rankito
Com os eventos chegando, vai em Tracking → Metas no Rankito e cria as metas correspondentes:
- Meta “Adicionou ao carrinho” → evento add_to_cart, valor zero (apenas contagem)
- Meta “Iniciou checkout” → evento begin_checkout, valor zero
- Meta “Compra concluída” → evento purchase, valor dinâmico via parâmetro do evento
Salva. A partir desse momento, o relatório de funil de conversão do Rankito começa a mostrar os números reais da loja.
O que você ganha com a integração completa
Quatro relatórios novos passam a fazer sentido:
- Receita orgânica por keyword (quanto cada termo do Google gerou em vendas reais)
- Funil de conversão de e-commerce com taxa de cada etapa
- Top produtos por origem de tráfego
- Atribuição multi-canal (orgânico vs paid vs direto vs social)
Esses relatórios são o que diferencia loja “operada no escuro” de loja “operada com dado”. Para a maioria dos clientes, é a primeira vez que eles veem essa visibilidade real.
Para entender como o módulo de e-commerce se conecta ao resto do produto, vale revisitar o review completo do Rankito CRM. Outros tutoriais sobre tracking, integrações e e-commerce estão organizados na home do oRankito.
Lucas Rodrigues é Líder de Estratégias de SEO na SpiderRank e especialista em integração de CRM. Com foco em performance, combina o poder do Rankito CRM com técnicas avançadas de otimização para escalar o tráfego orgânico e a receita de empresas.
