# Metabot Widget и GTM

#### <span data-key="1b963d31e5b5427fabc99176f5513c29">Настройка чат-виджета через Google Tag Manager (GTM)  
</span>

<span style="font-weight: 400;">Чтобы настроить чат-виджет через </span><span data-key="1b963d31e5b5427fabc99176f5513c29">GTM нужно выполнить следующие действия:</span>

<span style="font-weight: 400;">1. Войти в Google аккаунт по ссылке </span>[<span style="font-weight: 400;">https://tagmanager.google.com/.</span>](https://tagmanager.google.com/)

<span style="font-weight: 400;">2. Далее создать аккаунт как показано на рисунке ниже.</span>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/Fsz8TA7ZXOk46B7R-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/Fsz8TA7ZXOk46B7R-izobrazenie.png)

<span style="font-weight: 400;">3. Заполнить контейнер и создать запись как показано на рисунке ниже.  
</span>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/4ve3xNWWxWBgTTOG-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/4ve3xNWWxWBgTTOG-izobrazenie.png)

<span style="font-weight: 400;">4. В остальных диалоговых окнах согласиться и нажать кнопку **ОК**.</span>

<p class="callout info"><span style="font-weight: 400;">Если аккаунт GTM уже был создан, то достаточно в аккаунте добавить новый контейнер.</span></p>

<span style="font-weight: 400;">5. Добавить новый тег.</span>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/wXgAKohCCFEFpABd-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/wXgAKohCCFEFpABd-izobrazenie.png)

6\. Нажать на кнопку в блоке **Конфигурация тега**.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/KHM1000aKy5A3eWO-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/KHM1000aKy5A3eWO-izobrazenie.png)

7\. Выбрать пункт **Пользовательский HTML**.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/xLvBdFNKlcg8HmK1-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/xLvBdFNKlcg8HmK1-izobrazenie.png)

<span style="font-weight: 400;">8. В административной панели платформы Metabot, необходимо </span>с<span style="font-weight: 400;">оздать подключение канала Metabot Widget (если ещё нет) и з</span><span style="font-weight: 400;">агрузить в CDN скрипт-загрузчик.</span>

<p class="callout info"><span style="font-weight: 400;">Запись должна быть отмечена зеленым значком со значением “200”.</span><span style="font-weight: 400;">  
</span></p>

9\. Скопировать тело скрипта в буфер.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/739nkJpeJlsBE0em-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/739nkJpeJlsBE0em-izobrazenie.png)

10\. Продолжить заполнение тега в GTM, для этого выполнить по пунктам:

 10.1. Придумать имя тега.

 10.2. Вставить из буфера обмена скопированный скрипт.

 10.3. Создать GTM-триггер.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/4ubq2Z8OR9mhQX0s-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/4ubq2Z8OR9mhQX0s-izobrazenie.png)

 10.4. Выбрать пункт All Pages.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/aA5EwlhV3tTrFp57-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/aA5EwlhV3tTrFp57-izobrazenie.png)

 10.5. Нажать кнопку **Сохранить**.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/OaTHisatKbcWgVUJ-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/OaTHisatKbcWgVUJ-izobrazenie.png)

11\. В рабочей области нажать кнопку **Отправить.**

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/Q9Jixv3yHX4ajs4M-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/Q9Jixv3yHX4ajs4M-izobrazenie.png)

12\. Заполнить форму указав название версии, например, ver1 и по желанию описание версии. Затем нажать кнопку **Опубликовать**.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/E1VpR7w1lgeBlVYz-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/E1VpR7w1lgeBlVYz-izobrazenie.png)

13\. После успешной публикации версии, в<span style="font-weight: 400;">ернуться в **Рабочую область** и открыть popup с кодами тег-менеджера.</span>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/s6FqkV7BYazRUEmZ-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/s6FqkV7BYazRUEmZ-izobrazenie.png)

14\. Скопировать фрагменты кода в вставить в соответствующие разделы на сайте в <span style="font-weight: 400;">head и body нужной html-страницы.</span>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/y8gJpHoZyguol52w-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/y8gJpHoZyguol52w-izobrazenie.png)

Ниже показан пример как это может выглядеть:

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/j42wwrEY262LXVab-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/j42wwrEY262LXVab-izobrazenie.png)

<span style="font-weight: 400;">15. Открыть страницу сайта в браузере. Нужные скрипты подгружаются и виджет запускается.</span>

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/JEyYsBiDbDOUObVs-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/JEyYsBiDbDOUObVs-izobrazenie.png)

#### Редактирование чат-виджета в GTM

При удалении и создании нового канала Metabot Widget на платформе, затем достаточно просто скопировать скрипт из блока **Загрузчик** и вставить его новой версией тега в контейнер GTM.

Для этого в аккаунте GTM открыть тег на редактирование.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/UkxgULHvSk0TKfWh-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/UkxgULHvSk0TKfWh-izobrazenie.png)

Через функцию редактирования вставить скопированный скрипт и сохранить изменения, указав новое имя версии. Далее опубликовать новую версию.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/HU2w5LqlemCxcvyD-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/HU2w5LqlemCxcvyD-izobrazenie.png)

Мы получим новую версию загруженного чат-виджета с платформы.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/glFC251UAWP2R6jd-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/glFC251UAWP2R6jd-izobrazenie.png)

Таким образом без правки кода сайта мы можем переключать на различные версии чат-виджетов.

[![изображение.png](https://docs.metabot24.ru/uploads/images/gallery/2023-07/scaled-1680-/jCBClvfAht3G5iYi-izobrazenie.png)](https://docs.metabot24.ru/uploads/images/gallery/2023-07/jCBClvfAht3G5iYi-izobrazenie.png)