使用Google跟踪代码管理器跟踪体彩七星彩开奖结果何时在屏幕上可见

几周前，我在GTM Google+社区中注意到一个问题，询问是否’可以跟踪屏幕上何时显示特定网站体彩七星彩开奖结果。提供了一些提示，但没有为像您（可能）和我这样的非开发人员提供现成的解决方案。所以今天’我将向您展示一个自定义监听器，该监听器将跟踪特定的网站体彩七星彩开奖结果（您’则必须对其进行配置）并在该体彩七星彩开奖结果/部分进入浏览器窗口视图时触发dataLayer.push事件。

免责声明：由于此博客完全面向非开发人员（我是其中之一），因此我不会’不能自己写这个听众。所以我问我的同事’JavaScript很棒，可以为我编写一个。我只是给他明确的指示：

• 我必须能够配置 我要追踪哪个体彩七星彩开奖结果 与CSS选择器。
• 我想跟踪何时一个体彩七星彩开奖结果 显示或 隐.
• I 不要’不想发送我的Google Analytics（分析）报告。如果某个特定体彩七星彩开奖结果已经出现在浏览器窗口中，我不会’t want the 显示 事件再次触发。重新加载页面后， 显示 事件可以再次触发。
• 我想通过一些 附加数据 with the Data Layer event after a particular element is 显示/hidden.
• 此体彩七星彩开奖结果可见性 侦听器必须仅依靠滚动。如果屏幕上出现具有某些其他效果的特定体彩七星彩开奖结果（例如轮播），则该体彩七星彩开奖结果会赢得’t be tracked.
• 最后， 我给开发人员提供了一个示例dataLayer.push事件代码片段 我要他开除

  window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         'event': 'elementVisilibity', // the value is always the same
         'visibilityStatus': 'shown', //  possible values: 'shown' or 'hidden'
         'elementAttribute': 'attributeValue' // some unique value

要求

请记住，此跟踪方法必须满足一些要求。

• 自动事件侦听器在很大程度上依赖于滚动。当访问者向下滚动并开始看到特定的网站体彩七星彩开奖结果时，将触发dataLayer.push事件。
• 所需的网站体彩七星彩开奖结果必须是静态的。如果你’重新计划跟踪移动的旋转木马，并想在屏幕上出现第二张幻灯片时触发事件，因此该博客文章赢得了’不能帮助你。其实我没有’没有测试过这种自定义情况，但是我’m guessing it won’t work.

换句话说，当访问者向下滚动到特定网站体彩七星彩开奖结果（始终在某个位置）并且该体彩七星彩开奖结果进入浏览器窗口视图时，将调度数据层事件。我们’将使用该事件作为触发来触发Universal Analytics代码。

请记住，此听众还有机会获胜’无法在某些网站上使用，因为它们使用不同的技术来加载网站体彩七星彩开奖结果。而且，如果一个页面包含很多精美的动画来加载各个网站板块，那么这种技术肯定会胜出’没用（但是您仍然可以尝试运气）。

 

自动事件侦听器的配置

就像每个自定义跟踪解决方案一样，此解决方案从侦听器开始。它’一个JavaScript代码段，可不断查找特定体彩七星彩开奖结果以及它们何时出现在屏幕上。如果你’如果您不是开发人员，请先跳过大约110行代码。重要的部分（对您而言）从第112行开始。

 

 

