angular - 如何使用具有单个 URL 的 SPA 的 Google Optimize 可视化编辑器？

Question

我是 Google Optimize 的新手，开始使用该工具时我面临着挑战！

我想在使用 Angular 开发的单个网页上运行 Google Optimize。

实际上，我的网站是 5 个不同屏幕（1、2、3、4、5）的 1 个唯一 URL (x)。所以在谷歌优化中，我输入了我唯一的网址，然后我使用可视化编辑器来拉动我的网页。

问题是该工具只允许我更改 URL 的第一个屏幕的元素...这意味着我无法为屏幕 x2、x3、x4、x5 创建变体；我该怎么做？

显然，当我想添加一个变体时，我只能定位我拥有的一个 URL。对于页面定位部分，我没有找到对我的情况有用的 URL、路径、主机或片段。

完成概述：我已经使用数据层实现了虚拟综合浏览量，以使用 GTM 收集数据并跟踪 GA 中的流量。

谢谢您的帮助 ：-）

Answer 1

您可以 data.Layer 在附加屏幕上推送事件并使用此事件来激活更改。

请参阅此处的资源https://support.google.com/optimize/answer/7008840?hl=en

要编辑应用程序，请单击交互模式（完成左侧）并与您的应用程序交互，一旦您在屏幕上切换回编辑模式。

更新：

在 GTM 中添加自定义事件的作用是告诉 GTM 侦听事件并将其添加以激活变体更改所做的是告诉优化您对该事件的侦听，但您仍然需要将事件推送到数据层，否则它不会触发。当元素出现时，将以下代码添加到您的应用程序中：

dataLayer.push({'event': 'validarPreguntas'});

或者，使用以下代码创建自定义 HTML 标记，并添加该表单部分何时可见的触发器：

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
 'event': 'validarPreguntas'
 });
</script