Установка целей в Яндекс.Метрике на блок “Поделиться”

417

21 февраля 2017, 19:28

На сайте установлен блок "Поделиться" от Яндекса. Хочу отслеживать в Яндекс.Метрике посетителей, которые поделились сайтом в соц. сетях.

Блок "Поделиться" устанавливается след. кодом:

<script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> 
<script src="//yastatic.net/share2/share.js"></script> 
<div class="ya-share2" data-services="vkontakte,facebook,twitter"></div>

Для отслеживания перехода по ссылке, в Метрике, требуется добавить событие на ссылку:

<a href="#" onclick="yaCounter123456.reachGoal('SHARE'); return true;">Жми сюда</a>

В коде блока "Поделиться" ссылок нет. Как мне установить событие на ссылки, в данном блоке?

PS. хочу сделать не одну цель для всех кнопок из блока "Поделиться", а на каждую соц. сеть отдельно.

Answer 1

Можно создать кнопки самостоятельно, либо воспользоваться API блока «Поделиться»

В первом случаи, например для ВКонтакте, кнопка будет иметь примерно такой вид:

.first span { 
  border: 1px solid #527397; 
  color: #527397; 
  padding: 5px; 
  cursor: pointer; 
  font-family: arial; 
}

<div class="first"> 
  <span onclick="window.open('http://vk.com/share.php?url=http://ru.stackoverflow.com/questions/630147/', '_blank', 'left=200, top=200, width=700, height=300'); console.log('Нажали..');">Поделиться в ВК</span> 
</div>

Для наглядности: jsfiddle
Соответственно, теперь мы можем повесить reachGoal() куда хотим.

Второй вариант, использовать api блока поделиться. В частности, нас будет интересовать группа hooks, которая позволяет указать свои функции, срабатывающие при наступлении определенного события в блоке Поделиться.

var myShare = document.getElementById('share'); 
 
var share = Ya.share2(myShare, { 
  content: { 
    url: 'http://ru.stackoverflow.com/questions/630147/', 
    title: 'Установка целей в Яндекс.Метрике на блок Поделиться', 
  }, 
  hooks: { 
    onshare: function(name) { 
      console.log('Поделились в ' + name); 
      // Тут, в зависимости от name, можем выполнять нужную цель. 
    } 
  } 
});

<script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> 
<script src="https://yastatic.net/share2/share.js"></script> 
 
<div id="share"></div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Почему функция tableRender() возвращает undefined?

Есть публичный метод tableRender(arr), он получает на вход массив значений товаров и рендерит по нему таблицуВообще функция tableRender() ничего не возвращает,...

409

javascript