在 Google 优化中插入动态 onClick 事件脚本

Question

我需要通过 Google 优化实验添加一个 html 元素、一个按钮，它必须根据实验执行特定脚本。

我尝试过以下方法：

<button id="my-button">Show</button>


var script = document.createElement('script');
var inlineScript;
script.appendChild(inlineScript); 
element.appendChild(script);

inlineScript变量的内容：

1.
    'document.createTextNode('document.addEventListener("click",function(e){ if(e.target && e.target.id== "my-button"){ console.log("test"); } }); );');'


2.
    'document.createTextNode('var myButtonElement = document.getElementById(
    "my-button");
    myButtonElement.addEventListener("click", function()
    { console.log("test");});')'

但是这两种方法都不起作用。当我从后端硬编码代码时，它工作正常，但需要通过优化动态添加。是否有另一种方法可以将动态 html 脚本添加到 html?

Answer 1

有一种方法可以单独使用 Google 优化工具来完成此操作，但我无法这样做。

为了解决这个问题，我在CMS工具中定义了一个函数和一个变量，设置在head中，然后在优化中我做了以下操作：

带有 myFunction 的按钮
附加到元素的脚本，用于为变量设置我需要的值：

var script = document.createElement('script');
var inlineScript = document.createTextNode("myValue= '123'");
element.appendChild(script);

在 Google 优化中插入动态 onClick 事件脚本

Insert dynamic onClick event script in Google Optimize

html

javascript

dynamic-script-loading

dynamic-html

google-optimize