<script>
 (function(w, d, ns) {
  var _ns = "_" + ns;

  w[_ns] = w[_ns] || {
   elements: [],
   addElements: function(selector, onShow, onHide) {
     var elements = d.querySelectorAll(selector);

     for (var i = 0; i < elements.length; i++) {
      w[_ns].elements.push({
        element: elements[i],
        onShow: onShow,
        onHide: onHide,
        wasShown: false,
        wasHidden: false
       });
      }

      w[_ns].checkElements();
     },
     checkElements: function() {
      for (var i = 0; i < w[_ns].elements.length; i++) {
       var rect = { top: 0, left: 0 },
         isVisible = false;

         if (typeof w[_ns].elements[i].element.getBoundingClientRect === "function") {
         rect = w[_ns].elements[i].element.getBoundingClientRect();
      }

      if (rect.top + w[_ns].getWindowOffset() > w[_ns].getWindowOffset()) {
       if (rect.top + w[_ns].getWindowOffset() < w[_ns].getWindowOffset() + w[_ns].getWindowHeight()) {
        isVisible = true;
       }
      }

      if (rect.top + w[_ns].getWindowOffset() + w[_ns].elements[i].element.offsetHeight > w[_ns].getWindowOffset()) {
       if (rect.top + w[_ns].getWindowOffset() + w[_ns].elements[i].element.offsetHeight < w[_ns].getWindowOffset() + w[_ns].getWindowHeight()) {
        isVisible = true;
       }
      }

      if (isVisible) {
       if (!w[_ns].elements[i].wasShown) {
         w[_ns].elements[i].wasShown = true;

          if (typeof w[_ns].elements[i].onShow === "function") {
           w[_ns].elements[i].onShow(w[_ns].elements[i].element);
            }
           } 
          } else {
           if (w[_ns].elements[i].wasShown) {
            if (!w[_ns].elements[i].wasHidden) {
             w[_ns].elements[i].wasHidden = true;

              if (typeof w[_ns].elements[i].onHide === "function") {
               w[_ns].elements[i].onHide(w[_ns].elements[i].element);
              }
             }
            }
           }
          }
         },
         getWindowOffset: function() {
          return (w.pageYOffset || d.documentElement.scrollTop) - (d.documentElement.clientTop || 0);
         },
         getWindowHeight: function() {
          return w.innerHeight || d.documentElement.clientHeight || d.body.clientHeight;
         },
         bindWindow: function() {
          if (typeof w[_ns].onWindowResize !== "function" || typeof w[_ns].onWindowScroll !== "function") {
           w[_ns].onWindowResize = function() {
            w[_ns].checkElements();
           };

         w.attachEvent ? w.attachEvent("onresize", w[_ns].onWindowResize) : w.addEventListener("resize", w[_ns].onWindowResize, false);
          w[_ns].onWindowScroll = function() {
           w[_ns].checkElements();
          };

         w.attachEvent ? w.attachEvent("onscroll", w[_ns].onWindowScroll) : w.addEventListener("scroll", w[_ns].onWindowScroll, false);
         }
        }
       };

         w[ns] = w[ns] || function(selector, onShow, onHide) {
          if (d.readyState === "complete") {
           w[_ns].bindWindow();
            w[_ns].addElements(selector, onShow, onHide);
          } else if (d.attachEvent) {
            d.attachEvent("onreadystatechange", function() {
             if (d.readyState === "complete") {
              w[_ns].bindWindow();
               setTimeout(function() {
                w[_ns].addElements(selector, onShow, onHide);
               }, 500);
              }
             });
            } else {
             d.addEventListener("readystatechange", function() {
              if (d.readyState === "complete") {
               w[_ns].bindWindow();
                setTimeout(function() {
                 w[_ns].addElements(selector, onShow, onHide);
                }, 500);
               }
              });
             }
            };
           })(window, document, "watchElements");

   watchElements("ENTER_YOUR_CSS_SELECTOR_HERE", function(element) { //change the CSS Selector
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
       'event': 'elementVisibility',
       'visibilityStatus': 'shown',
       'elementAttribute': element.getAttribute("ENTER_ATTRIBUTE_HERE") //change the attribute (optional)
     });
   }, function(element) {
     window.dataLayer = window.dataLayer || [];
     window.dataLayer.push({
       'event': 'elementVisibility',
       'visibilityStatus': 'hidden',
       'elementAttribute': element.getAttribute("ENTER_ATTRIBUTE_HERE") //change the attribute (optional)
     });
 });
 </script>

让’仔细看看。整个脚本（第1行）–110）将仅查找特定体彩七星彩开奖结果，因此我们需要对其进行精确配置。在第112行，而不是 enter_here_your_CSS_selector，你’必须输入一个CSS选择器。简而言之，CSS选择器是一种模式，用于在页面上查找特定的一个或多个体彩七星彩开奖结果。

例如，您要跟踪ID为 thisAwesomeButton，Â您的CSS选择器将是 #thisAwesomeButton.

如果您想跟踪具有 图片放大 CSS类，是ID为的代码块的后代 非常重要的部分。在这种情况下，CSS选择器将是 div＃veryImportantSection img.image-large。

是的，我知道这对非开发人员来说是高级的，但是请相信我：我与Google跟踪代码管理器的合作越多，就越利用CSS选择器。

Simo Ahava发布了非常有用的指南（Link 1和Link 2）教授如何在GTM中使用CSS选择器。每当出现与CSS-Selector有关的问题时，我总是打开这些指南之一。

