Guia de implementação do GLAMI piXel


Eventos

Nome Descrição Parâmetros Parâmetros obrigatórios
PageView Evento padrão, que pode ser usado em todas as páginas.
ViewContent Quando uma página é visitada, como uma página de produto ou categoria. content_type, item_ids, value, currency content_type, item_ids
AddToCart Quando um produto é adicionado a sacola. value, currency, item_ids value, currency, item_ids
Purchase Quando uma compra é feita. value, currency, transaction_id, item_ids value, currency, transaction_id, item_ids

Parâmetros

Nome Descrição Tipo
consent A permissão do usuário para armazenar cookies analíticos em seus dispositivos. Defina 1 caso o usuário permita. Caso contrário, defina 0 para "não". number
content_type 'product' ou 'category'. string
item_ids Identificador de itens associados com o evento ViewContent, AddToCart or Purchase. Use valores únicos e imutáveis em toda sua loja. Um identificador consiste em qualquer combinação numérica/ de cadeia de caracters (string). Use o mesmo ID que você forneceu no seu feed de produto para ITEM_ID. If you do not have the ITEM_ID for a specific product variant at the time of calling the event (for example, when the customer has not yet selected a specific size for the product), you can send the value of ITEMGROUP_ID to the item_ids parameter. This value must correspond with the value you send in the product feed. array
value Valor, para o negócio, de um usuário realizar esse evento number
currency Moeda para a value. especificada. string
transaction_id Transaction ID. string

Content IDs

Você pode usar qualquer um destes identificadores item_ids, category_text para rotular conteúdo associado com cada evento. Use a solução mais adequada para a sua loja. Por favor, use os mesmos ID que você já usa em product feed.


ITEM_ID

Este é um número de produto específico - um ID que você usar na sua loja virtual.

A GLAMI usa o ITEM_ID para distinguir os produtos e garantir o rastreamento adequado.

  • O valor pode consistir em uma combinação de letras, números, barras (/), barras invertidas (\), hífens (-), traços inferiores (_), espaços ( ), pontos (.) e dois pontos (:).
  • As variantes de produtos, tamanhos e cores diferentes precisam ter ITEM_IDs exclusivos.
  • Forneça o mesmo valor para o GLAMI piXel - parâmetro ITEM_ID. Caso contrário, o GLAMI piXel não funcionará corretamente.
  • If you do not have the ITEM_ID for a specific product variant at the time of calling the event (for example, when the customer has not yet selected a specific size for the product), you can send the value of ITEMGROUP_ID to the item_ids parameter. This value must correspond with the value you send in the product feed.


Consent

O consent parameter permite que sites ajustem o comportamento do GLAMI Pixel de acordo com as permissões dos usuários em relação ao armazenamento de cookies. Caso for armazenamento for permitido (valor 1) ou o parâmetro não estiver definido, a GLAMI processa os dados por completo. Caso o usuário não permitir o armazenamento (valor 0), os dados serão processados de forma anônima e os dados deste usuário não serão utilizados.

O GLAMI PiXel é crucial para a otimização de resultados da sua loja. Por isso, está de acordo com Lei Geral de Proteção de Dados e suporta o parâmetro Consent, pelo qual a loja parceira pode informar a GLAMI se o usuário concordou ou não com o armazenamento de cookies e dados analíticos.


exemplos de código Glami piXel


Para os exemplos a seguir, você precisa de uma chave API. Você vai recebê-la após cadastar a loja.
Para tal, use nossa página de cadastro de loja.

  • Página de produto -> ViewContent (type=product)
  • Página de categoria -> ViewContent (type=category)
  • Evento 'Adicionar a sacola' -> AddToCart
  • Página de confirmação do pedido -> Purchase
  • Qualquer outra página -> PageView

Inclua o código nas páginas do seu site antes da terminação </head> tag no HTML da página:


PageView

Adicione este código padrão a todas as páginas. Ele pode ser ampliado ao utilizar outros eventos. Veja abaixo.

<!-- Glami piXel for ONLY_SAMPLE_SHOP_FOR_EXAMPLE -->
<script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//glamipixel.com/js/compiled/pt.js', 'glami');

glami(
    'create',
    'INSERT_YOUR_API_KEY_HERE',
    'br',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
</script>
<!-- End Glami piXel -->


ViewContent (product)

Adicione este código de extensão à todas as páginas de produtos.

glami(
    'track',
    'ViewContent',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        content_type: 'product',
        item_ids: ['ADZXFLUX002'] // currently viewed product ID. Use the same ID as you use in the feed (ITEM_ID)
    }
);

Exemplo de página de produto.

Este exemplo mostra como o código deverá aparecer em todas as páginas de produto.

<!-- Glami piXel for ONLY_SAMPLE_SHOP_FOR_EXAMPLE -->
<script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//glamipixel.com/js/compiled/pt.js', 'glami');

glami(
    'create',
    'INSERT_YOUR_API_KEY_HERE',
    'br',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'track',
    'ViewContent',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        content_type: 'product',
        item_ids: ['ADZXFLUX002'] // currently viewed product ID. Use the same ID as you use in the feed (ITEM_ID)
    }
);
</script>
<!-- End Glami piXel -->


ViewContent (category)

Adicione este código de extensão à todas as páginas da categorias.

glami(
    'track',
    'ViewContent',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        content_type: 'category',
        item_ids: ['ADZXFLUX001', 'NRS02', 'NRS03', 'NRS04', 'NRS05', 'NRS06', 'NRS07', 'NRS08', 'NRS09', 'NRS10'], // currently viewed first 10 product IDs in the category. Use the same IDs as you use in the feed (ITEM_ID).
        category_text: 'Men | Shoes | Sneakers' // currently viewed category_text. Use the same category_text as you use in the feed (CATEGORYTEXT)
    }
);

