(GTM) 悬停时触发 fb 像素答案

【问题标题】：(GTM) Trigger fb pixel on hover(GTM) 悬停时触发 fb 像素
【发布时间】：2017-12-03 12:29:51
【问题描述】：

我试图在页面中悬停 div（或其他）时触发 fb 像素事件。但是，在我悬停 div 之前，它似乎是第一次触发事件。悬停div时，事件指示正确的参数。

还有一件非常好的事情，就是捕获其他信息，例如悬停的 div id 或其他信息。

这是我在 GTM 标记中插入的代码。我在页面加载（所有页面）时触发它。

<script> 
$(document).ready(function() {
var startHover = $.now();

$("#product_name").hover(
function(){
    startHover = $.now();
},
function(){
    var endHover = $.now();
    var msHovered = endHover - startHover;
    var seconds = msHovered/1000;
    if (seconds >= 1) {
        fbq('track', 'Hover', {
            domain: {{Page Hostname}},
            page_path: {{Page Path}}
        });
    }
}
);
});
</script>

HTML 代码：

<p id="product_name">Product 1</p>

任何帮助都会很高兴！

非常感谢。

【问题讨论】：

所以该事件仅在第一次悬停时触发，而不是在后续事件中触发，是这样吗？
不，实际上该事件是在页面加载后 1 秒触发的，无论您是否悬停。然后当悬停#product_name 时，fb 像素参数会正确发送到事件。期望的行为是仅在将#product_name div 悬停 1 秒后才触发 fb 像素，而不是在页面加载后一秒。
悬停有问题，即使鼠标悬停在页面上的任何位置，它也会将其注册为悬停。试试这个jsfiddle.net/L9ory5ym

标签： jquery facebook google-tag-manager facebook-pixel

【解决方案1】：

根据您的代码，我知道您只想在有人将 #product_name 悬停超过 1 秒时才触发 fb 事件。

在您的 HTML 代码中，请使用以下代码：

<script> 
    $(document).ready(function() {
        var timer;
        $("#product_name").mouseenter(function() {
            var that = this;
            timer = setTimeout(function(){
                //var text = $(that).text() //text inside hovered #product_name element
                //var textInSpan =  $(that).find('span').text() //text inside hovered #product_name span element
                //var hoveredId =  $(that).attr('id') //hovered element ID
                //var hoveredClass =  $(that).attr('class') //hovered element class name
                fbq('track', 'Hover', {
                    domain: {{Page Hostname}},
                    page_path: {{Page Path}}
                });
            }, 1000);
        }).mouseleave(function() {
            clearTimeout(timer);
        });
    });
</script>

在我的代码中，我添加了注释示例，您可以如何接收有关悬停 div 信息的其他信息

【讨论】：

你好维克多！谢谢你的代码！不幸的是，它的行为似乎与我的一样：在页面加载后 1 秒内，该事件仍在第一次被触发，这会向 facebook 发送错误信息，直到您将鼠标悬停在 #product_name 上，其中良好的参数被添加到事件中。我们能否摆脱页面加载触发，仅在实际悬停 #product_name 时触发事件？
嗯，我不敢相信。可能是其他标签正在触发并向 FB 发送错误信息？
是的，我不明白。我现在正在使用你的代码，因为它看起来比我的更合适，但它似乎在我的光标所在的任何地方 1 秒后被触发，即使在 #product_name 段落之外

【解决方案2】：

在我看来，您的 <p> 元素会延伸到页面的整个宽度，因此即使您不将鼠标悬停在确切的元素上，而只是悬停在包含 <p> 的横截面上，您也会注册悬停事件。

检查此以查看不一致https://jsfiddle.net/L9ory5ym/1/ 要解决此问题，请在段落元素中添加width 属性，以便仅在相关元素上注册事件。

【讨论】：

你好希瓦姆。确实您的观察是正确的，我将在段落中添加宽度。但是，即使我没有悬停在那条线上，该事件仍然会被触发。无论我的光标在哪里，它都会在页面加载后 1 秒被系统触发。
你能不能在你的代码上放置一个调试点来测试 1 秒检查。可能这个块正在页面的其他地方执行，可能是代码上其他地方的一些重复代码
看来你是对的。如果我不将鼠标放在窗口区域内，则不会触发任何内容。
请进一步验证行为并回复任何更新。如果它解决了您的问题，请接受答案

【解决方案3】：

我设法找到了解决问题的方法。基本上我是在所有页面上触发标签，所以 fb 事件是在没有内容的情况下触发的，只有在悬停#product_name 时才会发送正确的参数。

我创建了一个变量“event”并推送了一个dataLayer“thereisHover”。

dataLayer.push({
   'event': 'thereisHover'
});

然后我将标准事件分离到另一个标签中，该标签仅在 event = thereisHover 时触发。

【讨论】：