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

Question

我是 GTM 新手

我是运行以下自定义变量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 时，触发器在 DOM 就绪时触发，因为 1 在 JS 中表示为真。
我已经创建了一个 Google Universal Analytics 的标签，它正在跟踪一个事件并触发，我在第二步和这一步中发送的内容，我已经给出了事件类别、操作和标一个名字。我还制作了版本 2 的数据层变量。prefers-color-scheme

我对 Light 重复了相同的步骤，但不支持，但浏览器似乎卡住了，我不得不关闭浏览器 window。

我做错了什么？

Answer 1

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

您的 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 在技术上可以是您的测试用例的常量 'dark'，但更一般地说，它可以是对 Color Theme:[=18 的查找 table =]

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 变量。

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

Page stop responding while loading custom javascript

javascript

google-tag-manager