Интеграция Яндекс Карт с системами аналитики Google Analytics и Яндекс Метрика

Работая в агентстве, мы встречаемся с разными клиентами. У них разные типы бизнеса и разные задачи у каждой рекламной кампании. И всё это необходимо учитывать, измерять, чтобы потом можно было судить об эффективности не только на основе метрик привлечения и поведения.

В частности, бывают не только случаи отправки заявок с сайта и оформления заказов (это самые простые случаи, хотя и в данном вопросе не всё так тривиально), но и комплексные задачи — с включением offline взаимодействия. Приехал и купил, позвонил и сделал заказ и т.д.

Все бизнес модели имеют свои особенности,  нельзя одно решение принять для всех клиентов. Для каждого оно должно быть индивидуальным. Единственное, что может быть похожим — это алгоритмы, по которым строятся системы KPI, измерения и анализа.

В статье предполагается, что вам известно, что такое jQuery, и вы умеете пользоваться Google.

Задача

Хочу рассказать про одну задачу, которая, c моей точки зрения, актуальна для многих e-commerce проектов, имеющих offline точки продаж, пункты выдачи, прочие “офисы”. Как правило, компании размещают адреса, добавляя, при этом карту через API выбранной системы. Сегодня разговор пойдёт о том,  как отслеживать взаимодействия пользователей с картами Яндекса, которые девелоперы могут поставить на сайт.

Мы возьмём наиболее популярные системы веб-аналитики Universal Analytics и Яндекс Метрика. Classic Google Analytics не рассматривается, поскольку Google практически закончил автоматический update на Universal Analytics.

Одно из слабых мест - документация API карт Яндекса. Полагаем, специалисты Яндекса допишут её, поскольку она не является полной, информация к ней не до конца ясна. Простой способ узнать то, что вам необходимо - воспользоваться документацией на английском языке: api.yandex.com/maps .

Допустим, что карты у вас на сайте уже есть.

Разберёмся с системами аналитики 

Имплементация

В секции <head> у меня есть следующий код:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script src='script.js'></script>

Соответственно, сначала подгружаем jQuery, потом скрипт с кодами (рассмотрим позже).

script.js — в данном случае UA, Метрика и все остальные коды (в том числе, инициализация карт).

Script.js

Структура его предельно простая:

  1. Имплементируем Universal Analytics;
  2. Имплементируем Яндек Метрику;
  3. Добавляем необходимые функции;
  4. Загружаем карты;
  5. Добавляем события для регистрации действий на картах.

Теперь подробнее.

Universal Analytics

Берем стандартный код, ничего дополнительного нам не понадобится.

Яндекс Метрика

Тут уже другая история. Стандартный код не очень удобен в плане добавления различных действий — каждый раз необходимо передавать номер аккаунта, хотя это вовсе необязательно. Яндекс пытается всё время добавить функцию «правильного» подсчёта показателя отказов, который НЕ является правильным, потому что методика подсчёта отличается от общепринятого определения показателя отказов. В связи с этим, я использую модифицированную версию того, что есть в документации тут:

http://help.yandex.ru/metrika/code/separate-code-file.xml

Единственное, что мы меняем - это часть со свойствами счётчика, который будет собирать данные, выглядит он так:

            w.yaCounter23475496 = new Ya.Metrika({

            id:23475496,

            webvisor:true,

            clickmap:true,

            trackLinks:true});

            myYM=w.yaCounter23475496;

Дополнительные функции отслеживания

Две функции, которые у нас будут регистрировать события:

var trackPlacemark = function(myBalloon,myEvent){

ga('send', 'event', 'map', myBalloon, myEvent, 1);

myYM.reachGoal('map: ' +myBalloon+': '+myEvent);

};

var trackLoadMap = function(myMap) {

ga('send', 'event', 'map', myMap, 'load');

myYM.reachGoal('map: ' + myMap + ': load');

};

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

Вторая — регистрирует загрузку карты на сайте.

По аналогии можно создать любое другое событие в зависимости от задач.

Яндекс карты

Обращаем ваше внимание на баг: когда карты загружаются быстрее Метрики (а такое происходило довольно часто), переменная myYM не успевала создаваться и данные о загрузке карты никуда не уходили.

Поэтому скрипт Яндекс карт был подгружен через jQuery

$.getScript( "http://api-maps.yandex.ru/2.0-stable/?load=package.standard&lang=ru-RU", function() {/*выполняем init карт*/};

function init() выполняется по мануалу API Яндекс карт. Нам важно знать, сколько есть объектов, потому что на каждый, по сути, мы должны повесить соответствующее событие: balloonopen, ballonclose (больше нам пока неинтересно):

myPlacemark.events.add(eventOpen, function () {}

myPlacemark.events.add(eventClose, function () {}

где eventOpen и eventClose — соответствующие переменные событий:

eventOpen='balloonopen';

eventClose=‘balloonclose';

Далее в каждом событии вызываем соответствующую функцию: trackPlacemark(myBalloon, eventOpen);

myBalloon — это переменная, в которой мы храним описание нашего placemark:

myBalloon='Placemark: '+myPlacemark.properties.get('balloonContent');

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

ymaps.ready(init);

trackLoadMap('Yandex');

Далее тестируем и наблюдаем в отчёте Real Time — Events, какие данные уходят у нас в категорию maps.

Результат
Выглядеть это должно всё следующим образом:


Живой пример использования можно понаблюдать тут: http://www.codecademy.com/Juce.me/codebits/ectque#.Ur0hNiMv_cI