Shopify е патентована платформа, поради което някои аспекти от нейната работа не са подробно обяснени в документацията или във форумите на общността. Една от тези теми е интегрирането по подразбиране с Google Анализ (GA). Има тонове статии и уроци в мрежата, които обясняват как да активирате интеграцията на GA по подразбиране във вашия магазин чрез няколко кликвания, но нито една от тях не обяснява кои данни можете да събирате с помощта на тази интеграция. Твърди се, че може да предоставя данни във формат „Подобрена електронна търговия“, което е доста често срещан избор в наши дни. Този формат позволява събирането на широк спектър от данни за вашите клиенти, тяхното поведение и избор. Но отново, каква информация ще бъде събрана и налична в отчетите на GA зависи от всяко конкретно внедряване.

Първата от двете статии, които планирам да напиша по тази тема, ще хвърли повече светлина върху това как работи интеграцията на GA по подразбиране и какви данни предоставя за вашите отчети на GA. Във втората статия ще се опитам да добавя още персонализирани показатели към събраните данни. Надяваме се, че тази информация ще бъде полезна за вас, дори ако сте добре със съществуващите си отчети на GA. Може би това ще ви даде някои идеи как можете да ги подобрите.

Кратък отказ от отговорност, преди да продължим.

  • Цялата информация в тази статия се основава на публично достъпни източници.
  • Когато казвам „Google Analytics“, имам предвид Universal Analytics за уеб.
  • През декември 2020 г. Google пусна нова версия на Google Анализ, известна още като „Свойства на Google Анализ 4“. Към момента на писане Shopify все още не е предоставил интеграция по подразбиране за него. Сигурен съм, че ще го направят по-късно. Дотогава ще е добра тема за нова статия, но засега говоря само за Universal Analytics.
  • Предполагам, че вече използвате интеграцията на GA по подразбиране във вашия акаунт в Shopify с активирана опция „Подобрена електронна търговия“.

Кратко въведение в подобрената електронна търговия

Форматът за подобрена електронна търговия е логична еволюция на своя предшественик, форматът за електронна търговия. Форматът за електронна търговия проследява две неща:

  • информация за артикулите, добавени в количката;
  • информация за успешни транзакции (известни още като покупки).

С подобрената версия може да съберем много повече данни:

  • данни за импресиите — информация за разгледаните продукти;
  • данни за продукта — информация за продуктите, с които сме взаимодействали;
  • промоционални данни — информация за промоционални активи като банери или всякакви други реклами, които са били гледани;
  • данни за действие — информация, която обяснява какво правим: кликване, покупка, добавяне или премахване на продукт в/от количката и др.

Всеки тип данни, изброен по-горе, може да бъде събран с набор от предварително дефинирани обекти, събития, действия и типове удари. Не можем да ги променим или модифицираме структурата им, но можем да ги напълним с данни и да ги изпратим на GA.

Например, ако искаме да проследяваме подробности за продукта на продуктовата страница, трябва да използваме „productFieldObject” в комбинация с действието „detail” и „ показване на страница” тип посещение.

„productFieldObject“ има следната структура:

{
  id,  <== mandatory field
  name, <== mandatory field
  brand,
  category,
  variant,
  price,
  quantity,
  coupon,
  position
}

В комбинация с действието „detail“ Google препоръчва да попълните id,name,brand, полета категория и вариант. Трябва да кажа, че е малко объркващо да се избира списък с полета за всяка конкретна ситуация, тъй като няма ясни инструкции относно тази тема или поне аз не можах да ги намеря в документацията. Затова използвам „примерите на Google“ като справка и ги променям, ако е необходимо.

Подобреният анализ не събира данни автоматично, затова трябва да напишем някакъв код.

Стъпка 1. Добавете начален код към тага ‹head›

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>

Стъпка 2. Подгответе данните за продукта за изпращане до GA

/* init default tracker object for our GA account */
ga('create', 'UA-XXXXX-Y');
/* link Enchanced Ecommerce plugin */
ga('require', 'ec');

/* add data to the 'addProduct' object stored in the tracker */
ga('ec:addProduct', {
  'id': 'P12345',
  'name': 'Android Warhol T-Shirt',
  'category': 'Apparel',
  'brand': 'Google',
  'variant': 'black'
});

/* set associated action data to 'detail' i.e. product details */
ga('ec:setAction', 'detail');
/* send product details view data with the hitType 'pageview' */
/* hitType - something like a scope of data */
ga('send', 'pageview');

Сега, веднага щом отворим страницата на продукта, този код ще бъде изпълнен, данните за продукта ще бъдат трансформирани в специален формат и изпратени до GA като GET параметри в заявката за изображение от сървърите на Google.

Ако си направите труда да проверите мрежовия си трафик, може да намерите заявка като тази:

