Chercher

Produits récemment consultés

Commencer par choisir la catégorie

Guide d'implémentation Glami PiXel

Événements

Nom de l’évènement Description de l’évènement Paramètres Paramètres demandés
PageView Événement par défaut, qui peut être placé sur toutes les pages.
ViewContent When a page is viewed such as a product or category page. content_type, item_ids, value, currency content_type, item_ids
AddToCart Quand un produit est ajouté dans le panier value, currency, item_ids value, currency, item_ids
Purchase Quand un achat est passé value, currency, transaction_id, item_ids value, currency, transaction_id, item_ids

Paramètres

Nom du paramètre Description du paramètre Type de paramètre
consent The user's consent to the storage of analytical cookies on their devices. Set 1 in case the user gave permission. Otherwise set 0 for "no". number
content_type Either 'product' or 'category'. string
item_ids Identification d'élément associé à ViewContent, AddToCart or Purchase à des événements. Utilisez des valeurs qui sont uniques et immuables dans tout votre magasin. Identifiant consiste en tous les combinaisons de nombres / chaîne. Utilisez le même identifiant que vous donnez dans l’identification de vos produits pour ID. If you do not have the 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 GROUP_ID to the item_ids parameter. This value must correspond with the value you send in the product feed. array
value Valeur d'un utilisateur effectuant cet événement à l'entreprise number
currency Devise pour levalue. spécifié. string
transaction_id Document de transaction string

Document du contenu

Dans chaque événement, vous pouvez utiliser l'un de ces identifiant sitem_ids, category_text pour identifier le contenu associé à l'événement. Utilisez le mieux adapté à votre magasin. Veuillez utiliser les mêmes identifiants que vous utilisez dans votre product feed.


ITEM_ID

This is a unique product number - an ID that you use within your e-shop.

GLAMI uses ITEM_ID for distinguishing the products and for ensuring proper tracking.

  • —The value may consist of a combination of letters, numbers, slashes (/), backslashes (\), dashes (-), underscores (_), spaces( ), dots (.) and colons (:).
  • —Product variants, different sizes and colors need to have unique ITEM_ID’s.
  • —Provide the same value for the GLAMI piXel – parameter ITEM_ID. Otherwise, GLAMI piXel will not work properly.
  • —If you do not have the 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 GROUP_ID to the item_ids parameter. This value must correspond with the value you send in the product feed.


Consent

The consent parameter enables websites to adjust the behavior of GLAMI Pixel based on their users consent status with regards to cookies. If consent exists (value 1) or the parameter is not set, GLAMI processes the data in full. If there is no consent (value 0), the data will be processed anonymously, without the use of data about a specific user.

GLAMI PiXel is crucial for the optimal functioning of your e-shop on GLAMI. Therefore, it now supports the Consent parameter, by which the partner e-shop passes GLAMI information on whether the user has agreed to the creation of analytical cookies.


Glami piXel exemples de codes


Pour les examples suivants, vous avez besoin d'une clé API que vous recevrez après l'enregistrement de la boutique.
Pour cela, enregistrez vous notre page boutique.

  • Product page -> ViewContent (type=product)
  • Category page -> ViewContent (type=category)
  • Ajouter au panier événement -> AddToCart
  • Page de confirmation de commande -> Purchase
  • Toutes les autres pages -> PageView

Ajoutez le code sur les pages de votre site Web avant l’onglet final </head> dans le HTML de la page:


PageView

Placez ce code par défaut sur toutes les pages. Ce code peut être prolongé en utilisant d'autres événements. Voir ci-dessous.

<!-- 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',
    'INSEREZ_VOTRE_CLE_API_ICI',
    'fr',
    {
        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)

Add this extension code to every product detail page.

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

Example for product detail page.

This example shows how should complete code looks like in every product detail pages.

<!-- 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',
    'INSEREZ_VOTRE_CLE_API_ICI',
    'fr',
    {
        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 (ID)
    }
);
</script>
<!-- End Glami piXel -->


ViewContent (category)

Add this extension code to every category list page.

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 (ID).
        category_text: 'Men | Shoes | Sneakers' // currently viewed category_text. Use the same category_text as you use in the feed (PRODUCT_CATEGORY)
    }
);

Example for category page.

This example shows how should complete code looks like in every category list pages.

<!-- 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',
    'INSEREZ_VOTRE_CLE_API_ICI',
    'fr',
    {
        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 (ID).
        category_text: 'Men | Shoes | Sneakers' // currently viewed category_text. Use the same category_text as you use in the feed (PRODUCT_CATEGORY)
    }
);
</script>
<!-- End Glami piXel -->


AddToCart

Nommez ce code sur l’événement quand le produit est ajouté au panier

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


Purchase

Ajoutez ce code d'extension à chaque page de remerciement / confirmation.

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

Exemple de page de remerciement et de confirmation

Cet exemple montre en quoi devrait ressembler le code complet dans une page de confirmation et de remerciement

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


Implementing multiple pixels on one page

Follow these instructions when you want to place multiple pixel codes into one page.

When you want to place multiple pixel codes into one page, each pixel must be identified by unique name. You will provide this name in create call. When there's only one pixel code, you don't have to use this identifier:

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

The same unique name must be then used for calls for that pixel code:

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

Cet exemple montre en quoi devrait ressembler le code complet dans une page de confirmation et de remerciement

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

// <!-- FR tracker start
glami(
    'create',
    'FR_API_KEY',
    'fr',
    {
        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'
    }
);
// FR 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',
    fr,
    '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});

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