Instrukcja implementacji Glami Pixel

Zdarzenia

Nazwa zdarzenia	Opis zdarzenia	Parametry	Wymagane parametry
PageView	Domyślne zdarzenie, które można umieścić na wszystkich stronach.
ViewContent	Po wyświetleniu strony, takiej jak strona produktu lub kategorii.	content_type, item_ids, value, currency	`content_type`, `item_ids`
AddToCart	Gdy produkt zostanie dodany do koszyka.	value, currency, item_ids	`value`, `currency`, `item_ids`
Purchase	Gdy dokonywany jest zakup.	value, currency, transaction_id, item_ids	`value`, `currency`, `transaction_id`, `item_ids`

Parametry

Nazwa parametru	Opis parametru	Typ parametru
consent	Zgoda użytkownika na przechowywanie analitycznych plików cookie na jego urządzeniach. Ustaw `1` w przypadku, gdy użytkownik wyraził zgodę. W przeciwnym razie ustaw `0` dla "nie".	`number`
content_type	Albo "product", albo "category".	`string`
item_ids	Identyfikator elementu powiązany ze zdarzeniem `ViewContent`, `AddToCart` or `Purchase`. Używaj wartości, które są unikalne i niezmienne w całym sklepie internetowym. Identyfikator składa się z dowolnych kombinacji liczb i ciągów znaków. Użyj tego samego identyfikatora, który podałeś w feedzie dla ITEM_ID. Jeśli nie masz ITEM_ID dla określonego wariantu produktu w momencie wywoływania zdarzenia (na przykład, gdy klient nie wybrał jeszcze określonego rozmiaru produktu), możesz wysłać wartość ITEMGROUP_ID do parametru item_ids. Wartość ta musi odpowiadać wartości wysyłanej w feedzie produktowym.	`array`
value	Wartość użytkownika wykonującego to zdarzenie dla firmy	`number`
currency	Waluta dla określonego `value`..	`string`
transaction_id	ID transakcji	`string`

ID treści

W każdym zdarzeniu można użyć dowolnego z tych identyfikatorów item_ids, category_text, aby zidentyfikować zawartość powiązaną ze zdarzeniem. Użyj najbardziej odpowiedniego rozwiązania dla Twojego sklepu. Użyj tych samych ID, których używasz w swoim product feed.

ITEM_ID

To unikalny numer produktu: ID, którego używasz w swoim sklepie.

GLAMI używa ITEM_ID do rozróżniania produktów i zapewnienia prawidłowego trackingu.

—Wartość może składać się z kombinacji liter, cyfr, ukośników (/), odwrotnych ukośników (\), myślników (-), podkreśleń (_), spacji ( ), kropek (.) i dwukropków (:).
—Warianty produktów, różne rozmiary i kolory muszą mieć unikalne ITEM_ID.
—Podaj tę samą wartość dla parametru ITEM_ID GLAMI Pixel. W przeciwnym razie GLAMI Pixel nie będzie działać poprawnie.
—Jeśli nie masz ITEM_ID dla określonego wariantu produktu w momencie wywoływania zdarzenia (na przykład, gdy klient nie wybrał jeszcze określonego rozmiaru produktu), możesz wysłać wartość ITEMGROUP_ID do parametru item_ids. Wartość ta musi odpowiadać wartości wysyłanej w feedzie produktowym.

Consent

Parametr zgody umożliwia witrynom dostosowanie zachowania GLAMI Pixel na podstawie statusu zgody użytkownika na pliki cookie. Jeśli zgoda istnieje (wartość 1) lub parametr nie jest ustawiony, GLAMI przetwarza dane w całości. Jeśli nie ma zgody (wartość 0), dane będą przetwarzane anonimowo, bez wykorzystania danych o konkretnym użytkowniku.

GLAMI Pixel ma kluczowe znaczenie dla optymalnego funkcjonowania sklepu internetowego GLAMI. Dlatego teraz obsługuje parametr Consent, za pomocą którego partnerski sklep internetowy przekazuje GLAMI informacje o tym, czy użytkownik wyraził zgodę na tworzenie analitycznych plików cookie.

