如何实现在成功页面仅执行一次目标追踪脚本？

你的代码存在两个核心问题：

1. 逻辑判断完全写反：原代码是当beenHere标记存在时才执行追踪，这和「仅执行一次」的需求相悖，应该是标记不存在时才执行。
2. 未考虑页面加载状态：如果代码在load事件触发后才执行，addEventListener就无法捕获已经触发过的事件，导致追踪代码永远不执行。

修正后的代码如下：

// 检查是否从未访问过该页面
if (!localStorage.getItem('beenHere')) {
    // 先标记已访问，避免页面刷新导致重复执行
    localStorage.setItem('beenHere', '1');

    // 判断页面是否已经加载完成
    if (document.readyState === 'complete') {
        // 页面已加载完成，直接执行追踪逻辑
        fathom.trackGoal('XXX', {{ order.totalPrice * 100 }});
    } else {
        // 页面还在加载中，监听load事件再执行
        window.addEventListener('load', () => {
            fathom.trackGoal('XXX', {{ order.totalPrice * 100 }});
        });
    }
}

补充说明 #

• 提前设置localStorage标记的目的是防止页面在load事件触发前意外刷新，导致重复触发追踪逻辑。
• document.readyState === 'complete'的判断，和load事件触发的时机完全一致，能覆盖代码执行时页面已经加载完成的场景。

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