如何在Notion+Super博客中用JS实现GA4带电影名的出站链接追踪？

完全可以通过添加自定义JS代码实现需求，核心思路是监听影片卡片的点击事件，提取元素ID作为影片名称传入GA4事件参数，具体实现如下：

代码实现 #

将以下代码添加到博客的<head>、<footer>或<body>顶部区域：

document.addEventListener('DOMContentLoaded', function() {
  // 处理页面初始加载的影片卡片
  attachClickHandlers(document.querySelectorAll('.notion-collection-card'));

  // 监听动态加载的影片卡片（适配Notion内容异步渲染特性）
  const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length) {
        const newCards = mutation.target.querySelectorAll('.notion-collection-card');
        attachClickHandlers(newCards);
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  function attachClickHandlers(cards) {
    cards.forEach(function(card) {
      // 定位卡片内的出站链接
      const link = card.querySelector('a[href^="http"]');
      if (!link) return;

      // 避免重复绑定事件
      if (link.dataset.tracked) return;
      link.dataset.tracked = 'true';

      link.addEventListener('click', function(e) {
        const movieTitle = card.id;
        const destinationUrl = this.href;

        // 发送GA4自定义事件
        if (window.gtag) {
          gtag('event', 'outbound_movie_click', {
            'event_category': '影片出站链接',
            'event_label': movieTitle,
            'destination_url': destinationUrl,
            'transport_type': 'beacon' // 确保页面跳转前事件数据能成功上报
          });
        }
      });
    });
  }
});

关键说明 #

• 动态元素适配：使用MutationObserver监听页面DOM变化，自动为后续异步加载的影片卡片绑定点击事件，解决Notion内容延迟渲染的问题
• 事件去重：通过dataset.tracked标记已绑定事件的链接，避免重复触发上报
• GA4事件参数：
  • event：自定义事件名称（可按需修改，比如movie_link_click）
  • event_category：事件分类，用于在GA4报表中分组筛选
  • event_label：直接传入影片卡片的ID（即影片名称）
  • transport_type: 'beacon'：利用浏览器Beacon API确保跳转前事件数据能成功发送到GA4服务器
• 兼容原有自动追踪：该代码不会干扰GA4默认的出站点击测量，你可以在GA4报表中通过自定义事件outbound_movie_click查看带影片名称的点击数据

验证方法 #

1. 打开Chrome浏览器开发者工具 → 应用 → GA4调试（或使用GA4官方DebugView工具）
2. 点击博客中的影片链接，查看是否有outbound_movie_click事件上报，且event_label为对应的影片名称

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