Question

我正在尝试在页面中悬停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 code：

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

任何帮助都会非常高兴！

非常感谢。

Answer 1

根据您的代码，我了解您只有在有人悬停<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>超过1秒时才会触发fb事件。

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

<head>

  <style>
    .modal-container {
      width: 100%;
      height: 100%;
      background-color: rgba(255,255,255,0.8);
      display: inline-block;
      position: absolute;
      top: 0;
      left 0;
      z-index: 100;
    }
    .modal-content {
      margin: 10%;
      backgrond-color: rgba(0,0,0,1);
      display: inline-block;
      width: 80%;
      height: 80%;
    }

    .hidden {
      display: none;
    }
  </style>
</head>

<body>
  <div> my normal content </div>
  <div>
    <button type="button" id="open-modal">open the modal</button>
  </div>

  <div class="modal-container hidden">
    <div class="modal-content"> 
      Here is your modal content
      <div>
        <button type="button" id="close-modal">close</button>
      </div>
    <div>
  </div>

  <script src="path/to/jquery/libraries/jquery.min.js"></script>
  <script>
    $(document).ready(() => {

      $('.modal-container').on('click', function(event){
        // stop bubbling on clicks
        event.preventDefault();
        event.stopPropagination();
      });

      $('#open-modal').on('click', function(){
        // show the modal
        $('.modal-container').removeClass('hidden');
        // disable body scrolling in the background
        $('body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
      })

      $('#close-modal').on('click', function(event){
        $('.modal-container').addClass('hidden');
        $('body').css('overflow-x', 'auto').css('overflow-y', 'auto');
      }
    });

  </script>
</body>

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

Answer 2

我看到你的<p>元素在页面的整个宽度上延伸，因此即使你没有悬停在精确元素上而只是悬停在包含<p>的横截面上，你也会注册一个悬停事件

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

Answer 3

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

我创建了一个变量＆＃34; event＆＃34;并推送了一个dataLayer＆＃34; thereisHover＆＃34;。

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

然后我将标准事件分成另一个标记，该标记仅在event = thereisHover时触发。

（GTM）在悬停时触发fb像素

3 个答案: