Настройка Google Analytics для отслеживания социальных действий на сайте

Настройка Google Analytics для отслеживания социальных действий на сайте

Привет, ребята. Продолжаю серию постов о «правильной» настройке и использовании Google Analytics. Как и обещал раньше, завел новую рубрику на блоге «Аналитика», и буду сюда складывать крайне полезные и интересные посты!

А сегодня мы поговорим о крайне интересной, полезной и очень актуальной теме – отслеживание социальных действий на сайте. То есть мы научим Google Analytics считать все события связанные с соцсетями, например, будем считать количество твитов, лайков/анлайков для Facebook и ВКонтакте, а самое главное мы сможем узнать кто эти люди, которые совершили действие, откуда они пришли и что делали.

И еще один приятный момент для вас – пост будет снабжен конкретными кейсами о том, как все это сделать, как настроить и проанализировать!

Но сперва я хочу показать вам, что в итоге мы получим, после всех проделанных действий.

Красота, не правда ли? Я тоже думаю, что это замечательно!

Теперь дело за малым – сделать также красиво и вам, дорогие читатели.

В посте я будут рассказывать про все популярные социальные сервисы, мы все их прекрасно знаем – это Twitter, Facebook, Vkontakte, Google +1 (его я тут упомянул, хотя его настройка не требуется, т.к. GA его считает по умолчанию). И если вдруг что-то из списка вам ну нужно, то можете просто пропустить часть поста, переходя к нужным заголовкам, все разделы независимы.

Отслеживание Twitter

Начнем комплексную настройку с Твиттера. Как и во всех пунктах начинать мы будем с настройки загрузки JS-кода. Почему я об этом говорю, потому что стандартные методы, которые выдаются соцсетями для вставки в код сайта тут не подойдут. Нам необходимо загружать код асинхронно, мало того, что это полезно для скорости работы сайта, но и только этим способом мы сможем внедрить код отслеживания в механизм работы социальных кнопок.

Итак, асинхронно подгружаем Twitter API:

Этот код надо вставить в страницу между тегами <head> </head>

Тут кого-то может смутить момент такой, например, кнопка твита показывается не на всех страницах сайта, а только на каких-то конкретных и поэтому не хочется, чтобы код загружался всегда. В таком случае, описанный выше код можно вставить вместе с кодом вывода кнопки на странице.

Как вы заметили, в коде стоит событие onload, которое означает, что по завершении загрузки яваскрипта у нас подтягивается трекер _ga.trackTwitter; об этом будет рассказано дальше.

Далее в нужном месте страницы надо вставить код вывода самой кнопки. Его вы можете сформировать на официальной страничке Twitter’а для девелоперов. Код всем нам хорошо известен и выглядит так:

<a href="https://twitter.com/share" data-count="vertical" data-via="victimalex" data-lang="ru">Твитнуть</a>

Если вы заметили, данный код отличается от оригинала тем, что в нем нет строчки <script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script> . Она нам здесь не нужна, так как этот JS-скрипт мы уже загрузили асинхронно.

Внедрение Твиттера завершено, переходим дальше, к Facebook.

Отслеживание Facebook

Алгоритм внедрения практически такой же как и для Твиттера. Сначала асинхронно инициируем JS-API, а потом вставляем в страницу.

А теперь по порядку. Идем на страницу для разработчиков для получения кода кнопки. Настраиваем в консутрукторе все как вам нравится. Жмем GetCode, переходим на вкладочку XFBML и копируем содержимое третьего поля, оно выглядит примерно так:

Далее немного прокручиваем страницу вниз, до заголовка «Step 2 — Get Open Graph Tags». Там видим очередной конструктор, но нам важно только поле «Admin» и 15-значное число ниже. Копируем. Это есть ваш «Facebook IDs of page administrators or a Facebook Platform application ID», иными словами это ваш ID или ID вашего приложения в Facebook. Стандартно это просто ваш собственный id страницы. Айдишник нам необходим для возможности инициализации асинхронной загрузки JS-API.

UPD! appId нам больше не нужен, в связи с изменившейся политикой facebook.

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

Как видите, и в этом коде при инициализации происходит вызов трекера _ga.trackFacebook ();.

Не забудьте заменить некоторые значения, а именно: appId: '123456789012345' – обязательно — замените на свой ID (мы его копировали немного раньше). <fb:like send="false" layout="button_count" width="200" show_faces="false"></fb:like> — необязательно, отвечает за внешний вид кнопки — при необходимости замените на свой код (его мы так же успели скопировать раньше).

Полученный код надо вставить в то место страницы, где должна выводиться кнопка Like.

Если предполагается выводить на одной странице несколько кнопок (возможно даже разных), то асинхронную загрузку JS не надо дублировать, просто в нужные места вставляйте <fb:like … ></fb:like> .

Так с этим тоже закончили. Двигаемся дальше – к Вконтакте.

Отслеживание ВКонтакте

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

Идем на страничку официальной документации контакта по кнопке «Мне нравится». Подключаем сайт, если он у вас еще не подключен. Настраиваем внешний вид и копируем полученный код куда-нибудь в блокнот.

Получить в итоге нам надо что-то такое:

Как и при настройке Twitter и Facebook в этом коде в момент инициализации JS происходит вызов трекера _ga.trackVkontakte ();.

До вставки кода на сайт надо заменить некоторые параметры: VK.init(); – обязательно — надо заменить appId на свой, которы выдал вам конструктор. VK.Widgets.Like("vk_like", ); – необязательно, отвечает за внешний вид кнопки — при необходимости замените на свой, сформированный в конструкторе.

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

Отслеживание Google +1

Этот пункт я здесь указал всего лишь для формальности, потому что трекинг кнопки +1 происходит по умолчанию для Google Analytics и никакие дополнительные настройки не требуются. Просто идем на официальную страничку от Гугла и вставляем полученный код на сайт.

Подключение файла с трекерами

Самый важный пункт, без которого ничего не будет отслеживаться.

В каждом коде, что мы собирали выше, были вызовы трекеров _ga.track. Но ведь самих трекеров у нас пока нет, и стандартный код GA их не включает в себя. Мы это исправим, поможем Гуглу понять, что мы от него хотим. Все что нам надо сделать – это подгрузить дополнительный JS-скрипт, вот он — https://alaev.info/wp-content/themes/creative/trackSocial.js .

Открываете ссылку, указанную выше, в браузере, тыкаете правой кнопкой в окне, далее «Сохранить как. » и сохраняете файл себе на комп, а потом загружаете на сервер в корень (туда, где лежит index.php) и вставляете между тегами <head> </head> следующий код:

<script type="text/javascript" src="http://site.ru/trackSocial.js"></script>

Внимательно! Не забудьте заменить site.ru на свой домен.

Важный момент – код счетчика

Данный пункт не менее важен всех предыдущих. Я сейчас хочу обратить внимание на месторасположение код счетчика Google Analytics в коде страницы. Я настоятельно рекомендую всем прямо сейчас взять и перенести код счетчика GA (да и Яндекс.Метрики тоже) в место сразу после открывающего тега <body>.

Во-первых, отслеживание социальных действий, а именно отработка трекеров возможна только после загрузки основного кода счетчика. Речь идет о местоположении на странице.

Во-вторых, это никак не скажется на скорости загрузки сайта, так как коды счетчиков ПФ и ЯМ асинхронные, что означает их загрузку параллельно загрузке основного содержимого сайта. То есть пользователь вообще ничего не заметит.

В-третьих, это просто полезно, потому что точность статистики (имеется ввиду в целом, а не отслеживание соцдействий) будет выше.

Чеклист — проверяем работоспособность

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

  1. Используется асинхронный код счетчика Google Analytics и расположен он сразу после открывающего <body>.
  2. После всех изменений кнопки и виджеты отображаются на странице и работают нормально.
  3. В исходном коде присутствует <script type="text/javascript" src="http://site.ru/trackSocial.js"></script> . На странице сайта нажимаем Ctrl+U для просмотра исходного кода, находим указанную строчку и нажимаем на ссылку на JS файл, он должен открыться и показать содержимое.
  4. В аккаунте Google Analytics у вас выбран новый интерфейс, он должен быть похож на интерфейс на моих скриншотах. Т.к. в старом интерфейсе нет отчетов о социальном взаимодействии.
  5. Потыкайте социальные кнопки сами или попросите друзей. Tweet, FB like, FB unlike, FB send, VK like, VK unlike — вот список всех возможных действий.
  6. Спустя сутки в отчетах GA можно будет увидеть результаты и, соответственно, общую работоспособность.

Установка «с нуля» или обновление существующих виджетов?

Еще один важный момент. Если вы выполняете установку кнопок на сайт впервые, то вам просто необходимо правильно выполнить все пункты, описанные в посте.

