加載自定義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";
}

通過根據需要限制對prefers-color-scheme觸發並將其用作事件標簽的Action，可以從觸發規則中排除Theme變量。