Integração Shopify

Criamos esse tutorial para facilitar a instalação da SmartHint na sua loja virtual da Shopify, abaixo mostraremos passo a passo da instalação, confira.

Novos usuários-lojistas
Para lojistas que estão criando uma nova conta SmartHint: 
1. No painel administrativo SmartHint clique em Criar Conta e preencha todos os campos do formulário solicitado. Para maiores informações da criação de conta e ID Magalu para acesso ao admin da SmartHint leia o artigo: "Login Smarthint - ID Magalu".
2. Após isso siga os passos logo abaixo:

Usuários-lojistas migrando de plataforma
Para lojistas que já possuem conta na SmartHint e estão migrando de plataforma:
1. No painel administrativo SmartHint, acesse no menu lateral "Configurações Gerais"
2. Na tela seguinte, clique em "Loja virtual".
3. Após isso siga os passos abaixo.

⚙️ Configurando a Loja Virtual e o XML de Produtos

1. Na tela de "Configurações Gerais" > "Loja Virtual" do painel SmartHint, selecione a plataforma Shopify (XML).

2. Aparecerá o campo para informar o XML de produtos

Insira a URL do seu XML de produtos (o arquivo precisa estar no formato padrão Google).

💡 Dica sobre o XML na Shopify:

A Shopify possui o aplicativo Flexify (Product Catalog) para geração do XML.

Atenção: O plano gratuito do Flexify atende lojas com até 1.000 produtos. Caso sua loja possua um catálogo maior, será necessário assinar um plano pago no Flexify ou contatar o suporte da Shopify para indicação de outro aplicativo compatível.

• Copie o código do script apresentado na tela e guarde-o para as próximas etapas.

• Clique em Validar e depois em Seguir.

🏷️ Instalação do Script Principal via Google Tag Manager (GTM)

Após salvar a URL do XML e copiar o script da SmartHint, você deve realizar a instalação do script principal na sua loja utilizando o Google Tag Manager.

👉 Acesse o tutorial dedicado: Integração via Google Tag Manager (GTM) e siga as orientações.

🛒 Passo a Passo Extra: Instalação do Web Pixel no Checkout (Obrigatório)

⚠️ Por que esta etapa é necessária?

Atualmente, a Shopify utiliza uma arquitetura de segurança reforçada nas telas de Checkout e Confirmação de Compra (Thank You Page). Por conta disso, scripts tradicionais do site não conseguem rastrear as vendas diretamente nessa página.

Para garantir que a SmartHint receba as conversões e métricas de vendas com 100% de precisão, é obrigatório configurar o Web Pixel da SmartHint dentro do painel da Shopify, conforme o passo a passo abaixo.

Como configurar o Web Pixel na Shopify:

1. Acesse o painel administrativo da sua Shopify e clique em Configurações (no canto inferior esquerdo).

2. No menu lateral de configurações, selecione a opção Eventos de clientes.

3. Na tela de Eventos de clientes, clique no botão Adicionar pixel personalizado.

4. Na janela que abrir, digite o nome do pixel (Exemplo: SmartHint Pixel) e clique em Adicionar pixel.

5. No campo Código, apague qualquer texto existente e cole o código do script (disponível no bloco ao final deste artigo).

   Atenção: Lembre-se de alterar a variável _key no início do código inserindo o seu SH-Code (o código identificador da sua conta SmartHint).

6. Após colar o script com o seu SH-Code, clique em Salvar (no canto superior direito).

7. Em seguida, clique no botão Conectar.

8. Um aviso de segurança e privacidade da Shopify será exibido. Após ler, clique em Conectar novamente para ativar o pixel.

9. Como testar a conexão: Clique no botão Testar. Você será redirecionado para a sua loja virtual.

10. Na loja virtual, o aviso "Pixel helper" será exibido no canto da tela. Se o status estiver como "Loaded", significa que o pixel foi carregado e está ativo! Recomendamos fazer um pedido de teste para confirmar o envio dos dados de compra para o painel da SmartHint.

📜 Script do Web Pixel (Copie o código abaixo)

📝 Ajuste Obrigatório: Na primeira linha do código abaixo, substitua "SH-486075" pelo seu código de conta SmartHint (SH-Code) antes de salvar na Shopify.

const _key = "SH-486075"; // <-- SUBSTITUA PELO SEU SH-CODE
const _urlTrack = "https://service.smarthint.co/track/";
const _urlOrder = "https://recs.smarthint.co/track/";

const formatSmartHintDate = (date) => {
    const pad = (num) => String(num).padStart(2, '0');
    const d = pad(date.getDate());
    const m = pad(date.getMonth() + 1);
    const y = date.getFullYear();
    const h = pad(date.getHours());
    const min = pad(date.getMinutes());
    const s = pad(date.getSeconds());
    return "" + d + "/" + m + "/" + y + " " + h + ":" + min + ":" + s + "";
};

const removeNonAscii = (text) => {
    if (!text) return text;
    let returnText = "";
    for (let i = 0; i < text.length; i++) {
        const charCode = text.charCodeAt(i);
        if (charCode < 128 && charCode !== 38) {
            returnText += text.charAt(i);
            continue;
        }
        let character = charCode.toString(16);
        while (character.length < 4) {
            character = `0${character}`;
        }
        returnText += `\\u${character}`;
    }
    return returnText;
};

const sendPixelEvent = async (endpoint, data) => {
    try {
        const payload = JSON.stringify(data);
        console.log(payload);
        await fetch(endpoint + "?shcode=" + _key, {
            method: "POST",
            headers: {
                "Content-Type": "application/json"
            },
            body: payload,
            keepalive: true
        });
    } catch (error) {
        console.error("SmartHint Pixel Error:", error);
    }
};

const getCookieValue = async (cookieName) => {
    try {
        if (api.browser && api.browser.cookie && typeof api.browser.cookie.get === 'function') {
            const cookieVal = await api.browser.cookie.get(cookieName);
            return cookieVal || "";
        }
    } catch (err) {
        console.warn(`SmartHint Pixel: Não foi possível ler o cookie ${cookieName}`, err);
    }
    return "";
};

analytics.subscribe("checkout_completed", async (event) => {
    const checkout = event.data.checkout;
    if (!checkout) return;

    const anonymousConsumer = await getCookieValue("SmartHint-AnonymousConsumer");
    const session = await getCookieValue("SmartHint-Session");
    const identifiedConsumer = await getCookieValue("SmartHint-IdentifiedConsumer");

    const orderPayload = {
        Date: new Date().toISOString(),
        Freight: parseFloat(checkout.shippingLine?.price?.amount || 0),
        OrderId: parseInt(checkout.order?.id || checkout.id, 10),
        Total: parseFloat(checkout.totalPrice?.amount || 0),
        anonymousConsumer,
        session,
        identifiedConsumer,
        Items: checkout.lineItems.map(item => ({
            Name: item.title,
            ProductId: String(item.variant?.product?.id || ""),
            Quantity: parseInt(item.quantity, 10),
            SKU: String(item.variant?.sku || "")
        }))
    };
    await sendPixelEvent(_urlOrder + "order", orderPayload);
});

🎉 Pronto! Com o script principal instalado via GTM e o Web Pixel ativo no Checkout, force a atualização dos dados no painel da SmartHint. Em instantes a ferramenta estará 100% operacional na sua loja!

Esperamos que este conteúdo tenha sido útil para você! Se surgir qualquer dúvida, contate o nosso suporte.