Но если у вас на сайте уже есть/были кнопки и виджеты, и вы решили добавить отслеживание, то настоятельно рекомендую удалить все следы кнопок, вызов JS-скриптов и все что может быть связано с соц сетями. Это необходимо для правильной работы всего механизма, который мы внедряем. В противном случае могут возникнуть глюки, такие как, неправильное отображение, отказ GA считать и т.д.

Цифры – просто мусор. Анализ – правит миром

Знаю, пафосно звучит, но это так. Если вы просто собираетесь копить циферки в отчетах Аналитикса, даже не пытайтесь что-то предпринимать, у вас ничего не выйдет хорошего. Нет, ну цифры вы конечно соберете, а зачем? Вот и я говорю — незачем!

Со всеми полученными данными надо работать и анализировать их, чтобы понимать, как добиться лучшего результата, преумножить текущие достижения.

Итак, что же в итоге мы получим из той информации, что нам даст отслеживание социальных действий:

  • Красивые графики – это офигенно, можно похвастаться перед поцонами на районе. Шучу, конечно ;)
  • Мы можем узнать, сколько социальных действий было совершено на сайте за определенный период. А так же совершал ли один и тот же пользователь несколько действий за сессию.
  • Можем узнать на каких страницах происходила активность и через какие именно инструменты. То есть мы будем знать, какие материалы сайта понравились посетителям, а какие не вызвали желания поделиться.
  • Можем узнать все соцдем характеристики пользователя, совершившего действие.
  • И самое крутое! Это источник перехода, повлекший за собой социальное действие. То есть пришел ли пользователь с поисковика или перешел с другого сайта. Сразу будет понятно, где размещать анонсы/пресс-релизы, а где не стоит.

Исходя из вышесказанного можно будет делать выводы:

  • Какие социальные сети больше всего любит и использует ваша целевая аудитория.
  • В какой соцсети стоит усиливать свое присутствие и разводить активность, а какой сетью можно пренебречь.
  • Стоит ли внедрять дополнительные возможности самой используемой соцсети на сайт (виджет комментариев, авторизацию, livesream и т.д.).
  • И вообще куча-куча всего, что мне даже пока сходу в голову не приходит.

А что с другими соцсетями?

Может быть, кто-то из вас захочет спросить, а как быть с другими соц сетями или кнопками? Я отвечу.

Кнопка «Сохранить» или Share от ВКонтакте

Для этой кнопки не предусмотрено в API никаких событий, поэтому правдиво отследить сохранения не получится. Но все же выход есть, хоть и нетривиальный. Если решили все же отслеживать share, то необходимо сделать следующее:

  • В конструкторе выбрать стиль «Иконка» и скопировать полученный код.
  • Изменить это

Кнопки от Мой Мир (my.mail.ru) и Одноклассники

Тут вообще моё больное. Я бился с этими кнопками почти неделю, сочинял всякие реальные и нереальные варианты. Но все безуспешно.

События для этих кнопок в API mail.ru предусмотрены, но вот загвоздка – события предназначены для кнопок, внедренных в приложения, а для размещенных на сайтах кнопок эти события не срабатывают.

Не так давно я вступил в клуб разработчиков mail.ru чтобы выяснить, как обстоят дела с дальнейшей разработкой API, в частности поинтересовался возможностью появления событий и для кнопок на сайтах, но пока никакого ответа не получил. Я буду держать вас в курсе!

А пока что, отслеживание этих кнопок возможно по алгоритму, описанному для кнопки сохранить от ВКонтакте. Если этого кого-то интересует, выложу тут подробную инструкцию.

Вот такие дела, друзья. На сегодня все. Извините за столько объемный пост, но, поверьте, оно того стоит!

Задавайте вопросы, пишите комментарии, обсуждайте, и не забывайте жать на социальные кнопки ниже! Спасибо.

Вот уже 16 лет я профессионально занимаюсь созданием и продвижением сайтов и 12 лет с удовольствием пишу в любимый блог. Создал заслужившие доверие в seo-сообществе программы FastTrust и ComparseR и известный сервис для проверки траста сайтов CheckTrust.ru.

В 2014 основал веб-студию «АлаичЪ и Ко» в Краснодаре: 1 место в рейтинге агентств интернет-маркетинга (Рейтинг Рунета), 2 место в рейтинге SEO-компаний (CMSmagazine), 12 место в рейтинге известность бренда SEO-компаний в России (SeoNews).

Выступаю на профильных конференциях (All In Top, SEO Conference, SEMPRO, Baltic Digital Days). Веду канал в telegram про seo и бизнес. SEO-специалист года 2019 и 2020 (Sape).

📎📎📎📎📎📎📎📎📎📎