分页切换时Adobe Data Layer的pageLoad事件未正常触发问题

核心问题排查 #

1. 函数导入名称不匹配：pageLoad.js导出的是PageLoad，但pagination.js中导入的是paginationPageLoad，导致调用的函数不存在，事件根本没触发。
2. URL未动态更新：单页应用中切换分页属于客户端路由操作，window.location.href不会自动更新，直接获取的始终是初始页面URL。
3. 代码语法错误：pageLoad.js中存在一段多余的硬编码JSON，会导致JS语法报错，阻断后续代码执行。
4. 字段名不一致：user对象中代码定义的是loginStatus，但预期输出是loginType，字段不匹配会导致数据异常。

修复后的代码 #

1. 修正pageLoad.js

// pageLoad.js
export const PageLoad = (pageUrl) => {
  // 优先使用传入的动态URL， fallback到当前location
  const URL = pageUrl || window.location.href.toLowerCase();
  const pageLoadObject = {
    event: "pageLoad",
    page: {
      URL,
    },
    user: {
      email: loginInfo?.email || null,
      loginType: loginInfo ? 'loggedin' : 'anonymous', // 修正字段名匹配预期
    }
  };
  console.log(pageLoadObject);
  window.adobeDataLayer.push(pageLoadObject);
};

2. 修正pagination.js

// pagination.js
import { PageLoad } from '../pageLoad'; // 修正导入的函数名

const Pagination = (props) => {
  // 构造当前分页的完整URL
  const getCurrentPageUrl = () => {
    const url = new URL(window.location.href);
    url.searchParams.set('page', props.currentPage);
    return url.toString();
  };

  useEffect(() => {
    // 传入动态构造的分页URL
    PageLoad(getCurrentPageUrl());
  }, [props.currentPage]); // 依赖项使用props中的currentPage，确保状态变化时触发
};

验证方法 #

切换分页后，通过以下代码检查adobeDataLayer中的最新事件：

// 获取所有pageLoad事件
const pageLoadEvents = window.adobeDataLayer.filter(activity => activity.event === 'pageLoad');
// 打印最后一次触发的事件
console.log('Latest pageLoad event:', pageLoadEvents[pageLoadEvents.length - 1]);

此时应该能看到URL参数随分页变化，且每次切换分页都会新增一条pageLoad事件记录。

内容的提问来源于stack exchange，提问作者Kiran Kumar V