Блог

Главная - Вопросы по программированию - Клонирование объектов в Google Optimize

Клонирование объектов в Google Optimize

#javascript #jquery #google-optimize

#javascript #jquery #google-оптимизация

Вопрос:

Я пытаюсь клонировать кнопку в Google Optimize (или любой другой метод javascript / jQuery), которая добавляет товар в корзину покупок. Моя проблема в том, что когда я запускаю код или экспериментирую в Optimize, кнопка не срабатывает.

Вот мои две разные попытки. Метод 1 через интерфейс Optimizes.

  1. Выберите кнопку для копирования, используйте «редактировать код», чтобы получить html.
  2. Используйте Insert HTML a расположение новой кнопки и вставьте код.

Версия 2 использует jQuery clone() ;

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

В чем может быть проблема?
Заранее спасибо!

Комментарии:

1. Вполне вероятно, что HTML-код клонирован, а прослушиватели событий — нет?

2. @evolutionxbox Вполне возможно.. как бы мне клонировать прослушиватели событий?

3. Используйте один делегированный обработчик событий для динамического содержимого или, возможно clone(true, true) , хотя у меня были смешанные результаты с последним.

4. @RoryMcCrossan У меня также были смешанные результаты. Я не могу точно вспомнить, почему и при каких обстоятельствах. Я помню, что это работает не так, как я ожидал.

5. @RoryMcCrossan — не могли бы вы немного уточнить метод clone(true, true). Ценю.

Ответ №1:

Вполне возможно, что ваш эксперимент сработает ДО того, как ваши кнопки загрузятся на вашей странице в вашем реальном браузере.

Вы получаете сообщение об ошибке в консоли?

Мой совет — дождаться загрузки вашей кнопки, прежде чем применять изменения 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
});

Когда я клонировал кнопки в прошлом, я терял всю функциональность клонированной кнопки. Поэтому вам может потребоваться перестроить эту функциональность на клонированной кнопке.