Добавление кода отслеживания Google Tag Manager в магазин Shopify

Для отслеживания маркетинговой активности и управления тегами в Google создан специальный инструмент Google Tag Manager (GTM).

Google Tag Manager scheme

  • Теги позволяют отслеживать поведение покупателя на сайте магазина.
  • На одной странице магазина может содержаться множество кодов для различных систем аналитики.
  • Все теги размещаются в контейнере, который внедряется на страницы магазина.
  • GTM позволяется управлеть содержимым контейнеров. Причем теги можно встраивать не только для служб Google, но любых других сервисов.
  • С GTM работают маркетологи, вмешательство программистов после внедрения контейнера не требуется.

О работе GTM можно почитать на в статье на habrahabr.ru и kasper.by.

Порядок действий:
1. Регистрация в GTM, получение GTM-кода отслеживания и скрипта для встраивания контейнера.

Пример скрипта ниже, единственное отличие в том, что у Вас будет вместо символов Х в коде GTM-XXXXXX содержаться индивидуальный код отслеживания.

<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

2. Скрипт нужно добавить в магазине Shopify на странице theme.liquid сразу после тега <body>.

3. В админчасти сайта в разделе Settings -> CheckOut -> Additional content and scripts добавить код:

<script>

var dataLayer = dataLayer || [];
var transactionId = ‘{{order.order_number}}’;
var cartProducts = [];

{% for line_item in line_items %}
cartProducts.push({
‘id’: transactionId,
‘sku’: ‘{{line_item.sku}}’,
‘name’: ‘{{ line_item.title | replace: «‘», «\'» }}’,
‘category’: ‘{{line_item.type}}’,
‘price’: ‘{{line_item.line_price | times: 0.01}}’,
‘quantity’: ‘{{line_item.quantity}}’ });
{% endfor %}

dataLayer.push({
‘transactionId’: transactionId,
‘transactionTotal’: {{total_price | times: 0.01}},
‘transactionProducts’: cartProducts,
‘transactionCurrency’: {{shop.currency}},
‘transactionTax’: {{tax_price | times: 0.01}},
‘transactionShipping’: {{shipping_price | times: 0.01}},
‘event’: ‘trackTrans’ });

</script>

4. В админчасти в разделе Online store -> Preferences в раздел «Additional Google Analytics Javascript» добавить скрипт (вместо символов Х в коде GTM-XXXXXX содержаться индивидуальный код отслеживания)

if(location.hostname == "checkout.shopify.com"){
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');
};

С методикой встраивания можно ознакомиться в этой статье.

Posted on 28.04.2016 in SEO

Share the Story

About the Author

Back to Top