dataLayer.push от одного элемента разрушает dataLayer.push другого

Я создаю сайт WP с использованием темы DIVI. Метка, которая должна быть помещена в dataLayer, застревает где-то со значением по умолчанию «не установлено».

Чтобы подтолкнуть значения, я использовал скрипт:

<script>
    function init() {
        dataLayer.push({'sectionLabel': 'Test section'});
    }
    window.onload = init;
</script>

Вызваны:

<p class="GASectionVisible"> 

Он работает в изолированно, но не на основной сайт.

Теперь самое интересное:

Я реализовал очень похожий тег для переключателей на той же странице — они запускаются только после открытия переключателя, чтобы показать содержимое с классом запуска. Они отлично работают, но я думаю, что они как-то нарушают dataLayer.push из новых элементов - заголовков. Когда я вставил тот же самый код из заголовков в совершенно новую пустую страницу, они правильно запускают и передают информацию и передают значения, как и ожидалось. Когда я вставляю их точную копию на свой сайт, тег все еще срабатывает, но показывает ярлык «не установлен».

Единственный обходной путь, который я нашел, заключался в том, чтобы поместить триггерный элемент и скрипт на отдельную страницу, а затем встроить их на основной сайт через iFrame. Это работает, но я не могу сделать это для всех элементов, которые мне нужно отслеживать.


person Kacper    schedule 04.01.2018    source источник
comment
Добро пожаловать в Stack Overflow! Рассмотрите возможность использования MCVE (Minimal Cполный Vподдающийся проверке Eпример)..   -  person Hille    schedule 04.01.2018
comment
Спасибо, обновил описание. Надеюсь, это лучше.   -  person Kacper    schedule 04.01.2018


Ответы (1)


Проблема, почему он не срабатывает на странице http://www.wro.place/smart-bedroom/, потому что вы переопределяете функцию onload в custom.min.js. Это означает, что приведенный ниже код никогда не сработает, потому что он переопределен.

<script>
  function init() {
    dataLayer.push({'sectionLabel': 'Test section'});
  }
  window.onload = init;
</script>`

Правильный способ сделать это

document.addEventListener('DOMContentLoaded', function () {
    dataLayer.push({'sectionLabel': 'Test section'});
}, false);

ОБНОВЛЕНИЕ На основе обсуждения в комментариях новое решение:

var firedSections = []
window.dataLayer = window.dataLayer || [];
window.addEventListener('scroll', function() { 
    var sections = document.querySelectorAll('.et_pb_section');
    for(i=0;i<sections.length;i++)
    {
        if (firedSections.indexOf(i) == -1 && checkVisible(sections[i])) {
          firedSections.push(i)
          dataLayer.push({'sectionLabel': 'Number '+i});
        }
    }
});


function checkVisible(elm) {
    var rect = elm.getBoundingClientRect();
    var viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight);
    return !(rect.bottom < 0 || rect.top - viewHeight >= 0);
}

Вам нужно добавить этот код только один раз на страницу, и он будет вставлен в слой данных при прокрутке страницы.

person Victor Leontyev    schedule 04.01.2018
comment
Виктор, спасибо за участие! Я использовал ваш код на своей простой тестовой странице. Метка проталкивается, но когда срабатывает тег видимого Раздела 1, он выталкивает ярлык из скрипта Раздела 2, который находится ниже сгиба. Я думаю, что все скрипты запускаются одновременно, и все теги получают значение из последнего сработавшего скрипта (самого нижнего на странице). У вас есть идеи, как это исправить? - person Kacper; 04.01.2018
comment
Да, все теги сработали одновременно. Но как вы хотите его зажечь? Должен ли он запускать тег только тогда, когда раздел появляется на экране во время прокрутки? - person Victor Leontyev; 04.01.2018
comment
В яблочко. Я хочу отслеживать глубину посещения. - person Kacper; 04.01.2018
comment
Я отредактировал свой ответ. Теперь он запускает слой данных, когда вы прокручиваете, и раздел виден на экране. - person Victor Leontyev; 05.01.2018
comment
Спасибо за редактирование Виктор. Я только что проверил это. Обновленный скрипт не проталкивает значение метки, в отличие от предыдущего. Теперь Диспетчер тегов отображает не установлен при срабатывании 1-й секции и секции 1 со 2-й секцией. Я пробовал размещать код как в составе 1-го раздела, так и размещать его в отдельном разделе поверх тестовой страницы. Я работаю над альтернативным решением параллельно с нашим. Я опубликую статус, если у меня получится. - person Kacper; 05.01.2018
comment
Можете ли вы просто установить мой скрипт, и я скажу вам, что не так - person Victor Leontyev; 05.01.2018
comment
Я установил скрипт в шапке сайта, как вы просили, и он сломал верстку. Пожалуйста, примите во внимание, что я хотел бы указать значение пользовательской метки для каждого элемента, а не для Раздела 1,2,3. Кроме того, некоторые элементы не будут разделами, например: в разделе 2 меня скорее интересует, успела ли последняя (wi-fi) реклама появиться на экране, а не только раздел (возможно, пустой, из-за установленной задержки анимации) ) был в окне просмотра. Надеюсь, это имеет смысл. - person Kacper; 05.01.2018
comment
Это сломанный макет, потому что вы ошиблись с тегами html. Пожалуйста, проверьте html своей страницы, и вы найдете проблему. Вы правы, мой код просто отправляет Раздел 1, Раздел 2, Раздел 3 в уровень данных после прокрутки. И это работает только с разделами. Если вы знаете JS, то сможете использовать мой код в качестве отправной точки своего решения и настроить его по своему усмотрению. - person Victor Leontyev; 05.01.2018
comment
Вы правы - я оставил немного остатка в заголовке, и это вызвало проблему с макетом. Виноват. Несмотря на то, что решение не совсем то, к чему я стремился, я искренне ценю, что вы пожертвовали своим временем и талантом моему проекту. Большое спасибо Вик! :) - person Kacper; 05.01.2018