Настройване на Google Analytics за проследяване на социалната активност в сайта
И още един приятен момент за вас - публикацията ще бъде снабдена с конкретни случаи как да направите всичко това, как да го настроите и анализирате!
Но първо искам да ви покажа до какво ще стигнем след всички стъпки, които предприехме.
Красота, нали? И аз мисля, че е страхотно!
Сега остава малкото - да го направим красив и за вас, скъпи читатели.
Проследяване в Twitter
И така, заредете API на Twitter асинхронно:
Този код трябва да бъде вмъкнат в страницата между таговете
Тук някой може да се обърка от момент като този, например бутонът за туит не се показва на всички страници на сайта, а само на някои конкретни и затова не искам кодът винаги да се зарежда. В този случай горният код може да бъде вмъкнат заедно с изходния код на бутона на страницата.
Както забелязахте, в кода има събитие за зареждане, което означава, че когато javascript се зареди, тракерът _ga.trackTwitter се изтегля нагоре; това ще бъде обсъдено допълнително.
След това на правилното място на страницата трябва да вмъкнете изходния код на самия бутон. Можете да го генерирате на официалната страница в Twitter за разработчици. Кодът е добре познат на всички ни и изглежда така:
Ако забележите, този код се различава от оригинала по това, че не съдържа реда. Не се нуждаем от него тук, тъй като вече сме заредили този JS скрипт асинхронно.
Представянето на Twitter приключи, нека да преминем към Facebook.
Facebook проследяване
Алгоритъмът за изпълнение е почти същият като при Twitter. Първо асинхронноинициираме JS-API и след това го вмъкваме в страницата.
А сега по ред. Отидете на страницата за разработчици, за да получите кода на бутона. Персонализирайте всичко в конструктора, както желаете. Щракнете върху GetCode, отидете на раздела XFBML и копирайте съдържанието на третото поле, изглежда по следния начин:
След това превъртете малко надолу страницата до заглавието „Стъпка 2 - Вземете етикети за отворена графика“. Там виждаме друг конструктор, но ни интересува само полето „Администратор“ и 15-цифреното число по-долу. Ние копираме. Това е вашето „Facebook ID на администратори на страница или ID на приложение на Facebook Platform“, с други думи това е вашият Facebook ID или ID на вашето приложение. По подразбиране това е само идентификаторът на вашата страница. Имаме нужда от ID, за да можем да инициализираме асинхронното зареждане на JS-API.
UPD! appId вече не е необходим, поради променената политика на Facebook.
Накратко, в крайна сметка трябва да получим следния код:
Както можете да видите, този код също извиква инструмента за проследяване _ga.trackFacebook() по време на инициализацията.
Не забравяйте да замените някои стойности, а именно: appId: '123456789012345' - не забравяйте да го замените с вашия ID (ние го копирахме малко по-рано). - по избор, отговорен за външния вид на бутона - ако е необходимо, заменете го със собствен код (ние също успяхме да го копираме по-рано).
Полученият код трябва да бъде вмъкнат на мястото на страницата, където трябва да се показва бутонът Харесвам.
Ако възнамерявате да показвате няколко бутона на една страница (може би дори различни), тогава асинхронното зареждане на JS не е необходимо да се дублира, просто вмъкнете.
Така че това също е завършено. Продължаваме - към Vkontakte.
Проследяване на VKontakte
VK механиката е подобна на FB механиката. Но ако целият предишен код може да бъде намереннякъде в необятността на чуждия интернет, тогава кодът, който ще покажа по-долу, трябваше да напиша сам.
Отиваме на страницата на официалната документация на контакта, като щракнете върху бутона „Харесва ми“. Ние свързваме сайта, ако все още не е свързан с вас. Ние персонализираме външния вид и копираме получения код някъде в бележника.
В резултат на това имаме нужда от нещо подобно:
Както при настройването на Twitter и Facebook в този код, по време на инициализацията на JS се извиква тракерът _ga.trackVkontakte ();
Преди да поставите кода в сайта, трябва да промените някои параметри: VK.init(); - задължително - трябва да замените appId с вашия собствен, който ви е дал конструктора. VK.Widgets.Like("vk_like", ); - незадължителен, отговорен за външния вид на бутона - ако е необходимо, заменете го със собствен, оформен в конструктора.
След като направите необходимите редакции, можете да поставите получения код на мястото, където искате да видите бутона „Харесва ми“.
Проследяване на Google +1
Посочих тази точка тук само като формалност, защотопроследяването на бутона +1 се извършва по подразбиране за Google Анализ и не са необходими допълнителни настройки. Просто отидете на официалната страница от Google и поставете получения код на сайта.
Прикачване на файл с тракери
Най-важният елемент, без който нищо няма да бъде проследено.
Във всеки код, който събрахме по-горе, имаше извиквания към _ga.track тракери. Но все още нямаме самите тракери и стандартният код на GA не ги включва. Ще поправим това, ще помогнем на Google да разбере какво искаме от него.Всичко, което трябва да направим, е да заредим допълнителен JS скрипт, ето го - https://alaev.info/wp-content/themes/creative/trackSocial.js.
Отворете връзката по-горе в браузърщракнете с десния бутон върху прозореца, след което върху „Запиши като. ” и запазете файла на вашия компютър, след което го качете на сървъра в root (където е index.php) и поставете следния код между таговете:
Внимание! Не забравяйте да замените site.ru с вашия домейн.
Важен момент - кодът на брояча
Тази точка е не по-малко важна от всички предишни. Сега искам да обърна внимание на местоположението на кода на брояча на Google Analytics в кода на страницата.Силно препоръчвам на всеки точно сега да вземе и премести кода на брояча на GA (и Yandex.Metrics също) на мястото точно след отварящия таг.
Второ, това по никакъв начин няма да повлияе на скоростта на зареждане на сайта, тъй като кодовете на PF и NM броячите са асинхронни, което означава, че се зареждат паралелно със зареждането на основното съдържание на сайта. Тоест, потребителят няма да забележи нищо.
Трето, просто е полезно, защото точността на статистиката (което означава като цяло, без проследяване на социални действия) ще бъде по-висока.
Контролен списък - проверете ефективността
След толкова много действия не е изненадващо да се съмнявате в правилността на настройките, затова реших да добавя контролен списък към публикацията, който ще ви помогне да разберете дали всичко е направено правилно.Всички елементи трябва да се спазват стриктно:
Инсталиране от нулата или актуализиране на съществуващи джаджи?
Друг важен момент.Ако инсталирате бутони на сайта за първи път, тогава просто трябва да следвате правилно всички стъпки, описани в публикацията.
Но ако вече имате/имате бутони и уиджети на вашия сайт и решите да добавите проследяване, тогава силно препоръчвам да премахнете всички следи от бутони, извикване на JS скриптове и всичко, което може да е свързано със социалните мрежи. Това е необходимо за коректната работа на целия механизъм, който внедряваме. INв противен случай може да възникнат проблеми, като например неправилно показване, неуспешно четене на GA и др.
Цифрите са просто боклук. Анализът управлява света
Знам, че звучи претенциозно, но е истина. Ако просто ще трупате числа в отчетите на Анализ, дори не се опитвайте да правите нещо, няма да успеете. Не, добре, разбира се, че ще съберете числата, но защо? Затова казвам - няма нужда!
Необходимо е да работите с всички получени данни и да ги анализирате, за да разберете как да постигнете най-добрия резултат, да умножите текущите постижения.
Въз основа на горното ще бъде възможно да се направят изводи:
Какво ще кажете за другите социални мрежи?
Може би някои от вас искат да попитат, какво ще кажете за други социални мрежи или бутони? Аз ще отговоря.
Бутон „Запазване“ или Споделяне от VKontakte
Няма събития, предоставени в API за този бутон, така че няма да е възможно наистина да се проследят записванията. Но все пак има изход, макар и нетривиален.Ако решите да следите споделянето, тогава трябва да направите следното:
- В конструктора изберете стила "Икона" и копирайте получения код.
- Променете го
Бутони от My World (my.mail.ru) и Odnoklassniki
Тук е моята болка. Близо седмица се мъчих с тези бутони, съчинявах какви ли не реални и нереални опции. Но всичко без резултат.
Събитията за тези бутони са предоставени в API на mail.ru, но тук е уловката – събитията са предназначени за бутони, вградени в приложения, и тези събития не работят за бутони, поставени на уебсайтове.
Не толкова отдавна се присъединих към клуба на разработчиците на mail.ru, за да разбера как вървят нещата с по-нататъшното развитие на API, по-специално се заинтересувах от възможността за появяване на събития за бутони на сайтове, но досегане получи отговор. Ще те държа в течение!
Междувременнопроследяването на тези бутони е възможно съгласно алгоритъма, описан за бутона за запазване от VKontakte. Ако някой се интересува, ще публикувам подробни инструкции тук.
Така е, приятели. Това е всичко за днес. Извинете за толкова дългия пост, но повярвайте ми, заслужава си!