无论如何，回到体彩七星彩开奖结果可见性监听器的配置。首先，您需要编辑 enter_here_your_CSS_selector。如果屏幕上出现特定体彩七星彩开奖结果（符合CSS选择器），则数据层事件 elementVisibility 将分派两个附加参数：

• visibleStatus状态。可能的值： 显示 和 隐. 每个状态只能出现一次（一个网站体彩七星彩开奖结果），这意味着如果体彩七星彩开奖结果（1）出现了，那么（2）隐藏了，然后又出现了（3），则只会触发两个数据层事件，一个“shown” 和 one “hidden”。但是，如果跟踪了两个体彩七星彩开奖结果，则每个体彩七星彩开奖结果可以有两个事件：“shown” 和 “hidden”对于第一个体彩七星彩开奖结果，“shown” 和 “hidden” for the 2nd. 如果重新加载页面，则会重置这些规则。
• elementAttribute。它是一个可选的但有用的参数，可帮助您区分看到了哪个体彩七星彩开奖结果。但是需要另外配置。

一个简单的例子。假设您要跟踪同时满足两个条件的所有图像的外观：

• CSS类等于 。图片
• 图片必须是ID为ID的块的后代 非常重要的部分。

因此，CSS选择器将是 div＃veryImportantSectionÂimg.image-large.

总共在一个页面上有5张图像。如果访客滚动到页面的最底部，则他’会看到全部五个。这意味着5个相同的数据层事件，但是您’想要在Google Analytics（分析）报告中以某种方式区分它们，对吗？

幸运的是，在我们的案例中，每个图像都有一个 alt attribute with a unique value. 这里’s an example:

Alt 参数’s value is Bigcommerce。 让’s把它变成变量 elementVisibility 数据层事件，可以吗？其实呢’非常简单，只需替换 enter_attribute_here 与 alt.

这里’s配置的代码段应该是什么样子（我们’ve编辑了第1、6和13行）：

   watchElements("div#veryImportantSection img.image-large", function(element) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'event': 'elementVisibility',
            'visibilityStatus': 'shown',
            'elementAttribute': element.getAttribute("alt")
     });
   }, function(element) {
         window.dataLayer = window.dataLayer || [];
         window.dataLayer.push({
             'event': 'elementVisibility',
             'visibilityStatus': 'hidden',
             'elementAttribute': element.getAttribute("alt")

保存自定义HTML标记并对其进行测试。

 

让’s test

启用 GTM预览和调试模式，刷新页面我们’重新进行操作并向下滚动，直到看到我们希望跟踪的第一张图像。如果一切都配置正确，则以下事件应出现在预览和调试控制台中：

活动名称为 elementVisibility，visibilityStatus为 显示，elementAttribute为 Bigcommerce。 如果您进一步向下滚动，则图像将从窗口中消失，并且将调度另一个Data Layer事件，其可见性为StatusStatus = 隐.

 

触发器和变量

正如我在多个博客文章中已经提到的那样，默认情况下，Google跟踪代码管理器无法识别自定义事件和数据层变量。因此，如果您想使用事件作为触发器或将数据传递给Google Analytics（分析），’将需要创建一个触发器和数据层变量。

首先，让’创建两个数据层变量：

 

然后，我们应该创建一个触发器并将其设置为在所有 elementVisibility 事件（包括两者 显示 和 隐 事件）。

另外，我们可以将触发器设置为仅在 显示 （要么 隐）事件。

 

通用Analytics（分析）标签

最后，让’将数据发送到Google Analytics（分析）。使用以下设置创建标签：

尝试提出一些有意义的标题（而不是 非常重要的形象）。这个’只是一个示例ðŸ™，’re not sure what Google Analytics（分析）变量 是的 阅读本教程.

和唐’别忘了用Google Analytics（分析）实时报告测试此实现。

 

如何在屏幕上使用GTM跟踪iF体彩七星彩开奖结果：结论

但是，另一本GTM教程已经结束。在这个，我’ve解释了如何跟踪特定体彩七星彩开奖结果在屏幕上是否可见。您需要做的是：

• 使用“体彩七星彩开奖结果可见性”侦听器创建一个自定义HTML标签。
• 使用CSS选择器进行配置（遵循Simo’s tutorials 和 you’ll succeed).
• （可选）您可以获取element的值’的属性，并将其转换为变量，然后可以将其进一步传递给Google Analytics（分析）。

请记住，在某些网站中，体彩七星彩开奖结果的加载方式可能有所不同，因此’这个Element Visibility监听器有机会赢得’工作。无论如何，我建议您尝试一下，也许您’ll find it useful.