onclick не работает после перехода с HTML на WP

Содержание

Вопрос или проблема
Ответ или решение
Проблема с onclick
Альтернативное решение с использованием addEventListener
Важные детали решения
Заключение

Вопрос или проблема

Я создал новый сайт, используя Divi в WP. Предыдущий HTML-сайт использовал событие onclick и также включал следующий скрипт сразу после открывающего тега. Команда цифрового маркетинга сообщила мне, что после перехода на WP они больше не получали никаких данных. Я пытаюсь разобраться, где я ошибся, так как я новичок в WP. Есть какие-нибудь предложения?

сам onclick:

 <a onclick="goog_report_conversion ('javascript:document.searchform.submit();')"
href="javascript:document.searchform.submit();"  class="btn_reserve">Забронировать сейчас!</a>

JS:

<!-- Код Google для Забронировать сейчас -->
<script type="text/javascript">
  /* <![CDATA[ */
  goog_snippet_vars = function() {
    var w = window;
    w.google_conversion_id = 973012345;
    w.google_conversion_label = "iNr5DMy-uHsQbyT-zwM";
    w.google_remarketing_only = false;
  }
  // НЕ ИЗМЕНЯЙТЕ КОД НИЖЕ.
  goog_report_conversion = function(url) {
    goog_snippet_vars();
    window.google_conversion_format = "3";
    var opt = new Object();
    opt.onload_callback = function() {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  }
  var conv_handler = window['google_trackConversion'];
  if (typeof(conv_handler) == 'function') {
    conv_handler(opt);
  }
}
/* ]]&gt; */
</script> 
<script type="text/javascript"
  src="//www.googleadservices.com/pagead/conversion_async.js">
</script>

Я бы попробовал отделить html от javascript. То есть, не использовать “onclick” в html, а вместо этого использовать addEventListener.

<a href="javascript:document.searchform.submit();"  class="btn_reserve">Забронировать сейчас!</a>

<script>
    document.querySelector('.btn_reserve').addEventListener("click", function(e) {

        // похоже, что эта строка не вернет URL и вместо этого отправит форму. 
        // Я бы дважды это проверил.
        var url = document.searchform.submit(); 

        goog_report_conversion(url);
    });
</script>

Ответ или решение

При переходе с HTML на WordPress может возникнуть множество проблем, связанных как с функциональностью, так и с совместимостью кода. В данном случае речь идет о неработающем обработчике события onclick и о проблемах с получением данных от команды цифрового маркетинга после миграции. Давайте разберем это более детально.

Проблема с onclick

Ваш исходный код с использованием атрибута onclick выглядит следующим образом:

<a onclick="goog_report_conversion ('javascript:document.searchform.submit();')"
href="javascript:document.searchform.submit();" class="btn_reserve">Reserve Now!</a>

При нажатии на ссылку вызывается функция goog_report_conversion, и одновременно происходит попытка отправки формы. Такая реализация может не сработать, особенно в контексте WordPress, из-за следующих причин:

Проблемы с совместимостью JavaScript: Некоторые плагины или темы WordPress могут конфликтовать с пользовательским скриптом, особенно если они изменяют или блокируют JavaScript-код.
Проблемы с событием ‘onclick’: В WordPress лучше использовать метод addEventListener для привязки событий, поскольку он более универсален и снижает риск конфликтов с другими скриптами или стандартными функциями темы.
Стандартная безопасность браузера: Некоторые браузеры могут блокировать выполнение JavaScript-кода, который вызывается напрямую из атрибутов HTML.

Альтернативное решение с использованием addEventListener

Рекомендуется изменить способ обработки кликов, используя addEventListener. Вот как это можно сделать:

<a href="javascript:void(0);" class="btn_reserve">Reserve Now!</a>

<script>
    document.querySelector('.btn_reserve').addEventListener("click", function(e) {
        e.preventDefault(); // предотвращаем переход по ссылке
        document.searchform.submit(); // отправка формы

        goog_report_conversion('javascript:document.searchform.submit();'); // вызов функции отчета
    });
</script>

Важные детали решения

Использование e.preventDefault(): Этот метод предотвращает переход по ссылке сразу же, давая вам возможность сначала выполнить другие действия, такие как вызов функции отчета о конверсии.
Проверка наличия формы: Убедитесь, что форма с именем searchform действительно существует на странице, и ее можно корректно отправить. Возможно, в процессе миграции структура вашего HTML-кода изменилась.
Загрузка скриптов: Убедитесь, что ваш JavaScript код загружается после всех необходимых элементов страницы. В WordPress это можно сделать с помощью хука wp_enqueue_script().

Заключение

Проблемы с обработкой событий и передачей данных после миграции на WordPress могут быть вызваны множеством факторов, включая конфликты JavaScript, изменения в структуре DOM и особенности платформы WordPress. Переход на более безопасный и надежный метод с использованием addEventListener поможет избежать множества потенциальных проблем и обеспечит совместимость с другими компонентами сайта.

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