加载自定义 javascript 时页面停止响应

Question

我是 GTM 新手

1. 我正在一个变量中运行以下自定义 javascript。

function(){
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
    let data = dataLayer.push({'event':'prefers-color-scheme','prefers-color-scheme':'dark'});
      return data;
    }
}

1. 我创建了一个触发器，当条件设置为 1 时，在 DOM Ready 上触发，因为 1 在 JS 中表示 true。

2. 我创建了一个 Google Universal Analytics 标记，它跟踪事件并触发我在第二步中发送的内容，在这一步中，我为事件类别、操作和标签命名。 我还制作了版本 2 的数据层变量。prefers-color-scheme

我对 Light 重复了相同的步骤，但不受支持，但浏览器似乎卡住了，我必须关闭浏览器窗口。

我做错了什么？

Answer 1

您通过在自定义 javascript 变量定义中推送到 dataLayer 创建了一个无限循环的事件；每当将新数据推送到 dataLayer 时，都会分析一个变量。

您的 Color Theme 变量应该是：

function() {
    if (window.matchMedia("(prefers-color-scheme: no-preference)").matches) {        
      return 2;
    }
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {        
      return 1;
    }
    return 0;
}

那么prefers-color-scheme 在技术上可能是您的测试用例的一个恒定“黑暗”，但更一般地说，它可能是Color Theme 上的查找表：

Lookup on {{Color Theme}}
  2 no-preference
  1 dark
  0 light

或者通过返回所需的显示名称，它可以是一个独立的自定义变量：

function() {
    if (window.matchMedia("(prefers-color-scheme: no-preference)").matches) {        
      return "no-preference";
    }
    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {        
      return "dark";
    }
    return "light";
}

允许您根据需要限制prefers-color-scheme 上的触发并将其用作事件标签的操作，从而从触发规则中排除Theme 变量。