Sourcebuster JS: модуль определения источников посетителей сайта на JavaScript

 страницы, тем раньше вы получите куки, данные из которых могут использоваться для манипуляций с объектами DOM’а.



Простая установка


Вставляем в  страницы:




<script src="/path/to/sourcebuster.min.js" id="sbjs"></script>

• не использует поддомены на сайте
• считает органическим трафиком только переходы с Яндекса и Гугла (а остальное — неважно / погрешность / вставьте свой вариант)

Что вы получаете из коробки

• По умолчанию органическим трафиком считаются только переходы из выдачи Яндекс и Google.
• Продолжительность пользовательской сессии: 30 минут.
• В логику по умолчанию заложено, что на сайте не используются поддомены. Подробное разъяснение о настройке скрипта для работы с поддоменами см. ниже.
• ip пользователя по умолчанию не сохраняется.

Установка «для продвинутых пользователей ПК»

<script>
  var _sbjs = _sbjs || [];
  _sbjs.push(['_setSessionLength', 15]);
  _sbjs.push(['_setBaseHost', 'statica.alexfedoseev.com']);
  _sbjs.push(['_setTimeZoneOffset', 4]);
  _sbjs.push(['_addOrganicSource', 'yahoo.com', 'p']);
  _sbjs.push(['_addOrganicSource', 'bing.com', 'q', 'bing']);
  _sbjs.push(['_addReferralSource', 'facebook.com', 'social']);
  _sbjs.push(['_addReferralSource', 't.co', 'social', 'twitter.com']);
  _sbjs.push(['_addReferralSource', 'plus.url.google.com', 'social', 'plus.google.com']);
</script>
<script src="/path/to/sourcebuster.min.js" id="sbjs"></script>

• _setSessionLength
• _setBaseHost
• _setTimeZoneOffset
• _setCampaignParam
• _addOrganicSource
• _addReferralSource
• _setUserIP

_setSessionLength

_sbjs.push(['_setSessionLength', 15]);

• Переходы с utm-разметкой перезаписывают всё и всегда (даже самих себя).
• Переходы из органической выдачи аналогично — перезаписывают всё и всегда.
• Прямые переходы не перезаписывают никогда и ничего. Они фиксируются только в случае самого первого захода на сайт, при условии что других источников до этого зафиксировано не было.
• Реферальные переходы в рамках текущей сессии ничего не перезаписывают, перезапись происходит только при условии отсутствия сессии у пользователя. Почему — поясню на примере: часто посетитель в рамках текущего визита переходит на сайт со стороннего ресурса, который реальным источником не является — например из почтового сервиса, где у него была ссылка на активацию регистрации.

_setBaseHost

_sbjs.push(['_setBaseHost', 'alexfedoseev.com']);

_sbjs.push(['_setBaseHost', 'site.com']);

// на страницах основного сайта
_sbjs.push(['_setBaseHost', 'site.com', false]);

// на страницах поддоменов blog.site.com и alex.blog.site.com 
_sbjs.push(['_setBaseHost', 'blog.site.com']);

// ПРАВИЛЬНО: на страницах site.com
_sbjs.push(['_setBaseHost', 'site.com', false]);

// НЕ ИМЕЕТ СМЫСЛА: на страницах blog.site.com
_sbjs.push(['_setBaseHost', 'site.com', false]);

_sbjs.push(['_setBaseHost', 'site.com', false]);
//=> трафик со ВСЕХ поддоменов на site.com будет реферальным

_setTimeZoneOffset

_sbjs.push(['_setTimeZoneOffset', 4]);

_setCampaignParam

_sbjs.push(['_setCampaignParam', 'custom_campaign']);

• Traffic type: utm
• utm_source: google
• utm_medium: cpc
• utm_campaign: google_cpc
• utm_content: (none)
• utm_term: (none)

• Traffic type: utm
• utm_source: google
• utm_medium: cpc
• utm_campaign: test_custom
• utm_content: (none)
• utm_term: (none)

• Если в урле присутсвуют оригинальные utm-метки (utm_source, utm_medium, utm_campaign), то метка gclid и параметр, заданный через _setCampaignParam, будут проигнорированы.
• Если в урле присутствует только параметр, заданный через _setCampaignParam, Sourcebuster будет считать этот переход utm-трафиком.

_addOrganicSource

