Отслеживание событий Vuejs с помощью Google Analytics

Я хочу отслеживать события аналитики Google на кнопках и ссылках. Обычно в jquery я передавал значения в атрибутах данных, извлекал их и вызывал требуемую функцию. Я понимаю, что мне не следует использовать атрибуты данных, поэтому я ищу лучший способ сделать это, может быть несколько кнопок, которые выполняют различное отслеживание с разными целями данных (атрибутами). Поэтому мне нужно будет передать цель данных и пользователь данных для компонента/функции vue

<button id="openmodal"  data-purpose="contact form" class="btn__primary" aria-label="Help" @click="contactForm">Contact Form</button>
  <button id="openmodal"  data-purpose="Opt In" class="btn__primary" aria-label="Help" @click="optIn">Opt In</button>

В аналитике

ga('send', {
  hitType: 'event',
  eventCategory: 'button',
  eventAction: 'data-purpose',
  eventLabel: 'VALUE OF BUTTON'
});

javascript vue.js google-analytics
person June    schedule 27.10.2017    source источник
comment
Я не вижу никаких проблем с использованием атрибутов data-*. Можете ли вы создать минимальный фрагмент или jsfiddle, чтобы показать, где у вас возникают трудности?   -  person Nisarg    schedule 27.10.2017

Ответы (2)


arrow_upward
1
arrow_downward

В итоге я использовал vue-analytics. Существует простая документация от автора

person June    schedule 23.11.2017

arrow_upward
1
arrow_downward

Я предлагаю попробовать Segment включить аналитику в ваше приложение Vue! Вы можете добавить одну строку кода отслеживания и увидеть, как эти данные отправляются в GA, включив пункт назначения на нашей панели инструментов. Вот пример использования обработчика событий с помощью нашего вызова track:

<template>
  <button v-on:click="trackEvent">
    {{ title }}
  </button>
</template>

<script>
export default {
  name: 'SignupButton',
  data() {
    return {
      title: 'Signup with Segment today!'
    }
  },
  methods: {
    trackEvent () {
      window.analytics.track('User Signup')
    }
  }
}
</script>

Я сопровождаю https://github.com/segmentio/analytics-vue. С помощью Segment вы сможете включать и выключать разные направления одним щелчком переключателя, если вам интересно попробовать несколько инструментов аналитики (мы поддерживаем более 250 направлений) — без необходимости писать какой-либо дополнительный код. ????

person William    schedule 21.02.2019