Guía de implementación de Glami PiXel.

Acciónes

Nombre de la acción	Descripción de la acción	Parametros	Parametros obligatorios
PageView	Acción por defecto, posible de poner en todas las paginas.
ViewContent	When a page is viewed such as a product or category page.	content_type, item_ids, value, currency	`content_type`, `item_ids`
AddToCart	Cuando se añade el producto al carro.	value, currency, item_ids	`value`, `currency`, `item_ids`
Purchase	Cuando se realice la compra.	value, currency, transaction_id, item_ids	`value`, `currency`, `transaction_id`, `item_ids`

Parametros

Nombre de parámetro.	Descripción del parametro	Tipo de parametro
consent	Consentimiento del usuario para el almacenamiento de cookies analíticas en sus dispositivos. Configura `1` en caso de que el usuario haya dado permiso. De lo contrario, configura `0` en "no".	`number`
content_type	Either 'product' or 'category'.	`string`
item_ids	Identificador de producto asociado a la acción. Usa valores que son únicos y inmutables para toda tu tienda. Identificador consiste en cualquiera combinación de numero/cadena de caracteres. Usa el mismo ID que has proporcionada para `ViewContent`, `AddToCart` or `Purchase` en tu feed. 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 de usuario que lleva a cabo esta acción para el negocio.	`number`
currency	Moneda para el `value`. especificado.	`string`
transaction_id	ID de transaccion	`string`

IDs de contenido

En todas las acciones puedes usar cualquiera de estos identificadores para identificar el contenido relacionado con la acción. Usa la solucion mas aprpiada para tu tienda. Por favor, usa los mismos IDs como las que usas en tu item_ids, category_text.

ITEM_ID

Este es un número de producto único - una identificación ID que utilizas dentro de tu tienda online.

GLAMI utiliza el ITEM_ID para distinguir los productos y para asegurar un seguimiento adecuado.

—El valor puede consistir en una combinación de letras, números, barras (/), barras invertidas (\), guiones (-), guiones bajos (_), puntos (.), y dos puntos (:).
—Las variantes de producto y diferencia de tallas y colores deben de tener un único ITEM_ID’s.
—Proporciona el mismo valor para el GLAMI piXel – parámetro ITEM_ID. Sino, el GLAMI piXel no funcionará correctamente.
—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

El parámetro consent permite a los sitios web ajustar el comportamiento de GLAMI Pixel en función del estado de consentimiento de sus usuarios con respecto a las cookies. Si existe consentimiento (valor1) o el parámetro no está configurado, GLAMI procesa los datos en su totalidad. Si no hay consentimiento (valor0), los datos se procesarán de forma anónima, sin el uso de datos sobre un usuario específico.

GLAMI PiXel es fundamental para el funcionamiento óptimo de tu tienda online en GLAMI. Por lo tanto, ahora admite el parámetro Consent, mediante el cual la tienda online asociada pasa información de GLAMI sobre si el usuario ha aceptado la creación de cookies analíticas.

Ejemplos de código Glami piXel

Para los siguientes ejemplos vas a necesitar una clave de API la cual recibirás después de registrar la tienda.
Para ello, utiliza nuestra página de registro de la tienda.

Página de producto -> ViewContent (type=product)
Página de categoría -> ViewContent (type=category)
Acción de añadir al carro -> AddToCart
Página de confirmación de pedido -> Purchase
Cada siguiente pagina -> PageView

Añade el código a las paginas de tu web entes de la etiqueta </head> de cierre en el HTML de la pagina:

PageView

Coloque este código en todas las páginas. Se puede extender este código usando otras acciones.

<!-- 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',
    'INTRODUCE_AQUI_TU_CLAVE_API',
    'es',
    {
        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)

Añade este código de extensión en cada tipo de página de producto.

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)
    }
);

Ejemplo de página de producto.

Este ejemplo muestra cómo debe ser el código completo en cada página de prodcuto.

<!-- 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',
    'INTRODUCE_AQUI_TU_CLAVE_API',
    'es',
    {
        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)

Añade este código de extensión en cada tipo de página de categoria.

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)
    }
);

Ejemplo de página de categoría.

Este ejemplo muestra cómo es un código completo en cada lista de páginas.

<!-- 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',
    'INTRODUCE_AQUI_TU_CLAVE_API',
    'es',
    {
        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

Código para cuando el artículo esta añadido a la tarjeta de la compra.

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: 82.00, // product price
        currency: 'EUR' // product price currency
    }
);

Purchase

Añade este codigo de extensión en cada pagina de agradecimiento-confirmacion.

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: 123.00, // order value (sum of product values)
        currency: 'EUR', // order value currency
        transaction_id: 'ORDER212' // order ID
    }
);

Ejemplo de la pagina de agradecimiento/página de confirmación.

Este ejemplo muestra como debería ser un código completo en una pagina de agradecimiento/confirmacion.

<!-- 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',
    'INTRODUCE_AQUI_TU_CLAVE_API',
    'es',
    {
        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: 123.00, // order value (sum of product values)
        currency: 'EUR', // order value currency
        transaction_id: 'ORDER212' // order ID
    }
);
</script>
<!-- End Glami piXel -->

Implementando los pixels multiples en una pagina

Sigue estas instrucciones si deseas colocar varios píxel en una página.

Cuando quieres colocar varios códigos de píxeles en una página, cada píxel debe identificarse con un nombre único. Vas a proporcionar este nombre en crear llamada. En caso de solamente un código de píxel, no tienes que 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]
    }
);

Se debe usar el mismo nombre único para las llamadas para ese código de píxel:

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: 123.00, // order value (sum of product values),
        currency: EUR,
        transaction_id: 'ORDER2'
    }
);

Este ejemplo muestra como debería ser un código completo en una pagina de agradecimiento/confirmacion.

<!-- 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');

// <!-- ES tracker start
glami(
    'create',
    'ES_API_KEY',
    'es',
    {
        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: 123.00,
        currency: 'EUR',
        transaction_id: 'ORDER1'
    }
);
// ES 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',
    es,
    '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: 123.00, // order value (sum of product values),
        currency: EUR,
        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});

Configuración del encabezado de la política de seguridad de contenido (PSC)

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.es glamipixel.com; img-src www.glami.es glamipixel.com