在单页应用程序 (SPA) 上使用 Google 跟踪代码管理器 (GTM) 自定义事件显示和隐藏 JavaScript 片段？
Show and hide a JavaScript snippet using a Google Tag Manager (GTM) custom event on a single page application (SPA)?
我正在尝试在我的单页应用程序 (SPA) 上设置 Google 跟踪代码管理器 (GTM)。
我正在为每个页面视图推送自定义数据层事件，如下所示：
window.dataLayer.push({
event: 'customPageView',
path: path,
pageUrl: window.location.href,
pageTitle: document.title,
pageReferrer: pageReferrer,
requiresAuth: requiresAuth,
cid: getCid(),
});
我正在使用 requiresAuth 值有条件地显示来自 Zoho Desk 的 JavaScript 片段。当 Zoho Desk JavaScript 片段出现时，它应该在页面上显示一个浮动的帮助图标供用户交互。
我只想在 requiresAuth = true 的内部页面上加载代码段。所有登录页面都有 requiresAuth = false，我不希望该代码段加载到那里。
在 GTM 内部，我有一个标签，当 customPageView 事件有 requiresAuth = true 时触发。这是触发器的屏幕截图：
第一次访问该应用程序时，它似乎运行良好。
登录页面不显示浮动的 Zoho Desk 图标，因为在该页面上 requiresAuth = false。
登录后会出现浮动的 Zoho Desk 图标，因为所有这些页面都有 requiresAuth = true。
但随后我注销并被重定向回登录页面，Zoho Desk 图标仍然显示。它不会消失，直到我刷新页面。
它应该在我被重定向到登录页面后立即消失，因为它有 requiresAuth = false.
我该如何解决这个问题？
使用 GTM 预览功能进行调试时，一切看起来都正确 - 但它仍然不起作用。
首次访问登录页面上的 Zoho Desk 标签：
内部页面访问中的 Zoho Desk 标签：
我注销后登录页面上的 Zoho Desk 标签：
正如您从上面的屏幕截图中看到的那样，代码正在触发并且未正确触发。然而，我在注销后仍然可以看到 Zoho Desk 图标（除非我刷新页面，然后它会正确消失）。
我假设您的授权页面也是 SPA 的一部分，因此没有实际的页面重新加载 before/after 授权。在这种情况下，Zoho Desk Script/Icon 在首次被“自定义页面视图 - requiresAuth = true”触发后将保持加载状态，即使标签不再触发也是如此。
如果您只关心视觉方面，我建议创建一个新标签，它会自动隐藏 requiresAuth = false 页面上的图标。
1. HTML - Zoho Desk - Load/Show
标签逻辑： 检查 Zoho Desk 图标元素是否已经存在（又名脚本已经加载），如果是：确保它可见（例如 style.display = "block"） ，如果没有：加载脚本
触发器： 自定义页面视图 - requiresAuth = true
2。 HTML - Zoho Desk - 隐藏
标签逻辑：检查 Zoho Desk 图标元素是否存在（又名脚本已加载），如果是：隐藏它（例如 style.display = "none"）
触发器： 自定义页面视图 - requiresAuth = false
我正在尝试在我的单页应用程序 (SPA) 上设置 Google 跟踪代码管理器 (GTM)。
我正在为每个页面视图推送自定义数据层事件，如下所示：
window.dataLayer.push({
event: 'customPageView',
path: path,
pageUrl: window.location.href,
pageTitle: document.title,
pageReferrer: pageReferrer,
requiresAuth: requiresAuth,
cid: getCid(),
});
我正在使用 requiresAuth 值有条件地显示来自 Zoho Desk 的 JavaScript 片段。当 Zoho Desk JavaScript 片段出现时，它应该在页面上显示一个浮动的帮助图标供用户交互。
我只想在 requiresAuth = true 的内部页面上加载代码段。所有登录页面都有 requiresAuth = false，我不希望该代码段加载到那里。
在 GTM 内部，我有一个标签，当 customPageView 事件有 requiresAuth = true 时触发。这是触发器的屏幕截图：
第一次访问该应用程序时，它似乎运行良好。
登录页面不显示浮动的 Zoho Desk 图标，因为在该页面上 requiresAuth = false。
登录后会出现浮动的 Zoho Desk 图标，因为所有这些页面都有 requiresAuth = true。
但随后我注销并被重定向回登录页面，Zoho Desk 图标仍然显示。它不会消失，直到我刷新页面。
它应该在我被重定向到登录页面后立即消失，因为它有 requiresAuth = false.
我该如何解决这个问题？
使用 GTM 预览功能进行调试时，一切看起来都正确 - 但它仍然不起作用。
首次访问登录页面上的 Zoho Desk 标签：
内部页面访问中的 Zoho Desk 标签：
我注销后登录页面上的 Zoho Desk 标签：
正如您从上面的屏幕截图中看到的那样，代码正在触发并且未正确触发。然而，我在注销后仍然可以看到 Zoho Desk 图标（除非我刷新页面，然后它会正确消失）。
我假设您的授权页面也是 SPA 的一部分，因此没有实际的页面重新加载 before/after 授权。在这种情况下，Zoho Desk Script/Icon 在首次被“自定义页面视图 - requiresAuth = true”触发后将保持加载状态，即使标签不再触发也是如此。
如果您只关心视觉方面，我建议创建一个新标签，它会自动隐藏 requiresAuth = false 页面上的图标。
1. HTML - Zoho Desk - Load/Show
标签逻辑： 检查 Zoho Desk 图标元素是否已经存在（又名脚本已经加载），如果是：确保它可见（例如 style.display = "block"） ，如果没有：加载脚本
触发器： 自定义页面视图 - requiresAuth = true
2。 HTML - Zoho Desk - 隐藏
标签逻辑：检查 Zoho Desk 图标元素是否存在（又名脚本已加载），如果是：隐藏它（例如 style.display = "none"）
触发器： 自定义页面视图 - requiresAuth = false