加载自定义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;
    }
}

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

3. 我已经创建了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";
}

Theme通过限制触发范围prefers-color-scheme并将其用作事件代码的“动作”，允许您从触发规则中排除变量。