Реклама в Facebook: как создать пользовательское событие Javascript в пикселях для определения клика на видео с YouTube - PullRequest
Новая
       51

Реклама в Facebook: как создать пользовательское событие Javascript в пикселях для определения клика на видео с YouTube

0 голосов
/ 30 января 2020

Допустим, у нас есть встроенный код Youtube: 

<iframe id="my-youtube-video-id" width="560" height="315" src="https://www.youtube.com/embed/tzbrKBv-khE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

И код события пикселя Facebook: 

<button id="addToCartButton">Purchase</button>
<script type="text/javascript">
$('#$my-youtube-video-id').click(function() {
fbq('track', 'ViewContent');
});
</script>

Но, похоже, он не определяет, когда кто-то нажимает на видео , Я на WordPress. Есть идеи, что я делаю неправильно?

PS: я слежу за документацией: https://www.facebook.com/business/help/402791146561655?id=1205376682832142 и https://developers.facebook.com/docs/facebook-pixel/implementation/conversion-tracking

1 Ответ

0 голосов
/ 30 января 2020

Я не думаю, что это проблема с событиями Facebook, а проблема с iFrame. URL, размещенный в iFrame, получает событие click и не передает это событие самому элементу iFrame. К счастью, с видео на YouTube вы можете использовать API встроенного проигрывателя для выполнения действий в зависимости от состояния проигрывателя. Попробуйте это: 

<iframe id="my-youtube-video-id" width="560" height="315" src="https://www.youtube.com/embed/tzbrKBv-khE?enablejsapi=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<script>
  // This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('my-youtube-video-id', {
        events: {
          'onStateChange': onPlayerStateChange
        }
      });
    }

    var done;
    function onPlayerStateChange(event){
      if (event.data == YT.PlayerState.PLAYING && !done) {
        //Here is where you can add your event, we also use the done variable to make sure the event will only fire once.
        fbq('track', 'ViewContent');
        done = true;
      }
    }

  </script>

РЕДАКТИРОВАТЬ: См. Этот jsFiddle, который будет вход в консоль при вызове функции onPlayerStateChange()

...