PROSAGA码农传奇-网站分析-如何测量使用Tealium / GA的URL片段的单页网站？

<div class =“post-text”itemprop =“text”>
  
    因此，从Tealium的角度来看，我们需要在加载新片段时触发视图事件（如果我正确理解这一点）。
  
  
    如果我们假设链接点击发生了片段更改，那么我们需要在链接点击发生时触发视图事件。
  
  
    从GA的角度来看，我们需要触发捕获新信息的视图。对于视图，这可能是位置，路径和标题。
  
  
    因此，我们需要Tealium来构建新的数据点，然后在视图事件中将它们传递给GA。
  
  
    在Tealium中做到这一点的最简单方法（一切都是平等的）是通过a
    <a href =“https://community.tealiumiq.com/t5/iQ-Tag-Management/jQuery-onHandler-Extension-jQuery-v1-7-and-up/ta-p/9868"rel =”nofollow noreferrer “>
      jQuery onHandler扩展
    </A>
  
  
    jQuery扩展需要以下信息：
  
  <OL>
    <LI>
      jQuery选择器（或选择器）要注意
    </LI>
    <LI>
      “Trigger On”事件类型（在此示例中将为Click）
    </LI>
    <LI>
      跟踪要运行的事件类型（在这种情况下查看事件）
    </LI>
    <LI>
      变量和变量要设置的值

<a href="https://i.stack.imgur.com/FNVMC.png" rel="nofollow noreferrer">
        Tealium jQuery onHandler扩展配置
      </A>
    </LI>
    <LI>
      请注意，在jQuery扩展上设置一个条件总是一个好主意，这样它们只能在需要时运行而不是一直运行
    </LI>
  </醇>
  
    在此扩展中，我设置了以下内容：
  
  <OL>
    <LI>
      jQuery Selector：'＃MyID_1，＃MyID_2，＃MyID_3' - 是的，您可以传递选择器列表或几乎任何其他有效的jQuery选择器语句
    </LI>
    <LI>
      触发开启：'点击'
    </LI>
    <LI>
      跟踪事件：'查看'
    </LI>
    <LI>
      
        3个变量：
      
      
        一个。 'page_name'：
         <code>
 $(this).text();
 </code>
         //获取链接文本
      
      
        湾'my_url'：
         <code>
 utag.data['dom.url']+$(this).attr('href')
 </code>
         //构建包含片段的完整URL
//utag.data['dom.url']是Tealium自动生成的变量/数据点
      
      
        C。我自己的路 ：
         <code>
 utag.data['dom.pathname']+$(this).attr('href');
 </code>
         //构建路径
//utag.data['dom.pathname']是Tealium自动生成的变量/数据点
      
    </LI>
  </醇>
  
    注意：确保将每个类型的类型设置为“JS Code”，否则您的JavaScript将被引用为字符串。
  
  
    为什么这三个变量？据我所知，GA是新页面视图所期望的值 - 位置/ URL，路径和标题，因此我们在扩展中构造这些值，以便在视图事件上将它们传递给GA。
  
  
    现在，我们只需要将这些新变量映射到GA。
  
  <OL>
    <LI>
       <code>
 my_path
 </code>
       被映射到
       <code>
 page
 </code>
       在GA映射工具箱中
    </LI>
    <LI>
       <code>
 page_name
 </code>
       被映射到
       <code>
 title
 </code>
    </LI>
    <LI>
       <code>
 location
 </code>
       不是映射工具箱中的默认选项，因此我们需要添加一个名为的自定义目标变量
       <code>
 location
 </code>
       和地图
       <code>
 my_url
 </code>
       它。

<a href="https://i.stack.imgur.com/MtsaA.png" rel="nofollow noreferrer">
        GA的自定义变量映射
      </A>
    </LI>
  </醇>
  
    这就是你在Tealium和最小编码中做到这一点的方法。如果出于某种原因你不想/不能在Tealium中做到这一点，这为我们提供了一个非常好的模板，可以将自定义函数添加到我们的代码库中：
  
   <pre>
 <code>
 `$(document.body).on('click', '#altID', function(){
 utag.view({
 "page_name": $(this).text(),
 "my_url": utag.data['dom.url'] + $(this).attr('href'),
 "my_path": utag.data['dom.pathname'] + $(this).attr('href')
 })
})`

</code>
 </pre>
  
    看到两者都在行动
    <a href="https://codepen.io/clint-ivy/pen/JxdGzz" rel="nofollow noreferrer">
      在CodePen这边
    </A>
    。
  
</DIV>