Exemplo de página de categoria.

Este exemplo mostra como o código deverá aparecer em todas as páginas de categoria.

<!-- Glami piXel for ONLY_SAMPLE_SHOP_FOR_EXAMPLE -->
<script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//glamipixel.com/js/compiled/pt.js', 'glami');

glami(
    'create',
    'INSERT_YOUR_API_KEY_HERE',
    'br',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'track',
    'ViewContent',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        content_type: 'category',
        item_ids: ['ADZXFLUX001', 'NRS02', 'NRS03', 'NRS04', 'NRS05', 'NRS06', 'NRS07', 'NRS08', 'NRS09', 'NRS10'], // currently viewed first 10 product IDs in the category. Use the same IDs as you use in the feed (ITEM_ID).
        category_text: 'Men | Shoes | Sneakers' // currently viewed category_text. Use the same category_text as you use in the feed (CATEGORYTEXT)
    }
);
</script>
<!-- End Glami piXel -->


AddToCart

Adicione esse código ao evento quando um item for adicionado a sacola.

glami(
    'track',
    'AddToCart',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002'], // product ID currently added to a cart. Use the same ID as you use in the feed (ITEM_ID).
        value: 199.00, // product price
        currency: 'BRL' // product price currency
    }
);


Purchase

Adicione esta extensão à página de obrigado/confirmação.

glami(
    'track',
    'Purchase',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002', 'NRS01'], // bought product IDs. Use the same IDs as you use in the feed (ITEM_ID).
        value: 298.50, // order value (sum of product values)
        currency: 'BRL', // order value currency
        transaction_id: 'ORDER212' // order ID
    }
);

Exemplo de página de obrigado/confirmação.

Este exemplo mostra como um código completo aparece na página de obrigado/confirmação.

<!-- Glami piXel for ONLY_SAMPLE_SHOP_FOR_EXAMPLE -->
<script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//glamipixel.com/js/compiled/pt.js', 'glami');

glami(
    'create',
    'INSERT_YOUR_API_KEY_HERE',
    'br',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'track',
    'Purchase',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002', 'NRS01'], // bought product IDs. Use the same IDs as you use in the feed (ITEM_ID).
        value: 298.50, // order value (sum of product values)
        currency: 'BRL', // order value currency
        transaction_id: 'ORDER212' // order ID
    }
);
</script>
<!-- End Glami piXel -->


Implementando pixels múltiplos em uma página

Por favor, siga estas instruções quando desejar incluir múltiplos códigos piXel em uma só página.

Quando quiser incluir vários códigos piXel em uma única página, cada piXel deve ser identificado por um nome único. Você fornecerá este nome em 'criar chamada'. Quando houver apenas um código piXel, não é preciso usar este identificador.

glami(
    'create',
    'API_KEY',
    'cz',
    'PIXEL_IDENTIFIER',
    {
        consent: 1 // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

O mesmo nome único deve ser usado para chamadas nesse código piXel.

glami(
    'PIXEL_IDENTIFIER.track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'PIXEL_IDENTIFIER.track',
    'Purchase',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002'],
        value: 298.50, // order value (sum of product values),
        currency: BRL,
        transaction_id: 'ORDER2'
    }
);

Este exemplo mostra como um código completo aparece na página de obrigado/confirmação.

<!-- Glami piXel for multiple shops -->
<script>
(function(f, a, s, h, i, o, n) {f['GlamiTrackerObject'] = i;
f[i]=f[i]||function(){(f[i].q=f[i].q||[]).push(arguments)};o=a.createElement(s),
n=a.getElementsByTagName(s)[0];o.async=1;o.src=h;n.parentNode.insertBefore(o,n)
})(window, document, 'script', '//glamipixel.com/js/compiled/pt.js', 'glami');

// <!-- BR tracker start
glami(
    'create',
    'BR_API_KEY',
    'br',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'track',
    'Purchase', {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002', 'NRS01'],
        value: 298.50,
        currency: 'BRL',
        transaction_id: 'ORDER1'
    }
);
// BR tracker end -->

// <!-- SK tracker start
glami(
    'create',
    'SK_API_KEY',
    'sk',
    'sktracker',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'sktracker.track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'sktracker.track',
    'Purchase',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002'],
        value: 50.00,
        currency: 'EUR',
        transaction_id: 'ORDER2'
    }
);
// SK tracker end -->

// <!-- some other tracker tracker start
glami(
    'create',
    'SOME_OTHER_API_KEY',
    br,
    'sometrackername',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);
glami(
    'sometrackername.track',
    'PageView',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
    }
);

glami(
    'sometrackername.track',
    'Purchase',
    {
        consent: 1, // The user's consent to the storage analytical cookies on their devices. [0 = no; 1 = yes]
        item_ids: ['ADZXFLUX002'],
        value: 298.50, // order value (sum of product values),
        currency: BRL,
        transaction_id: 'ORDER2'
    }
);
// some other tracker end -->
</script>
<!-- End Glami piXel -->

You can use this method to change the consent parameter value for GLAMI Pixel at any time. In case you use a cookie consent manager (e.g. cookiebot or other), it is necessary to submit this consent to GLAMI Pixel after it has been granted. GLAMI Pixel is often loaded before the actual consent through the Cookie consent manager. In this case, it is necessary to call the following method and pass a new value to the consent parameter.


glami('set', {consent: 1});
            

Content Security Policy (CSP) header settings

If your web uses Content Security Policy, you have to enable GLAMI Pixel Javascript code on your page. Please add the following CSP rules into your HTTP response header on your web server:

Content-Security-Policy: default-src 'self'; script-src 'unsafe-inline' www.glami.com.br glamipixel.com; img-src www.glami.com.br glamipixel.com