_sbjs.push(['_addOrganicSource', 'yahoo.com', 'p']);
_sbjs.push(['_addOrganicSource', 'bing.com', 'q', 'bing']);

_addReferralSource

_sbjs.push(['_addReferralSource', 'facebook.com', 'social']);
_sbjs.push(['_addReferralSource', 't.co', 'social', 'twitter.com']);

_setUserIP

_sbjs.push(['_setUserIP', <%= request.remote_ip %>]);

Использование

Cookies

• sbjs_current
• sbjs_first
• sbjs_first_add
• sbjs_session
• sbjs_referer
• sbjs_udata

sbjs_current

typ=organic|src=google|mdm=organic|cmp=(none)|cnt=(none)|trm=(none)

• typ
  Тип трафика. Возможные значения: utm, organic, referral, typein. Пятого не дано.
• src
  Источник. По сути значение utm_source.
• mdm
  Канал. Значение utm_medium. Может настраиваться через utm-разметку и _addReferralSource.
• cmp
  Рекламная кампания. Значение utm_campaign.
• cnt
  Версия рекламного баннера. Значение utm_content.
• trm
  Ключевой запрос. Значение utm_term.

# переход с размеченной рекламы
typ=utm|src=yandex|mdm=cpc|cmp=my_adv_campaign|cnt=banner_1|trm=buy_my_stuff

# переход с органики
typ=organic|src=google|mdm=organic|cmp=(none)|cnt=(none)|trm=(none)

# реферальный переход со стороннего сайта
typ=referral|src=site.com|mdm=referral|cmp=(none)|cnt=(none)|trm=(none)

# переход из facebook с настройкой источника через _addReferralSource
typ=referral|src=facebook.com|mdm=social|cmp=(none)|cnt=(none)|trm=(none)

# прямой переход
typ=typein|src=typein|mdm=typein|cmp=(none)|cnt=(none)|trm=(none)

sbjs_first

sbjs_first_add

fd=2014-06-11 17:28:26|ep=http://statica.alexfedoseev.com/sourcebuster-js/

• fd
  Дата и время самого первого посещения сайта конкретным пользователем. Сохраняется в формате yyyy-mm-dd hh:mm:ss. По умолчанию в UTC. Часовой пояс можно изменить через _setTimeZoneOffset.
• ep
  Точка входа на сайт.

sbjs_session

sbjs_referer

ref=http://habrahabr.ru

• ref
  Страница «стороннего» сайта, с которой посетитель перешел на сайт.

sbjs_udata

uip=80.20.123.77|uag=Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36

• uip
  Текущий ip-адрес посетителя.
• uag
  Текущий user-agent (браузер) посетителя.

Получение данных

get_sbjs.название_куки_без_префикса_sbjs_.название_параметра_в_куке

// например, чтобы достать текущий utm_source
get_sbjs.current.src

// первый utm_medium
get_sbjs.first.mdm

// точку входа
get_sbjs.first_add.ep

// user-agent пользователя
get_sbjs.udata.uag

// и т.д.

Использование данных

// сюда мы поместим название текущего источника
<div id="data-box"></div>

<script type="text/javascript">

  // фикс/хелпер для IE, запускающий callback-функцию только после загрузки основного скрипта
  // в нашем случае callback - это функция, которая выводит текущий источник, а основной скрипт - это sourcebuster
  function ie_load_bug_fix(script, callback) {
    if (script.readyState == 'loaded' || script.readyState == 'completed') {
      callback();
    } else {
      setTimeout(function() { ie_load_bug_fix(script, callback); }, 100);
    }
  }

  // функция, которая выводит текущий источник
  function place_data() {
    document.getElementById('data-box').innerHTML = get_sbjs.current.src;
  }
  
  // выводим:
  // сначала мы проверяем определена ли переменная get_sbjs
  // если переменная определена, то запускаем вывод текущего источника
  // если нет, то проверяем тип браузера и запускаем вывод только после загрузки sourcebuster
  if (typeof get_sbjs !== 'undefined') {
    place_data();
  } else {
    if (window.addEventListener) {
      sbjs.addEventListener('load', place_data, false);
    } else if (window.attachEvent) {
      ie_load_bug_fix(sbjs, place_data);
    }
  }

</script>

Ограничения

Переходы с https на http

Символ «|» в utm-разметке

Послесловие