The guide explains how to implement GLAMI Pixel in Google Tag Manager by following a few simple steps. The implementation process requires filling in information such as API key, country code and assigning a trigger for each of the events.
Requirements
- Google Tag Manager account
If you don't have the account, follow the steps from the official Google guide:
https://support.google.com/tagmanager/answer/14842164 - Google Tag Manager container installed on the website
If you haven't installed the container, follow the steps from the official Google guide:
https://support.google.com/tagmanager/answer/14847097 - E-commerce data in the DataLayer
You can check how the ecommerce data is pushed to the DataLayer in the official Google guide:
https://developers.google.com/analytics/devguides/collection/ga4/ecommerce?client_type=gtm
Add GLAMI Pixel template into your workspace
First, add the GLAMI Pixel template into your workspace. It can be found in the Community Template Gallery:
There are four types of events tracked by the GLAMI Pixel:
PageView | Called on every page |
ViewContent | Called every time a customer views a products list (category page) or a single product (product page) |
AddToCart |
Called every time a customer adds an item to their cart |
Purchase | Called when the order is complete |
- To create a new tag, navigate to the "Tags" page in your Tag Manager and click "New".
- Every Tag consists of two parts - Tag Configuration which tells it what to do and a Trigger which tells it when to do it.
GLAMI Pixel - Configuration
Name the first Tag “GLAMI Pixel - Configuration” and as a tag type select “GLAMI piXel v2”.
To get started, you need to fill out four pieces of information:
- Tag type - Select "Configuration"
- API key - You can find it in your GLAMI Dashboard. Navigate to Settings > GLAMI Pixel
- Country code - This is a two-letter code that identifies the country. You can find it as an Alpha-2 code on this website: https://www.iban.com/country-codes.
Examples: Czechia -> CZ, Italy -> IT, Romania -> RO - More settings - Here you can select the source of the data. If the
Data Layer is correctly configured it will automatically get the right variables. Alternatively, the Manual configuration allows to precisely select variables for each event
Next, you need to select a trigger. For this tag, you can use one of the default triggers called "All Pages." This will ensure that the pixel is active on every page.
GLAMI Pixel - Event
Name the second Tag “GLAMI Pixel - Event” and as a tag type select “GLAMI piXel v2”.
There are only two fields to fill:
- Tag type - Select "Event"
- More settings - Here you can select the source of the data. If the
Data Layer is correctly configured it will automatically get the right variables. Alternatively, the Manual configuration allows to precisely select variables for each event
To proceed, you need to add three triggers to this tag. To create a trigger, navigate to the "Triggers" page in your Tag Manager and click "New".
Name each of them, after the event it is supposed to fire:
- ViewContent - Fire when viewing any product page
- AddToCart - Fire when adding an item to the cart
- Purchase - Fire when the transaction is finished
As a trigger type, select "Custom Event" and fill out the Event name.
If you don't know the right Event name you can easly check it by entering the Preview & Debug mode and performing the action that should fire the event. See the "How to check the implementation?" section of this guide.
Congratulations!
GLAMI Pixel is now implemented. Don't forget to publish your container.
We recommend testing it with a preview mode.
How to check the implementation?
To enable preview and debug mode for the current workspace:
- Click Preview in the top right of your workspace.
- Enter your site's URL.
- Some sites or pages might be broken by an additional debug parameter added to the URL. If so, you can uncheck the box Include debug signal in the URL.
- Click Connect. Your site opens in a new window and displays as Connected in the bottom right.
- Click back on the Tag Assistant tab and click Continue to access the debug interface.
The top navigation bar lists options to access information about Tags, Variables, and the Data Layer, and the left navigation Summary bar shows a list of events.
- Tags: Click Tags to see which tags fired and which tags did not fire. Click a tag to view the tag's properties and associated triggers. When an event is selected in the left column, the Tags tab will show the status of tags for that event.
- Variables: The Variables tab will display detailed information about variables in the selected event, including the type of variable, the type of data returned, and the resolved value. Select an event in the left navigation to view the status of variables at the time the event fired.
- Data Layer: The Data Layer tab will show the exact message as it was pushed to the data layer for the selected event, and what the data layer looks like after the message transaction is complete. Select an event in the left navigation to view the status of the data layer at the time the event fired.
FAQ
Can I implement the Pixel for multiple markets in one domain?
It is not possible to use the GTM template to implement multiple instances of the Pixel in one domain.
How to make a new variable?
For this example, we will create a transaction ID variable. First, navigate to the “Variable” page in your Tag Manager and click “New”. You can name it “Transaction ID” and choose the type “Data Layer Variable”. In the Data Layer Variable Name, you need to write the path to this data, for example: "ecommerce.transaction_id"
How to check my Data Layer Variable Name?
Open preview and debug mode in Tag Manager and select the "Data Layer" Tab.
Here you will see the information that was pushed into the data layer.
For more information you can visit Google Support article, available under the following link: https://support.google.com/tagmanager/answer/6107056
How to create a GTM variable from a dataLayer array? / How to send multiple IDs in a single variable?
Product IDs can be split into two variables.
The first one will be called “transactionProducts” with the type “Data Layer Variable”. For the Data Layer Variable Name, select all the products, for example: ecommerce.items
The second one will be called “transactionProductsIds” with the type “Custom JavaScript”. This will open a new text field in which you can paste the following code:
function () { return .map(function(a) {return a.id;}); }
In the “GLAMI Pixel - Transaction” Tag, you can connect the second variable “transactionProductsIds”.