Glami piXel implementation guide

Events

Event name	Event description	Parameters	Required parameters
PageView	Default event, which can be placed on all 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	When a product is added into shopping cart.	value, currency, item_ids	`value`, `currency`, `item_ids`
Purchase	When a purchase is made.	value, currency, transaction_id, item_ids	`value`, `currency`, `transaction_id`, `item_ids`

Parameters

Parameter name	Parameter description	Parameter type
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	Item identifier associated with `ViewContent`, `AddToCart` or `Purchase` event. Use values that are unique and fixed across your whole e-shop. Identifier consists of any number/string combinations. Use the same ID as you provide in product feed for 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	Value in the user partaking in this event for the business	`number`
currency	Currency for the `value`. specified.	`string`
transaction_id	Transaction ID.	`string`

Content IDs

In each event, you can use any of these identifiers item_ids, category_text to identify content associated with the event. Use the most suitable for your shop solution. Please, use the same IDs as you use in your 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 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

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 code examples

For the following examples you need an API key, which you will receive after shop registration.
To do so, use our shop registration page.

Product page -> ViewContent (type=product)
Category page -> ViewContent (type=category)
Add to cart event -> AddToCart
Order confirmation page -> Purchase
Every other page -> PageView

Add the code to your website pages before the ending </head> tag in the page's HTML:

PageView

Place this default code on all pages. This code can be extended by using other events. See below.

<!-- 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',
    'eco',
    {
        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 (ITEM_ID)
    }
);

Example for product detail page.

This example shows how should complete code look 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',
    'INSERT_YOUR_API_KEY_HERE',
    'eco',
    {
        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)

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

Example for category page.

This example shows how should complete code look 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',
    'INSERT_YOUR_API_KEY_HERE',
    'eco',
    {
        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

Call this code on event when the item is added to the shopping cart.

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

Add this extension code to every thank you/confirmation page.

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

Example for thank you page/confirmation page.

This example shows how the complete code should look like in a thank you/confirmation page.

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

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 then be used for calls of 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'
    }
);

This example shows how the complete code should look like in a thank you/confirmation page.

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

// <!-- ECO tracker start
glami(
    'create',
    'ECO_API_KEY',
    'eco',
    {
        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'
    }
);
// ECO 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',
    eco,
    '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.eco glamipixel.com; img-src www.glami.eco glamipixel.com