Glami piXel Przykłady kodu

Do poniższych przykładów potrzebny jest klucz API, który otrzymasz po rejestracji sklepu.
Aby to zrobić, użyj naszej strony rejestracji sklepów.

Strona produktu -> ViewContent (type=product)
Strona kategorii -> ViewContent (type=category)
Zdarzenie Dodaj do koszyka -> AddToCart
Strona potwierdzenia zamówienia -> Purchase
Każda inna strona -> PageView

Dodaj kod do stron swojej witryny przed kończącym tagiem </head> w kodzie HTML strony:

PageView

Umieść ten domyślny kod na wszystkich stronach. Kod ten można rozszerzyć za pomocą innych zdarzeń. Zobacz poniżej.

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

Dodaj ten kod rozszerzenia do każdej strony szczegółów produktu.

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

Przykład strony szczegółów produktu.

Ten przykład pokazuje, jak powinien wyglądać kompletny kod na każdej stronie szczegółów produktu.

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

Dodaj ten kod rozszerzenia do każdej strony z listą kategorii.

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

Przykład dla strony kategorii.

Ten przykład pokazuje, jak powinien wyglądać kompletny kod na każdej stronie z listą kategorii.

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

Wywołaj ten kod w zdarzeniu, gdy produkt jest dodany do koszyka.

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

Purchase

Dodaj ten kod rozszerzenia do każdej strony podziękowania/potwierdzenia

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: 'PLN', // order value currency
        transaction_id: 'ORDER212' // order ID
    }
);

Przykład dla strony podziękowania/potwierdzenia.

Ten przykład pokazuje, jak powinien wyglądać kompletny kod na stronie podziękowania/potwierdzenia.

<!-- 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',
    'pl',
    {
        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: 'PLN', // order value currency
        transaction_id: 'ORDER212' // order ID
    }
);
</script>
<!-- End Glami piXel -->

Wdrażanie wielu Pixeli na jednej stronie

Postępuj zgodnie z tymi instrukcjami, gdy chcesz umieścić wiele kodów Pixel na jednej stronie.

Jeśli chcesz umieścić wiele kodów Pixel na jednej stronie, każdy Pixel musi być identyfikowany przez unikalną nazwę. Nazwa ta zostanie podana w wywołaniu create. Gdy jest tylko jeden kod Pixela, nie trzeba używać tego identyfikatora:

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

Ta sama unikalna nazwa musi być następnie używana dla wywołań tego kodu Pixela:

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: PLN,
        transaction_id: 'ORDER2'
    }
);

Ten przykład pokazuje, jak powinien wyglądać kompletny kod na stronie podziękowania/potwierdzenia.

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

// <!-- PL tracker start
glami(
    'create',
    'PL_API_KEY',
    'pl',
    {
        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: 'PLN',
        transaction_id: 'ORDER1'
    }
);
// PL 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',
    pl,
    '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: PLN,
        transaction_id: 'ORDER2'
    }
);
// some other tracker end -->
</script>
<!-- End Glami piXel -->

Możesz użyć tej metody, aby w dowolnym momencie zmienić wartość parametru zgody dla GLAMI Pixel. W przypadku korzystania z menedżera zgody na pliki cookie (np. Cookiebot lub inny), konieczne jest przekazanie tej zgody do GLAMI Pixel po jej udzieleniu. GLAMI Pixel często jest ładowany przed faktyczną zgodą poprzez Menedżera zgody na pliki cookie. W takim przypadku konieczne jest wywołanie następującej metody i przekazanie nowej wartości do parametru zgody.


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

Ustawienia nagłówka Content Security Policy (CSP)

Jeśli Twoja strona internetowa używa Content Security Policy, musisz włączyć kod JavaScript GLAMI Pixel na swojej stronie. Dodaj następujące reguły CSP do nagłówka odpowiedzi HTTP na Twoim serwerze:

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