В отличии от классической установки Google Analytics в WordPress интеграция Tag Manager от Гугла является чуть более сложной процедурой. Он, как я понимаю, используется для более комплексного отслеживания конверсий и подобных вещей. Вам нужно внедрить определенный код в зависимости от срабатывания тех или иных событий: добавления товара в корзину, перехода к оплате, совершения заказа и т.д. Реализуется это с помощью Javascript и некоторых особенностей Woocommerce.
Перед тем, как перейти к примерам, небольшой дисклеймер. Данный пост – это сборка найденных решений в ходе изучения вопроса, но не все из них я пробовал на практике. К сожалению, тестировать и вникать в них целый день не было времени. Вы и сами видите, что публикации в блоге стали выходить немного реже.
Возможно, какая-то из этих “находок” вам как раз пригодится. Они в любом случае перекликаются с сегодняшней темой статьи, поэтому я захотел сохранить ссылки на эти материалы в том числе и для себя.
Список решений:
- Выполнение jQuery для вариаций товаров (ссылка на другой пост).
- Событие added_to_cart при добавлении в корзину.
- Обычный Javascript для кнопки купить (альтернатива предыдущему варианту).
- Хук woocommerce_add_to_cart.
- Обработка события при оформлении заказа через хук woocommerce_thankyou.
- JS-валидация до создания заказа.
- Разные Javascript триггеры для Woocommerce.
Событие added_to_cart при добавлении в корзину
Собственно, с этого сниппета и началось мое изучение данного вопроса. Вот какой код предлагает нам автор:
add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
if ( is_shop() || is_product_category() || is_product_tag() ): // Only for archives pages
?>
<script type="text/javascript">
// Ready state
(function($){
$( document.body ).on( 'added_to_cart', function(){
console.log('EVENT: added_to_cart');
});
})(jQuery); // "jQuery" Working with WP (added the $ alias as argument)
</script>
<?php
endif;
} |
Здесь вы можете видеть хук добавления jQuery кода в футер. Обратите внимание, что в функции имеется условный оператор Woocommerce для ее интеграции только на архивных страницах (без единичной записи!).
Суть метода в использовании триггера added_to_cart, который запускается после клика пользователя по кнопке «Купить».
Основной минус решения в том, что у меня оно попросту не сработало. Возможно, проблема в том, что на сайте-примере был настроен автоматический переход на страницу корзины сразу после заказа, и в таком случае триггер не успевает сработать. Но это только догадка, вникать не было времени.
Обычный Javascript для кнопки купить
Я выбрал этот способ, т.к все отлично и без проблем работает. В коде будет 2 варианта внедрения скрипта, чуть ниже объясню чем они отличаются.
add_action('wp_footer','custom_jquery_add_to_cart_script');
function custom_jquery_add_to_cart_script(){
if ( is_shop() || is_product_category() || is_product_tag() ):
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.add_to_cart_button').click(function(){
// alert("category add");
// ваш_код
});
});
</script>
<?php
endif;
if ( is_product() ):
?>
<script type="text/javascript">
jQuery(document).ready(function($){
$('.single_add_to_cart_button').on('click', function() {
// alert("single add");
// ваш_код
});
});
</script>
<?php
endif;
} |
И там, и там, мы обрабатываем событие нажатия на кнопку добавления в корзину. Обратите внимание, что на разных страницах у них разные классы — add_to_cart_button и single_add_to_cart_button (у вас могут быть другие).
Так вот второй вариант лучше, поскольку он позволяет в одной функции “привязать” несколько событий к нескольким элементам, а не плодить новые функции. Не знаю с чем это связано, но работает именно так.
Хук woocommerce_add_to_cart
Здесь, в принципе, информации не особо много. Применить метод можете следующим образом.
Очевидно, что он создавался не для JS-событий аналитики, а просто позволяет решать какие-то задачи, связанные с магазином/каталогом товаров.
Опять же тут есть важный момент по редиректу в корзину, если вы все же хотите работать с Javascript-событиям (информация может не отобразится, т.к. сразу будет выполняться перенаправление пользователя).
Событие при оформлении заказа через хук woocommerce_thankyou
Насколько я понимаю, хук woocommerce_thankyou выполняется при появлении страницы “Спасибо вашу покупку”. А по логике работы магазина она отобразится только после успешного совершения заказа, поэтому нам подходит.
Дальше — больше.
JavaScript-валидация до создания заказа
Методика немного отличается от того, что мне вообще сегодня нужно было сделать, но может оказаться полезной в другой ситуации. Здесь вы «вклиниваетесь» в процесс заказа, после успешной валидации всех полей, но до фактического его совершения.
Зачем это нужно? – добавить свои какие-то кастомные проверки и манипуляции. Тут найдено 2 примера реализации, но подход у них одинаковый и состоит из 3х шагов.
- Hooking After Validation but Before Order Create in Woocommerce Checkout.
- Hooking into WooCommerce’s checkout JS events.
По второй ссылке сделаю скриншот на всякий случай, если вдруг сайт-источник перестанет существовать.
Разные Javascript триггеры для Woocommerce
В этой теме около 20-ти триггеров плагина, срабатывающих в тех или иных ситуациях. Здесь используется такая же методика, как и в первом примере. Общая конструкция выглядит так:
То есть реальный код будет похож на этот:
Все триггеры:
JS для страницы оплаты:
События для корзины (cart):
Единичная страница товара:
События при добавлении в корзину:
JS метод оплаты:
Надеюсь, информация будет вам полезна. Если есть что добавить про Javascript-событиям, пишите в комментариях.