Использование jQuery для отслеживания событий GA (универсальное)

Я пытаюсь отслеживать воспроизведение и паузу с помощью jQuery на моем сайте Wordpress, который использует mediaElement.js для обработки аудиоплееров. Я исследовал это и нашел то, что я считал ответами, но я все еще не могу запустить функцию ga()!

Мой код выглядит следующим образом:

jQuery(document).ready(function($) {
   //Tracking MediaElement Plays
   $('body').on('click', '.mejs-play', function() {
     ga('send', 'event', 'Audio', 'Play', 'Audio Played');
   });
});

Я не получаю никакого ответа от отчета GA Realtime, когда я нажимаю элементы с назначенным ему этим классом.

Любая идея, что я делаю неправильно?


javascript wordpress jquery google-analytics event-tracking
person Bobby    schedule 09.08.2017    source источник
comment
Хорошо, я обнаружил одну серьезную проблему, которая определенно вызывала проблемы. Я использую MonsterInsights (ранее Yoast) для внедрения GA analytics.js на свой сайт. Однако по какой-то странной причине он изменил переменную ga() на __gaTracker(). Я нашел сайт, на котором мне дали простой код, чтобы добавить переменную ga() (kathirvel.com/yoast-google-analytics-reassign-gatracker-to-ga). Однако я все еще не могу заставить свой код найти .mejs из этой функции.   -  person Bobby    schedule 11.08.2017

Ответы (2)


arrow_upward
0
arrow_downward

Что-то не так с вашей реализацией jQuery. Когда я набираю в консоли что-то вроде $(window), я вижу ошибку:

TypeError: $ is not a function
person Dmitry Sulman    schedule 11.08.2017
comment
Попробуйте использовать jQuery(window) вместо $(window). Я понятия не имею, почему, но ссылка на моем сайте настроена именно так. Кажется, я не единственный, у кого это так в консоли">stackoverflow.com/questions/11242586/ - person Bobby; 11.08.2017
comment
После дальнейших исследований Wordpress, CMS, на которой построен мой сайт, использует jQuery() вместо $() в качестве своего рода режима совместимости или безопасного режима, по-видимому, чтобы избежать конфликтов с другими библиотеками JS (см. digwp.com/2011/09/using-instead-of-jquery-in-wordpress) . - person Bobby; 11.08.2017

arrow_upward
0
arrow_downward

Хорошо, я думаю, что решил это для себя. Несколько факторов сыграли ключевую роль в этой конкретной ситуации:

  1. Из-за странностей CMS Wordpress.org мне приходится использовать jQuery() вместо $() для каждого поиска на моем сайте — не только в начале кода, но и каждый раз, когда мне нужно выполнить поиск в моем коде. Получается раздутый код, но он работает!

  2. Мой сценарий изначально ничего не делал с MediaElement.js, потому что он загружался до того, как были созданы какие-либо элементы MEJS, и, следовательно, они не существовали во время запуска моего кода JS. Чтобы решить эту проблему, я нашел эту отложенную уловку, которая позволила мне поставить в очередь элемент <script> в конце строки. Просто, мне пришлось вызвать скрипт в моем заголовке, используя <script defer="defer">.

  3. Как только я запустил базовый скрипт и запустил его в свою консоль, я использовал простой оператор if () {} else {} в сочетании с .hasClass(), чтобы различать воспроизведение и паузу.

Конечный результат, вставленный в шапку моего сайта, прекрасно работает! Вот:

<script defer="defer">
//Tracking MediaElement Plays and Pauses
jQuery(window).load(function() {
  jQuery('.mejs-playpause-button').click(function() {
    if (jQuery(this).hasClass('mejs-play')) {
      ga('send', 'event', 'audio', 'play audio', 'audio played');
    } else {
      ga('send', 'event', 'audio', 'pause audio', 'audio paused');
    }
  });
});
</script>

Я надеюсь, что это поможет кому-то еще отслеживать свои игры и паузы.

person Bobby    schedule 13.08.2017