更新 document.cookie 更新所有 cookie onclick 而不仅仅是一个

Question

我正在创建一个 chrome 扩展程序，在我的应用程序中，我希望能够通过单击按钮来更新 Google Optimize cookie。

到目前为止，我正在使用来自window.gaData["UA-MY-ID"].experiments 的数据项，如下所示：

window.gaData["UA-MY-ID"].experiments = {
  2kgkOYLpTiWA36wf-_Ir7Q: "0"
  JVEtsVqdQm-lZPxXQUzdQw: "0"
}

相同范围的数字/字母代表变体 ID 以及 cookie ID。 相关的 cookie 看起来像这样，尤其是我需要操作的 cookie，以 _gaexp 开头：

window.document.cookie "_ga=GA1.3.1001449090.1593816402; _gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.0!JVEtsVqdQm-lZPxXQUzdQw.18539.0; _gid=GA1.3.246809878.1594039125; _ga=GA1.3.1001449090.1593816402"

打破这一点，我需要更新以下内容，（但仅当我点击相应的按钮/ID 时）：

_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.0!JVEtsVqdQm-lZPxXQUzdQw.18539.0;

收件人：

_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.1!JVEtsVqdQm-lZPxXQUzdQw.18539.1;

然后我将遍历这些数据并在 DOM 中显示它们。这是一个例子：

<div class="variant-0-container" id="variant-0-container">
      <div class="CRO-variant-result">
        <p>Experiment ID: 2kgkOYLpTiWA36wf-_Ir7Q </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;2kgkOYLpTiWA36wf-_Ir7Q&quot;)" id="2kgkOYLpTiWA36wf-_Ir7Q">Switch variant</button>
      </div>
      
      <div class="CRO-variant-result">
        <p>Experiment ID: JVEtsVqdQm-lZPxXQUzdQw </p>
        <p>Variant Active: 0</p>
        <button onclick="buttonClick(&quot;JVEtsVqdQm-lZPxXQUzdQw&quot;)" id="JVEtsVqdQm-lZPxXQUzdQw">Switch variant</button>
      </div>
      </div>

我想做的事：

当我点击任何按钮时，我想更新我的 cookie 并将我的变体从 0 更改为 1。但仅在单击特定按钮时。

我的问题是：

当我单击一个按钮时，所有 cookie 都会同时更新为 1。但我只想要我点击的特定按钮来更新特定的 cookie。

所以最终结果应该是这样的，如果我只点击对应的按钮，对应的ID：

gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.1!JVEtsVqdQm-lZPxXQUzdQw.18539.0

这是我的特定 JavaScript 代码....我做错了什么？

• 我正在循环访问我的 window.gadata 对象。

• 将正确的变体 ID/cookie ID 附加到按钮。

• 然后我有一个 onClick 函数buttonClick，

• 使用模板文字，将点击的${key} 值传递到

  window.document.cookie 声明删除和添加/覆盖 cookie。

  Object.keys(window.gaData["UA-MY-ID"].experiments).forEach(function(key, index){
    var value = window.gaData["UA-MY-ID"].experiments[key];
  
    if (value === "0") {
      console.log('key, value: ', key, value, index);
  
      result += `
      <div class="CRO-variant-result">
        <p>Experiment ID: ${key} </p>
        <p>Variant Active: ${value}</p>
        <button onclick="buttonClick(${JSON.stringify(key).split('"').join("&quot;")})" id=${key}>Switch variant</button>
      </div>
      `
      document.getElementById('variant-0-container').innerHTML = result;
    }
  });
  
  buttonClick = (key) => {
    console.log('clicked!')
    console.log('key', key);
    // Delete
    window.document.cookie = `_gaexp=GAX1.3.${key}.18539.0; expires=Thu, 01 Jan 2021 20:47:11 UTC; path=/; domain=.MYWEBSITE.co.uk`
    // Add
    window.document.cookie = `_gaexp=GAX1.3.${key}.18539.1; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/; domain=.MYWEBSITE.co.uk`
    window.location.reload();
  }
  

但这似乎会更新所有 cookie。而不是通过 onClick/${key} 专门针对的那个。

谢谢！！！

Answer 1

所有实验都存储在单个 cookie 中，键为 _gaexp，它们在值中连接，以 ! 分隔：

//            |        experiment A          |        experiment B          |
"_gaexp=GAX1.3.2kgkOYLpTiWA36wf-_Ir7Q.18539.1!JVEtsVqdQm-lZPxXQUzdQw.18539.0"

现在，您正在用一个实验覆盖整个值，而丢失其他实验。也许您可以使用window.gaData 作为源再次构建完整的字符串？

据我了解，这应该可行：

const container   = document.getElementById('variant-0-container'),
      experiments = window.gaData["UA-MY-ID"].experiments;

container.innerHTML = Object.entries(experiments)
  .filter(([key, value]) => value == 0)
  .map(([key, value]) => `
    <div class="CRO-variant-result">
      <p>Experiment ID: ${key} </p>
      <p>Variant Active: ${value}</p>
      <button class="switch-btn" id="${key}">Switch variant</button>
    </div>
  `)
  .join('');

container.querySelectorAll('.switch-btn').forEach(btn => {
  btn.addEventListener('click', () => buttonClick(btn.id));
});

function buttonClick(key) {
  const str = Object.entries(experiments)
    .map(([k, v]) => `${k}.18539.${k === key ? 1 : v}`)
    .join('!');

  const now = new Date();
  const expireTime = now.getTime() + 1000 * 60 * 60 * 24 * 365; // 1 year?
  now.setTime(expireTime);

  window.document.cookie = `_gaexp=GAX1.3.${str}; expires=${now.toGMTString()}; path=/; domain=.MYWEBSITE.co.uk`
  window.location.reload();
}