Google 在 SPA 上优化 JS API

Question

我的 SPA 上的 Google 优化 JS API 有问题，回调仅在页面重新加载时运行但是当前后导航到特定页面时，回调不是运行。场景如下：

1) 我重新加载应用程序并转到我的页面，该页面具有活动 A/B-test: mysite.com/testpage

2) 下面的代码是运行:

gtag('event', 'optimize.callback', {
     name: experimentId,
     callback: useVariant,
});

正在调用

和 useVariant(variantId) 设置正确的 variantId。

3) 我单击或离开该页面，然后 click/navigate 返回我的网站。com/testpage，请注意，这是一个 SPA。

4) gtag() 代码正在被重新调用，但回调 useVariant() 没有被运行.

5) WTF.

6) 如果我使用 CMD+R 重新加载页面（是的，我正在使用 Mac），代码运行s 如第 1 点），一切正常。

我试过以下方法：

一个。使用 google_tag_manager['xxx'].datalayer.reset()

重置数据层

乙。使用未定义的回调重新推送事件 gtag('event', 'optimize.callback', undefined)

C。重置 datalayer = [] manually

D.从数据层中删除 optimize.callback 事件

E.以上任意组合（有时会产生一些有趣的结果）

所以问题在第 5 点：WTF？非常感谢任何suggestions/thoughts。

谢谢！

Answer 1

我终于解决了！以下是修复方法，也许这会对其他人有所帮助。

回调函数有问题useVariant。我已经将它定义为 useVariant(variantId) 显然（感谢 Google 文档对此很清楚，不是）它必须是 useVariant(variantId, experimentId)

因此，通过将回调函数更改为采用两个参数，代码将起作用。

Answer 2

对于 React，您可以在顶级组件的 componentDidMount 和 componentDidUpdate 生命周期方法中实施激活事件，以在组件安装或更新后立即运行实验代码页。

您的代码可能如下所示：

import React from 'react';
export default class App extends React.Component {
    componentDidMount() {
        dataLayer.push({ 'event': 'optimize.activate' });
    }
    componentDidUpdate() {
        dataLayer.push({ 'event': 'optimize.activate' });
    }
    render() {
        // experiment code goes here...
    }
}

SPA tests on Google optimize

Google 在 SPA 上优化 JS API

Google Optimize JS API on SPA

javascript

google-tag-manager

google-optimize