> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Настройка веб-пикселей Shopify

> Настройка отслеживания конверсий с помощью веб-пикселей при пост-покупочных апселлах

[Веб-пиксели Shopify](https://help.shopify.com/en/manual/promoting-marketing/pixels) — это решение Shopify для отслеживания данных о покупках, таких как коэффициенты конверсии. Есть два основных способа взаимодействия с ними:

* Веб-пиксели приложений
* Пользовательские веб-пиксели

<div id="app-web-pixels">
  # Веб-пиксели приложений
</div>

Некоторые пиксели приложений (например, Omega Facebook Pixel) интегрируются напрямую с веб-пикселями Shopify. Такие приложения не требуют дополнительной настройки для работы с Aftersell.

<div id="custom-web-pixels">
  # Пользовательские веб-пиксели
</div>

Пользовательские пиксели позволяют создавать индивидуальные решения, если в маркетплейсе Shopify нет подходящего пикселя приложения. Ниже описано, как преобразовать существующие скрипты отслеживания со страницы статуса заказа для использования пользовательских пикселей. Прежде чем продолжить, ознакомьтесь с [потенциальными рисками пользовательских пикселей](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks).

Если вы используете именно Google Tag Manager, то Shopify предоставляет [полезную документацию для выполнения этой миграции](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial).

Создание пользовательского пикселя для отслеживания конверсий состоит из 3 основных шагов.

1. Подготовка стороннего JavaScript SDK
2. Настройка отслеживания конверсий с помощью веб-пикселей
3. Подключение вашего пользовательского пикселя

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. Подготовка стороннего JavaScript SDK
</div>

Вам нужно удалить весь HTML, присутствующий в предоставленном коде пикселя. Любой JavaScript, загружаемый через HTML-тег `<script>`, должен вместо этого загружаться исключительно средствами JavaScript.

Этот процесс более подробно описан [здесь](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk).

Пример с использованием Google Tag Manager

*Исходный код пикселя:*

```
<!-- Global site tag (gtag.js) - Google Analytics -->  
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>  
<script>  
  window.dataLayer = window.dataLayer || [];  
  function gtag(){dataLayer.push(arguments);}  
  gtag('js', new Date());  
  gtag('config', ''YOUR_PIXEL_ID'');  
</script>
```

*После удаления HTML и переработки тегов `<script>`:*

```
const script = document.createElement('script');  
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');  
script.setAttribute('async', '');  
document.head.appendChild(script);  
  
window.dataLayer = window.dataLayer || [];  
function gtag(){dataLayer.push(arguments);}  
gtag('js', new Date());  
gtag('config', 'YOUR_PIXEL_ID');
```

Обратите внимание, что пиксельный SDK Google не передаёт данные из пользовательского пикселя Shopify автоматически. Для передачи данных необходимо подписаться на события.

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Настройка отслеживания конверсий с помощью веб-пикселей
</div>

Чтобы отслеживать конверсии с помощью пользовательских пикселей, подпишитесь на событие `checkout_completed`, предоставляемое Shopify. Это событие срабатывает либо на пост-покупочной странице, если она показывается вашему покупателю, либо на странице благодарности, если нет. В любом случае это событие срабатывает только один раз, поэтому дополнительная логика для предотвращения двойного учёта покупки не требуется.

```
analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});
```

Используйте этот справочник, чтобы узнать, какие данные можно получить из `event`.

[Событие Shopify checkout\_completed](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed)

Пример пользовательского пикселя Meta

*Код отслеживания, срабатывающий при завершении оформления заказа:*

```
!function(f,b,e,v,n,t,s)  
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?  
n.callMethod.apply(n,arguments):n.queue.push(arguments)};  
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';  
n.queue=[];t=b.createElement(e);t.async=!0;  
t.src=v;s=b.getElementsByTagName(e)[0];  
s.parentNode.insertBefore(t,s)}(window, document,'script',  
'https://connect.facebook.net/en_US/fbevents.js');  
  
// replace YOUR_PIXEL_ID with the pixel ID provided by third-party  
fbq('init', YOUR_PIXEL_ID);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. Подключение вашего пользовательского пикселя
</div>

Прежде чем добавить пользовательский пиксель, удалите или измените все существующие пиксели, чтобы события клиентов не учитывались дважды. Существующий код пикселя следует вручную удалить отовсюду, где он присутствует, например из `theme.liquid`, `checkout.liquid` (только для мерчантов Plus) и из раздела Additional scripts в настройках оформления заказа.

После этого выполните следующие шаги, чтобы подключить пользовательский пиксель к вашему магазину.

1. Перейдите в Settings > Customer Events > Custom Pixels > Add Custom Pixel

   1. Введите название вашего пользовательского пикселя.
2. Вставьте код вашего пользовательского пикселя в раздел «Code».
3. Убедитесь, что настройки конфиденциальности клиентов настроены правильно.
4. Нажмите «Save» для вашего пользовательского пикселя.
5. Нажмите «Connect», чтобы запустить ваш пользовательский пиксель!