# Recombee Shoptet GTM Integration

> Source: https://docs.recombee.com/shoptet_gtm_integration

> For the complete documentation index, see [llms.txt](/llms.txt).

**Table of contents**

* [Shoptet Setup](#shoptet-setup)
* [Creating Triggers](#creating-triggers)  
   * [DOM Ready Event](#dom-ready-event)  
   * [AddToCart Event](#addtocart-event)
* [Creating Tags](#creating-tags)  
   * [GTM Gallery Integration](#gtm-gallery-integration)  
   * [Manual Template Import](#manual-template-import)  
   * [Initialization Tag](#initialization-tag)  
   * [Interaction Tags](#interaction-tags)  
         * [Detail View](#detail-view)  
         * [Rating](#rating)  
         * [Purchase](#purchase)  
         * [Cart Addition](#cart-addition)
* [Done!](#done-)

# Recombee Shoptet GTM Integration

In order to set up GTM integration, you will need to create a [Google Tag Manager](https://tagmanager.google.com/) account.

![](/img/headings/shoptet-gtm.png) 

Recombee GTM integration supports four types of user interactions in the Shoptet platform:

* Add to cart
* Detail view
* Purchase
* Rating

## Shoptet Setup

Follow instructions for initial setup.

<https://podpora.shoptet.cz/hc/cs/articles/360003160871-Google-Tag-Manager>

## Creating Triggers

Triggers are needed in order to add support for sending Add to cart and Purchase interactions.

Select Triggers in the menu and add a new trigger on the **DOM Ready event** and also **Custom Events** called _“AddToCart”_ and_“Purchase”_.

### DOM Ready Event

1. Navigate to the **Triggers** section
2. Click the **New** button and choose the **DOM Ready** type
3. On the triggers fire selection keep the **All DOM Ready Events** and name the trigger accordingly

[![Create trigger - DOM Ready Event - Step 1](/img/shoptet_gtm/shoptet-gtm-dom-ready-event.png)](/img/shoptet_gtm/shoptet-gtm-dom-ready-event.png)

[![Create trigger - DOM Ready Event - Step 2](/img/shoptet_gtm/shoptet-gtm-dom-ready-event-2.png)](/img/shoptet_gtm/shoptet-gtm-dom-ready-event-2.png)

### AddToCart Event

1. Navigate to the **Triggers** section
2. Click the **New** button and choose the **Custom Event** type
3. Fill the **Event name** with _“addToCart”_ and select the **All Custom Events** option below.

[![Create trigger - AddToCart Event - Step 1](/img/shoptet_gtm/shoptet-gtm-addtocart.png)](/img/shoptet_gtm/shoptet-gtm-addtocart.png)

[![Create trigger - AddToCart Event - Step 2](/img/shoptet_gtm/shoptet-gtm-addtocart-2.png)](/img/shoptet_gtm/shoptet-gtm-addtocart-2.png)

## Creating Tags

Our custom GTM tags will send interactions to Recombee. You can create tags for all supported interactions or just those you want to send.

### GTM Gallery Integration

We have published [Recombee Shoptet integration](https://tagmanager.google.com/gallery/#/owners/recombee/templates/shoptet-gtm-integration), which you can use for easy setup.

Go to the **Tags section**, click **New** and search for the **Recombee Shoptet interactions** template.

### Manual Template Import

While we are waiting for Google approval to be included in the GTM template gallery, you can simply import the Recombee Shoptet template for use.

Download the template file from our Github repository ([GTM Integration Github](https://github.com/recombee/shoptet-gtm-integration) \- _template.tpl_)

1. In GTM select **Templates** in the left side menu and click on**New**
2. Import the template by clicking on the dots and select **Import**
3. Select downloaded _template.tpl_ file and save your new template

Now you can use our template when creating your tags.

### Initialization Tag

We provide one tag with multiple types. You always need to create an initialization tag.

Tag that initializes the environment for sending interactions. You will need it for sending interactions to work.

1. Select **Initialization** type in **Tag Interaction Type**
2. Fill the **Database ID** with the ID of your Recombee database_(e.g., \`shoptet-gtm-example-prod\`)_
3. Fill **region** of your database _(e.g., eu-west)_
4. Fill **public key**

**You can find all the information in the settings of your database in the Recombee admin.**

[![Initialization tag](/img/shoptet_gtm/shoptet-gtm-Initialization-tag.png)](/img/shoptet_gtm/shoptet-gtm-Initialization-tag.png)

### Interaction Tags

You can choose which interactions to send by creating a tag for each type.

#### Detail View

To create a tag for Detail view interaction, select a **Detail View**option in **Tag Interaction Use Case** and name it accordingly.

Click on **Advanced Settings** and **Tag Sequencing**, choose **Fire tag before xxx fires**, and select your **initialization tag** created before.

For **triggering**, select the **DOM Ready** trigger created in the first steps.

[![Detail view](/img/shoptet_gtm/shoptet-gtm-interaction-tag-detail-view.png)](/img/shoptet_gtm/shoptet-gtm-interaction-tag-detail-view.png)

#### Rating

To create a tag for Rating interaction, select a **Rating** option in**Tag Interaction Use Case** and name it accordingly.

Click on **Advanced Settings** and **Tag Sequencing**, choose **Fire tag before xxx fires**, and select your **initialization tag** created before.

For **triggering**, select the **DOM Ready** trigger created in the first steps.

[![Rating](/img/shoptet_gtm/shoptet-gtm-interaction-tag-rating.png)](/img/shoptet_gtm/shoptet-gtm-interaction-tag-rating.png)

#### Purchase

To create a tag for Purchase interaction, select a **Purchase** option in **Tag Interaction Use Case** and name it accordingly.

Click on **Advanced Settings** and **Tag Sequencing**, choose **Fire tag before xxx fires**, and select your **initialization tag** created before.

For **triggering**, select the **DOM Ready** trigger created in the first steps.

[![Purchase](/img/shoptet_gtm/shoptet-gtm-interaction-tag-purchase.png)](/img/shoptet_gtm/shoptet-gtm-interaction-tag-purchase.png)

#### Cart Addition

To create a tag for Cart addition interaction, select a **Cart addition**option in **Tag Interaction Use Case** and name it accordingly.

Click on **Advanced Settings** and **Tag Sequencing**, choose **Fire tag before xxx fires**, and select your **initialization tag** created before.

For **triggering**, select the **AddToCart** trigger created in the first steps.

[![Cart addition](/img/shoptet_gtm/shoptet-gtm-interaction-cart-addition.png)](/img/shoptet_gtm/shoptet-gtm-interaction-cart-addition.png)

## Done!