如何为Google Analytics gtag添加动态参数？

嘿，这个需求很好实现，核心思路就是先构建一个基础参数对象，再根据条件动态追加Link属性就行，具体方案如下：

实现步骤 #

1. 先把所有固定要传递的参数放进一个对象里，这样方便后续动态扩展
2. 检查传入的pageObj是否包含Link属性（注意你调用方法时传的是大写Link，要和这个键名对应上），如果存在就把它添加到参数对象中
3. 最后把完整的参数对象传给gtag方法

修改后的完整代码 #

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-123456"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-123456', {
'custom_map': {
'dimension1': 'Page',
'dimension2': 'View',
'dimension3': 'Page Area',
'dimension4': 'GUID',
'dimension5': 'Link'
}
});
$(document).ready(function () {
$.trackPageAction = function(pageObj) {
  // 先创建包含固定参数的基础对象
  const eventParams = {
    'event_category': pageObj.category,
    'event_action': pageObj.action,
    'event_label': pageObj.label,
    'Page': pageObj.page,
    'View': pageObj.view,
    'Page Area': pageObj.area,
    'GUID': <?php echo session('customer_id'); ?>
  };

  // 动态添加Link参数（仅当存在时）
  if (typeof pageObj.Link !== 'undefined' && pageObj.Link) {
    eventParams['Link'] = pageObj.Link;
  }

  // 传入完整参数调用gtag
  gtag('event', 'page_view', eventParams);
}
});
</script>
<!-- WITH LINK PARAM -->
<a href="#" onclick="$.trackPageAction({category : 'Navigation', action : 'Page Navigation', label : 'Timeline Page', view : 'you', area : 'Footer', page : 'timeline', 'Link' : 'http://yahoo.com'})">TIMELINE</a>
<!-- WITHOUT LINK PARAM -->
<a href="#" onclick="$.trackPageAction({category : 'Navigation', action : 'Page Navigation', label : 'About Page', view : 'you', area : 'Footer', page : 'about'})">ABOUT</a>

小提示 #

• 我额外加了&& pageObj.Link的判断，是为了避免传入空字符串的无效参数，如果你不需要这个校验可以直接去掉
• 这种对象拼接的方式比在gtag里写一堆嵌套条件更清晰，后续要加其他动态参数也能直接复用逻辑

内容的提问来源于stack exchange，提问作者Terry Doll