在 Google Optimize 中克隆对象

问题描述

我正在尝试在 Google Optimize（或任何其他 javascript/jQuery 方法）中克隆一个按钮，该按钮将项目添加到购物车中。我的问题是，当我在 Optimize 中运行代码或实验时，按钮没有触发。

这是我的两种不同尝试。方法一，通过Optimizes的界面。

1. 选择要复制的按钮，使用“编辑代码”获取 html。
2. 使用 Insert HTML 插入新按钮的位置，并插入代码。

版本 2 使用 jQuery 的 clone();

$('#SOME-ID > PATH TO THE ELEMENT TO CLONE').clone().attr('id','ADD-ID-FOR-GTM-TRACKING').appendTo('#proPriceMobile');

可能是什么问题？ 提前致谢！

解决方法

很有可能，您的实验在您的实际浏览器中在按钮加载到您的页面之前触发。

您是否在控制台中收到错误消息？

我的建议是在应用 DOM 更改之前等待您的按钮加载。如果可能，请通过 JavaScript 完成这一切。

例如，在这里您可以通过使用回调和 setTimeout() 等待元素加载：

// FUNCTION WHICH WAITS FOR YOUR INITAL BUTTON to LOAD
function waitForElement(className,callBack){
    window.setTimeout(function(){
        // GRAB YOUR ELEMENT
        var element = document.querySelectorAll(className)[0];
        if(element) {
            callBack(className,element);
            console.log("Callback successfully fired and code executed...")
            
        } else {
            waitForElement(className,callBack);
            console.log("This runs every second until your element is loaded on the page..")
        }
    },1000)
};

// EXECUTE THE CODE IN THIS FUNCTION,WHEN YOUR BUTTON LOADS IN THE DOM
waitForElement(".your-element-classname",function(){
    console.log("Button has loaded in DOM...");
    // NOW CLONE YOUR BUTTON
});

当我过去克隆按钮时，我已经失去了克隆按钮的所有功能。因此，您可能需要在克隆的按钮上重建该功能。