https://www.google.fr/pagead/1p-conversion/761607038/?random=85073946&cv=9&fst=1609281614630&num=1&label=-3HECIiFqM8BEP7mlOsC&bg=ffffff&guid=ON&resp=GooglemKTybQhCsO&u_h=1080&u_w=1920&u_ah=1053&u_aw=1920&u_cd=24&u_his=6&u_tz=60&u_java=false&u_nplug=3&u_nmime=4&gtm=2oabu0&sendb=1&ig=1&data=event%3Dpage_view%3Bpage_path%3D%2Fproducts%2Ftop-helder%3Bpage_title ...

Миг по-късно данните за нашия продукт трябва да са налични в отчетите на GA. Ето!

Целият процес изглежда доста прост: разклонете GA скрипта (стъпка 1), подгответе данните (стъпка 2), използвайте ги в отчети. Изглежда, че всеки може да го направи. Вярно е. Ако имате малко време да прегледате изчерпателната документация, можете да настроите персонализирано събиране на данни, което покрива всички ваши нужди. За съжаление, в повечето случаи няма време или налични човешки ресурси, поради което интегрирането на Shopify по подразбиране става много привлекателен избор. Той се грижи за всяка стъпка вместо вас и е безплатно.

Като повечето безплатни решения идва с уловка. В този случай имаме две неща:

  1. това решение не е прозрачно. Всъщност не знаем какви данни се събират и как се събират. Това е черна кутия.
  2. не можем да го персонализираме. Shopify не ни дава никакви средства за разширяване или модифициране на събраните данни. Разбира се, можем да инсталираме мениджър на маркери на Google върху това решение, за да получим повече данни, но как можем да сме сигурни, че няма да събираме едни и същи данни два пъти?

Нека да видим какво можем да направим за всичко това.

Надолу по заешката дупка

Клиентският скрипт на GA не може сам да събира данни за електронна търговия. Той делегира тази част от работата на разработчиците на сайтове заедно със списъка с налични API. Използването на тези API може да е доста предизвикателна задача и нещо може да не работи, както очаквате. В този случай можем да използваме библиотеката за отстраняване на грешки на GA. Когато е активиран, той започва да записва подробни журнали в конзолата на javascript. С малко късмет може да намерим там нещо полезно, за да коригираме нашата грешка или да разберем как работят съоръженията на GA.

Тези, които обичат да се забъркват с кода, могат да активират журнали за проследяване, както следва:

// replace standard boot code with the code below
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics_debug.js','ga');
// activate trace mode before any ga() call
window.ga_debug = {trace: true};
...

За случайни потребители има разширение за Chromeсъздадено от Google. Намирам го за много удобно: активирайте разширението, опреснете страницата и всички регистрационни файлове за проследяване са в конзолата. Препоръчвам го на всички, които работят с GA ежедневно.

С помощта на това разширение можем да видим какви данни се изпращат на GA от всяка страница на нашия сайт:

Сега имаме общо впечатление какви данни можем да очакваме да видим в нашите отчети на GA. Ако искаме да знаем как да го модифицираме, трябва да отидем още по-далеч, в мътните води на минимизирани js файлове.

Следвайте белия заек

Нека потърсим файл с очарователно име `trekkie.storefront.[long hash value].min.js` в изходния код на продуктова страница. Този файл съдържа библиотека на Shopify, която контролира всички услуги за проследяване на данни, с които Shopify има интеграция по подразбиране. Този скрипт инсталира, конфигурира и захранва библиотеката на GA с всички необходими данни.

Ако отворите този файл в любимия си редактор, вероятно ще видите нещо подобно:

не се безпокойте ОК е. Първоначално Нео не можеше да го прочете и също не разбираше нищо. Отнема време и търпение, за да овладеете това умение. Намерете всяка онлайн услуга за деминифициране на js и конвертирайте файла в по-четлива форма. Ето копие на това, което имам след деминификацията („github връзка“).

За какво е библиотеката trekkie? Изглежда ми като скрипт за зареждане за всички аналитични услуги със списък от предварително дефинирани функции за обратно извикване за различни събития за събиране на данни. IMHO е ефективен и достатъчно прост за разширяване и поддръжка. Една единствена js библиотека се споделя във всички страници на сайта. При активирано кеширане на клиента ще се зареди само веднъж. Скрипт от страна на сървъра на свой ред добавя малък js код, специфичен за страница/шаблон, за да задейства събитие за събиране на данни и да му предаде всички необходими данни, като подробности за продукта или списък с продукти в количката и т.н.

Скриптът за инициализиране проверява за поддръжка на подобрена електронна търговия и ако е активирана, скриптът прилага този формат за някои събития.

Както можем да видим по-долу, интеграцията на GA по подразбиране прилага подобрен формат в само четири случая: когато преглеждаме продуктова страница, когато добавяме продукт в количката, когато сме на първата стъпка за плащане и когато пристигнем на страницата за потвърждение на плащането (известна още като „страница за благодарност“).

