如何借助React Google Tag Manager基于域名区分网站内外流量？

方法一：React端直接传递用户类型到GTM #

修改你的GTM初始化代码，在数据层中加入当前域名和判断后的用户类型，让GTM直接读取：

import TagManager from 'react-gtm-module'

// 获取当前域名并判断用户类型，按需调整内部域名的判断规则
const currentDomain = window.location.hostname;
const userType = currentDomain.includes('internal') ? 'internal' : 'external';

const tagManagerArgs = {
    gtmId: 'GTM-000000',
    dataLayer: {
        pageDomain: currentDomain,
        userType: userType
    }
}
 
TagManager.initialize(tagManagerArgs)
...
 
const app = document.getElementById('app')
ReactDOM.render(<Router routes={routes} />, app)

方法二：GTM端独立配置（无需修改React代码） #

1. 创建自定义变量判断用户类型 #

在GTM后台：

• 新建自定义JavaScript变量，命名为{{User Type}}
• 填入以下代码（按需修改内部域名的匹配规则）：

function() {
  const domain = window.location.hostname;
  // 示例：匹配内部域名或内网IP
  if (domain.includes('internal.yourdomain.com') || domain.startsWith('192.168.')) {
    return 'internal';
  } else {
    return 'external';
  }
}

2. 拆分页面浏览触发器 #

创建两个独立的页面浏览触发器，分别对应两类用户：

• 内部用户页面浏览触发器：
  触发类型选「Page View」，添加条件：{{User Type}} 等于 internal
• 外部用户页面浏览触发器：
  触发类型选「Page View」，添加条件：{{User Type}} 等于 external

3. 关联跟踪标签 #

将你的GA（或其他分析工具）标签分别关联上述两个触发器，即可分别收集内部/外部用户的页面浏览数据。

补充：SPA路由切换的流量跟踪（React Router场景） #

因为React是单页应用，默认GTM的Page View仅触发初始加载，需监听路由变化发送自定义事件：

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import TagManager from 'react-gtm-module';

function App() {
  const location = useLocation();

  useEffect(() => {
    const currentDomain = window.location.hostname;
    const userType = currentDomain.includes('internal') ? 'internal' : 'external';
    // 发送SPA页面切换事件到GTM
    TagManager.dataLayer({
      dataLayer: {
        event: 'spa_page_view',
        pagePath: location.pathname,
        pageTitle: document.title,
        userType: userType
      }
    });
  }, [location]);

  // 原有渲染逻辑...
}

之后在GTM中创建「spa_page_view」自定义事件触发器，结合{{User Type}}变量，即可跟踪路由切换时的用户类型。

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