# Установка SmartPixel на сайт

## **SmartPixel**

SmartPixel — это JS-код для сбора, сегментирования аудитории, аналитики и создания look-alike аудиторий.

{% hint style="success" %}
**После установки SmartPixel на сайт, вы сможете:**

* проводить ретаргетинговые кампании;
* создавать различные аудиторные сегменты на основе собственных данных о пользователях;
* создавать Look-alike аудитории;
* создавать аудитории на основе событий (нажатий на кнопку);
* получать статистику по Post-view и post-click конверсиям;
* оптимизировать кампании на основе показателей bounce rate и конверсий;
* персонализировать креативы для посетителей разных разделов сайта;
* анализировать интересы пользователей по их поведению на сайтах и в приложениях с помощью Smart List;
* оценивать эффективность каждого рекламного канала с помощью Cross-device attribution.
  {% endhint %}

Иногда у рекламодателей возникают сомнения в необходимости установки пикселя и страх, что их данные уходят в сторонние DMP для построения сегментов или перепродаются. Мы гарантируем, что ваши данные находятся под защитой, и что аудитории, которые вы создаете в своем аккаунте, не могут быть использованы кем-то еще.

#### **Где найти SmartPixel?**

Перейдите в раздел «Мои аудитории» на панели инструментов, напротив нужного облака данных нажмите на значок <> Коды.

Облако данных создается автоматически после того, как вы создадите рекламодателя. Подробнее о том, как создать рекламодателя читайте[ здесь](https://docs.hybrid.ai/platform-documentation/advertiser).

![ Код SmartPixel можно найти в разделе «Мои аудитории» ](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAzurVhFf9V3ESeCJ48%2Fuploads%2FnUzbCMlOrQLtbAUVTMDB%2Fimage.png?alt=media\&token=67f7d614-ba5d-4e46-af58-60c93360d7ce)

#### **Как установить SmartPixel?**

SmartPixel устанавливается на все страницы сайта (непосредственно в HTML-код страниц). Мы рекомендуем добавлять код в начале страниц рядом с другими счетчиками. Если по каким-либо причинам вас это не устраивает, вы можете разместить код в любом месте страницы, код при этом должен находиться между открывающим тегом и закрывающим тегом \</body>

```
<script>
    window._txq = window._txq || [];
    var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '//st.hybrid.ai/txsp.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
    _txq.push(['createPixel', '5ede0a524d506ea5a87e3c1b']);
    _txq.push(['track', 'PageView']);
</script>
```

Пример установки

```
<div class="right">
<form method="get" action="/search.php" class="search">
<input type="search" name="q" id="search" placeholder="Найти запись">
<button type="submit">Найти</button>
</form>
<div class="subscribe">
<div class="subtitle">
МЫ В СОЦСЕТЯХ
</div>
<div class="social">
<a class="vk-icon" href="[<http://vk.com/club71826437>](<http://vk.com/club71826437>)"></a>
</div>
</div>
<div class="sections">
<span>Категории</span>
<a href="/post/sections/8/">Features</a><a href="/post/sections/12/">Must-know</a><a href="/post/sections/10/">Кейсы</a><a href="/post/sections/9/">Компания</a><a href="/post/sections/7/">События</a>
</div>
</div>
<script>
window._txq = window._txq || [];
var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = '[//st.hybrid.ai/txsp.js](<https://st.hybrid.ai/txsp.js>)';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(s);
_txq.push(['createPixel', '5ede0a524d506ea5a87e3c1b']);
_txq.push(['track', 'PageView']);
</script>
</body>
```

После корректной установки кода на сайт вы увидите индикатор «Активен», и аудитория посетителей сайта под названием «Все посетители» начинает собираться.

![Аудитория начинает собираться после правильной установки пикселя](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAzurVhFf9V3ESeCJ48%2Fuploads%2F5nFCQ31gCYv4yK8mZYU3%2Fimage.png?alt=media\&token=60f4ab1e-6838-4cda-abf8-1b7d82f1d837)

### Аудитории по событиям

Чтобы учитывать определенные действия совершенные на сайте, например, нажатие на кнопку, требуется установить дополнительные JS-коды.

Код на кнопку будет разный в зависимости от способа его установки:

1\. Если устанавливать через GTM, то используем следующий код:

```
<script>
    window._txq = window._txq || [];
  _txq.push(['track', 'next_page'])
</script>
```

2\. Если устанавливать напрямую через код сайта, то используем:

```
onclick="_txq.push(['track', 'next_page']);
```

{% hint style="info" %}
Если при этом требуется установить код на несколько кнопок, необходимо изменить часть ‘next\_page’ на название кнопки.
{% endhint %}

После того, как дополнительные коды будут установлены на кнопки, требуется совершить клик по этим кнопкам. Это нужно для того, чтобы событие отработало хотя бы 1 раз и отправилось к нам в Hybrid Platform.

{% hint style="warning" %}
Если не совершить клик по кнопке, событие не появится в консоли.
{% endhint %}

Следующим шагом будет создание аудитории на основе события. Для этого переходим в раздел «Мои аудитории» — нужное облако данных — «Создать аудиторию» — «События».

О том, как правильно создавать различные типы аудиторий, вы можете узнать [здесь](https://docs.hybrid.ai/platform-documentation/moi-auditorii).

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAzurVhFf9V3ESeCJ48%2Fuploads%2FbwlYEDDkOIL73eKYtv7m%2Fimage.png?alt=media\&token=84e9742a-5c16-4ebb-9dad-85f27b53d4bc)

При создании аудитории на основе события можно будет выбрать название события (название кнопки, которое вы пропишете в коде: например, ‘next\_page’).

Если данное событие — целевое действие, его следуют отметить галочкой «считать конверсии».

После правильной настройки учета конверсий вам будет доступна статистика по следующим колонкам:

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAzurVhFf9V3ESeCJ48%2Fuploads%2FnkB6MMdOBo4MWjaatJJV%2Fimage.png?alt=media\&token=76ec5b7a-90d6-4c62-afd0-f2cd3f23dba6)

