自定义 JavaScript 使用动态数据

Question

我正在尝试使用 GTM 在我们的网站上设置电子商务活动。我正在尝试使用自定义 JavaScript 设置自定义值，但它不断显示 undefined

首先，我在我们的网站上找到了数据脚本

<script id="__NEXT_DATA__" type="application/json">

然后我编写自定义 javascript 代码，如下所示

function() {
  var productInfo = [{
    'id':window.__NEXT_DATA__.props.pageProps.program.products[0].id,
    'name':window.__NEXT_DATA__.props.pageProps.program.products[0].name,
    'price':window.__NEXT_DATA__.props.pageProps.program.products[0].price,
    'category':'exhibition'
  }];

  return productInfo;
}

我们的网站是用next.js开发的，难道不能在自定义JavaScript中使用脚本数据（？）？

Answer 1

据我了解，__NEXT_DATA__ 是异步加载的。取决于您如何设置 GTM。您可能运行陷入竞争状态，其中 GTM 脚本运行使用您的自定义 JavaScript 函数，而 Next.js 正在加载数据。

我认为更好的方法是：

在 GTM 中设置一个监听自定义事件的触发器。
在GTM中设置一个Tag，由我们刚刚设置的触发器触发。
在您的 Next.js 应用中，当您的应用准备就绪时发送自定义事件。我建议运行在 useEffect 钩子中设置逻辑。
如果设置正确，您将在您的应用加载后运行您的自定义 JavaScript，这可以解决竞争条件。

自定义 JavaScript 使用动态数据

Custom JavaScript using dynamic data

javascript

google-tag-manager

next.js