通过GTM为SPA提取存储UTM参数并跨域传递的分步指南请求

1. 着陆页（www.test.com/motor）提取并存储UTM参数 #

在着陆页编写前端代码，从URL提取UTM参数并存储到跨子域可访问的介质：

• 提取UTM参数：用JS解析URL查询参数，筛选标准UTM字段（utm_source, utm_medium, utm_campaign, utm_term, utm_content）

  function getUTMParams() {
    const params = new URLSearchParams(window.location.search);
    const utmParams = {};
    ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].forEach(key => {
      if (params.has(key)) utmParams[key] = params.get(key);
    });
    return utmParams;
  }
  

• 跨子域存储：使用Cookie（兼容性更好），设置domain=.test.com让子域quote.test.com可访问：

  function setUTMCookie(params) {
    Object.entries(params).forEach(([key, value]) => {
      document.cookie = `${key}=${encodeURIComponent(value)}; domain=.test.com; path=/; max-age=86400`; // 有效期1天
    });
  }
  
  // 页面加载时执行
  const utmParams = getUTMParams();
  if (Object.keys(utmParams).length > 0) setUTMCookie(utmParams);
  

2. 跳转至quote.test.com时的参数传递 #

点击“获取报价”按钮时，确保UTM参数可被目标页面获取：

• 方案1（推荐）：直接依赖跨子域Cookie，无需修改跳转URL，目标页面可直接读取
• 方案2（备选）：URL拼接参数，防止Cookie失效：

  document.querySelector('#get-quote-btn').addEventListener('click', (e) => {
    e.preventDefault();
    // 优先读URL参数，再读Cookie
    const utmParams = getUTMParams() || getUTMCookie();
    const targetUrl = new URL('https://quote.test.com');
    Object.entries(utmParams).forEach(([key, value]) => {
      targetUrl.searchParams.set(key, value);
    });
    window.location.href = targetUrl.toString();
  });
  
  // 读取Cookie的辅助函数
  function getUTMCookie() {
    const cookies = document.cookie.split('; ');
    const utmParams = {};
    cookies.forEach(cookie => {
      const [key, value] = cookie.split('=');
      if (['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content'].includes(key)) {
        utmParams[key] = decodeURIComponent(value);
      }
    });
    return utmParams;
  }
  

3. quote.test.com及后续页面读取并携带UTM参数 #

在quote.test.com的SPA初始化阶段，读取UTM参数并确保后续请求携带：

• 读取参数：优先从URL读取（若跳转时拼接），再从Cookie读取，同时更新Cookie：

  function getCurrentUTMParams() {
    const urlParams = getUTMParams();
    if (Object.keys(urlParams).length > 0) {
      setUTMCookie(urlParams);
      return urlParams;
    }
    return getUTMCookie();
  }
  
  const currentUTM = getCurrentUTMParams();
  

• API请求携带参数：在所有提交线索的请求中，将UTM参数合并到请求体：

  // 示例：提交报价请求
  async function submitQuote(quoteData) {
    const payload = { ...quoteData, ...currentUTM };
    const response = await fetch('/api/submit-quote', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });
    return response.json();
  }
  

4. 后端存储UTM参数到SQL数据库 #

• 修改数据库表：在线索表（如leads）中新增UTM字段：

  ALTER TABLE leads
  ADD COLUMN utm_source VARCHAR(255) NULL,
  ADD COLUMN utm_medium VARCHAR(255) NULL,
  ADD COLUMN utm_campaign VARCHAR(255) NULL,
  ADD COLUMN utm_term VARCHAR(255) NULL,
  ADD COLUMN utm_content VARCHAR(255) NULL;
  

• 后端接收存储：在提交报价的接口中，提取UTM参数并插入数据库：

  # 示例Python Flask代码
  @app.route('/api/submit-quote', methods=['POST'])
  def submit_quote():
      data = request.get_json()
      # 提取UTM参数
      utm_fields = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content']
      utm_data = {k: data.get(k) for k in utm_fields}
      # 插入数据库
      cursor.execute(
          "INSERT INTO leads (name, email, utm_source, utm_medium, utm_campaign, utm_term, utm_content) VALUES (%s, %s, %s, %s, %s, %s, %s)",
          (data['name'], data['email'], *utm_data.values())
      )
      db.commit()
      return jsonify({"status": "success"})
  

5. 营销效果分析SQL查询 #

通过SQL统计不同渠道的线索表现：

• 按来源和活动统计线索量与转化率：

  SELECT
    utm_source,
    utm_campaign,
    COUNT(*) AS total_leads,
    COUNT(CASE WHEN converted = 1 THEN 1 END) AS converted_leads,
    ROUND(COUNT(CASE WHEN converted = 1 THEN 1 END) * 100.0 / COUNT(*), 2) AS conversion_rate
  FROM leads
  GROUP BY utm_source, utm_campaign
  ORDER BY total_leads DESC;
  

• 按媒介类型统计平均报价金额：

  SELECT
    utm_medium,
    COUNT(*) AS total_leads,
    AVG(quote_amount) AS avg_quote_value
  FROM leads
  GROUP BY utm_medium;
  

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