На основе этой статистики вы можете наиболее эффективно оптимизировать рекламную кампанию:

* перераспределять бюджет на конверсионные площадки;
* исключать площадки с низкими показателями;
* собирать WL из конверсионных площадок.

{% hint style="info" %}
Обобщим информацию по шагам создания событий.

1\. Установить SmartPixel на каждую страницу сайта.

2\. Установить коды событий на кнопки.

3\. Прокликать кнопки, чтобы событие отработало и отправилось к нам в консоль.

4\. Создать аудиторию на основе события.

5\. Если данное событие — целевое действие, отметить «считать конверсии».

6\. Отлеживать дополнительную статистику post-click и post-view.
{% endhint %}

### **ZeroPixel**

Кроме SmartPixel вы можете найти в интерфейсе Hybrid Platform код под названием ZeroPixel.

ZeroPixel также используется для сбора аудиторий с конкретных страниц или для сбора аудиторий, совершивших определенные события.&#x20;

ZeroPixel легче проходит проверку от службы безопасности вашей компании, поэтому в некоторых ситуациях можете использовать его как альтернативу SmartPixel. Это решение отлично подойдет для сбора аудитории с сайтов банков, недвижимости и многое другое.&#x20;

Пиксель имеет вид картинки 0x0.

```
<img src='[//dss.hybrid.ai/Pixel/JsAction2?TagId=5ede0a524d506ea5a87e3c1b&ActionId=157018046584](<https://dss.hybrid.ai/Pixel/JsAction2?TagId=5ede0a524d506ea5a87e3c1b&ActionId=157018046584>)' width="0" height="0" />
```

Пример:

```
<script type='text/javascript'>
var man = new Image();
man.src = '//dss.hybrid.ai/Pixel/JsAction2?TagId=5ede0a524d506ea5a87e3c1b&ActionId=157018046584';
</script>
```

**Где найти ZeroPixel?**

Путь: Мои аудитории (на левой панели) — Нужное облако данных — Создать аудиторию — Другие аудитории — ZeroPixel.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MAzurVhFf9V3ESeCJ48%2Fuploads%2FCxYuuWhFvDnj68jmUAZY%2FZeroPixel.png?alt=media\&token=66ba1da0-e4a6-49a6-bc63-be9320c424bd)

### Пиксели и GTM

Пиксели Hybrid можно установить на сайт как напрямую, так и через GTM.&#x20;

Инструкция как установить через GTM:

1. Создаем новый тег в GTM.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MAzxH_Sl_oxkLu05Sif%2F-MB-JRL7f-6Snmv4zBeN%2F__2020-06-18__11.02.24.png?alt=media\&token=5716b679-23a4-446f-83bf-9bb306ddeac5)

2\. Нажимаем на «Конфигурация тега».

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-ZnUraKm24V-YM1Yf%2F2.png?alt=media\&token=d855b07b-a724-43c4-9d97-acb058232b53)

3\. Выбираем «Пользовательский HTML».

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-ZxHmOI3gOW_ylPgO%2F3.png?alt=media\&token=de39e423-94ea-4a71-ba05-9b259d12efa9)

4\. Вставляем SmartPixel.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_08eDa9mmyOJdFDz%2F4.png?alt=media\&token=bb18bb25-0879-4d5b-a4fd-737aec18153c)

5\. Сохраняем тег.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_1zjdb2AUscKydXT%2F5.png?alt=media\&token=b8cd41fe-5ca9-4ce1-8604-18037b89214b)

6\. Присваиваем название тегу и сохраняем.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_4KskoLOIPwij2T1%2F6.png?alt=media\&token=0e895308-6116-4255-aedb-3a831bfbacfc)

7\. Кликаем на тег для редактирования.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_7Adv82YrIk5lGH8%2F7.png?alt=media\&token=bf26840c-76da-4f22-a050-38ea832990e1)

8\. Добавляем триггер.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_QgRtRfcJ_BT5gSA%2F8.png?alt=media\&token=8c2b0066-4320-4471-85ca-861e704a34b7)

9\. Выбираем «All Pages».

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_M8TexNeCRXBWIOn%2F9.png?alt=media\&token=8d96200d-63f1-44bf-9f60-0df82186060c)

10\. Сохраняем настройки тега.

![](https://2131244838-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MAzurVhFf9V3ESeCJ48%2F-MB-ZbdSI__3_8aDGngi%2F-MB-_YbT8jRUPA9ens8B%2F10.png?alt=media\&token=767ce976-b259-4fc4-b173-04c5196b1e7a)

Если у вас остались какие-либо вопросы, обратитесь к своему персональному менеджеру или напишите в службу поддержки <support@hybrid.ai>.