HomeEngagementContentDiscoveryOther Resources

# Introduction

[Google Tag Manager](🔗) (GTM) is one of the most popular tag management systems, that allows you to insert and manage tags (short snippets of code) into your website or mobile app. These tags are usually used to set up data collection for your analytics platform, configure conversion tracking with your advertising/attribution platform, or set up experimentation and personalization.

This means that you are able to add Bloomreach Engagement JavaScript SDK Tag to your site even without the need for advanced skills in JavaScript development. However, we strongly recommend checking the final implementation of your GTM configuration with your IT/Website/Mobile app team to check if it poses no threat to the performance of the website/mobile app so that it does not harm the customer experience.



Note that you cannot integrate via Google Tag Manager if you want to use the Guaranteed Experiments. Read more in [Integrating and using Experiments](🔗).

# Basic implementation

We assume that you already have created a GTM container for your website. If you don't have a container yet, create one according to the [setup & installation guide](🔗).

## 1\. Create a new tag

When you are inside your container, click on the "Add a new tag" button in the container homepage or click on "New" in the "Tags" subpage.

1365


## 2\. Choose "Custom HTML tag"

After creating a new tag you have the option to choose a product the tag will be based upon. Click on the "Custom HTML" tag.

1602


## 3\. Configure the tag and click continue

Now copy-paste the Bloomreach Engagement JavaScript code snippet you were given. If you are an advanced user you can take a look at possible alternatives in the [Javascript SDK](🔗) section.

1664


## 4\. Choose fire on All pages and click Create Tag

1702


You can also choose to rename the tag.

Created tags can found in the **Tags** section of the container.

## 5\. Publish changes

After you have created a new tag you can see that the "Unpublished Changes" counter incremented by one. To publish new tags, click the "Publish" button in the top-right corner and then confirm by clicking "Publish now".

That's it!

You have now added Bloomreach Engagement JavaScript Client to your website. You can now see whether the system events, such as session_start or page_visit are flowing in by going back to Bloomreach Engagement to `Overview` > `Project Overview`, or by looking at your [Customers](🔗).

# Event tracking

If you have the basic snippet in the GTM, you can now set up tracking of custom events (e.g. view_category)

## 1\. Create a new tag

When you are inside your container, click on the "Add a new tag" button in the container homepage or click on "New" in the "Tags" subpage.

## 2\. Choose "Custom HTML tag"

After creating a new tag you have the option to choose a product the tag will be based upon. Click on the "Custom HTML" tag.

## 3\. Configure the tag and click continue

Now copy-paste the Bloomreach Engagement JavaScript code snippet below. If you are using existing GTM variables to retrieve values from your website, such as product_id, category_id, page_type or category_name, you can use those in the tracking snippet. Please refer to the [Javascript SDK](🔗) section for more details on event tracking.


## 4\. Choose fire on Some Page Views and specify on which pages this event should be tracked. Then click on Create Tag
It is possible to have tracking in multiple tags. When this happens, and you have tags with exponea.track in different tags than exponea.initialize, it is important to set-up tag sequencing to make the tracking work properly, see image below for example of Tag Sequencing configuration.
666

Created tags can found in the **Tags** section of the container.
## 5\. Publish changes
After you have created a new tag you can see that the "Unpublished Changes" counter incremented by one. To publish new tags, click the "Publish" button in the top-right corner and then confirm by clicking "Publish now".