Това не ни дава толкова много данни, с които да работим в отчетите на GA. Няма никакви данни за промоция, импресии и почти никакви данни за действие. Ще има общ преглед на представянето на продажбите, но почти никакви данни за поведението на потребителите. Което може да бъде много полезно, ако искаме да оценим ефекта от нашите вътрешни промоционални кампании, бутони за бързо пазаруване/бързо търсене/списък с желания, ангажиране на ново оформление на мрежата на страницата с категории и т.н. Този списък може да е безкраен. Всичко зависи от вашите бизнес нужди. Ако искате да имате допълнителни прозрения, трябва да помислите за персонализирано решение или да намерите приложение, което може да ви ги предостави.

Нека разгледаме по-подробно тези четири случая.

Всички събития споделят един и същ формат за подробности за продукта. Тук няма нищо специално освен стойността на id. Ако даден продукт няма SKU (идентификационен номер на складова единица), тогава идентификаторът на варианта заема неговото място.

В началото на процеса на плащане Shopify изпраща списък с продукти в количката плюс номер на стъпка за плащане. Когато завършим успешно всички стъпки за плащане, същият списък се изпраща плюс допълнителна информация за поръчката.

Подобно на обекта на продукта, стойността на id може да има една от двете стойности. Това вече го видяхме. Това, което намирам за странно тук, е, че стойността на приходите е зададена на обща стойност, когато общата стойност е дефинирана и не е нула. Защо е така, ако има специална променлива за приходите (t.revenue) за това? Ако знаете отговора, моля, уведомете ме в коментарите.

В три от четири случая данните се изпращат до GA, когато потребителят отвори страницата. Което е тривиално нещо за организиране на всеки сайт на Shopify, независимо от използваната тема. Забелязването на момента, в който потребител добавя продукт в количката, е много по-трудно от техническа гледна точка. Особено ако е общо решение за всяка тематична структура.

Нека да помислим. Как можем да хванем събитието „добавяне в количката“? Всеки път, когато добавим продукт в количката, изпращаме формуляр с действие „/cart/add“. Добавянето на слушател на събития към събития submit може да свърши работа: веднага щом потребител щракне върху бутона „добавяне в кошницата“, слушателят на събития се включва, събитието се отменя с „ event.preventDefault()”, изпращаме всичко необходимо на GA и след това изпращаме отново формуляра с „form.submit()”. Елегантен и семпъл. Точно така го прави Shopify. Ето пълна версия на файла (github връзка).

Но какво ще стане, ако добавим продукти чрез Ajax заявки? Предишният трик със слушателите на събития няма да помогне тук. Изисква по-сложен подход. Оказва се, че решението е на повърхността, но ми се иска да има друго.

Shopify презаписва нативна функция fetch() и обект XMLHttpRequest, без да казва нито дума за това в документацията, като по този начин всичките ви XHR и извиквания за извличане не се обслужват от родния API, както може би сте си помислили.

Като разработчик разбирам защо е направено така. Това е единственият начин да покриете всички случаи на Ajax. Без него цялата интеграция на GA изглежда по-малко привлекателна. Това е като шампанско без мехурчета - никой не се нуждае от него. Сигурен съм, че някой умен и проницателен човек е претеглил всички плюсове и минуси, преди да пусне това решение на живо. Каквато и да е цената. Да, какво ще кажете за цената? Когато се объркате с естествени функции или обекти, трябва да сте подготвени за последствията. Презаписването на собствен обект във вашия частен проект може да не е голяма работа, когато сте наясно какво правите. В най-лошия случай ще си спечелите безсънна нощ, за да коригирате грешката. Когато правите едно и също нещо тайно в по-голям мащаб, излагате на риск хиляди хора, които не очакват, че може да възникне проблем от тази конкретна посока. Освен чисто техническите рискове има въпрос на доверие и поверителност. Много данни се прехвърлят чрез Ajax заявки, включително пароли и друга чувствителна информация. Не бих искал тази информация да е достъпна за никого, освен за лицето, до което е адресирана. Надушването на трафика на Ajax изобщо не е добро. Доста лесно е да поправите технически бъг, но е много по-трудно да си върнете доверието на хората. Shopify трябва да бъде по-прозрачен с клиентите си относно чувствителни функции като тази.

Позволете ми да завърша първата част на тази статия с тази ярка бележка. Поздравявам онези, които бяха търпеливи да прочетат дотук. Надявам се, че не беше напразно и сте научили нещо ново за стандартната интеграция на Shopify с подобрена електронна търговия: как работи, какви данни отиват на сървърите на GA и как да проверявате данните.

Във втората част искам да направя малък експеримент. Ще се опитам да добавя персонализирани продуктови показатели към стандартната интеграция на GA. Ще видим как можем да направим това и дали си струва труда. Останете на линия!

Изводи от тази статия

  • Интегрирането на GA по подразбиране е добър избор, когато искате безплатно решение от кутията.
  • Интегрирането на GA по подразбиране дава достатъчно данни за общ преглед на ефективността на магазина.
  • Ако имате нужда от промоция, данни за импресии или конкретни данни за действие, трябва да потърсите персонализирана настройка на GA или приложения на трети страни.
  • Интегрирането на GA по подразбиране пренаписва някои естествени уеб API.