javascript - Facebook 广告:如何创建像素自定义 Javascript 事件来检测对 Youtube 视频的点击
问题描述
假设我们有 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-追踪
解决方案
我不认为这是 Facebook Events 的问题,而是 iFrame 的问题。iFrame 中托管的 url 接收点击事件,并且不会将该事件冒泡到 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()
推荐阅读
- java - Java NIO 文件密钥结构
- java - Android Studio 无法读取 JSONArray
- google-apps-script - 如果复选框为真,则编写脚本
- r - 如何将数组列表附加到R中的数据框列表中
- java - 为并发请求生成随机数,不重复
- c# - 将 Kentico 添加到 ASP.NET MVC 项目后连接失败
- python - 在 4 个参数中,只有 3 个参数数据被插入 Sqlite3,但没有一个使用 tkinter
- android-studio - android-studio 的 sdk manager 中没有 LLDB
- c++ - 为什么答案是5?
- mysql - Adding tables in mysql