Как отслеживать отправку форм на Ajax в Google Analytics и Яндекс Метрике на примере плагина Simple Secure Contact Form

Расскажу на примере моего плагина Simple Secure Contact Form, как же отслеживать отправку форм на Ajax в Google Analytics и Яндекс Метрике. На самом деле это очень просто. Если ваша форма отправляется с помощью Ajax, то для каждой системы аналитики нужно вызвать в случае успеха определенный метод, например:

1. Для Google Analytics используем метод ga:

ga('send', 'event', gaEventCategory, gaEventAction, gaEventLabel);

где gaEventCategory — категория события, gaEventAction — действие, а gaEventLabel — ярлык (описание) события.
Подробнее об отслеживании событий в Google Analytics.

2. Для Яндекс Метрики — reachGoal:

yaCounterXXXXXXXX.reachGoal(ymTargetName);

где XXXXXXXX — ID счетчика в Яндекс Метрике, а ymTargetName — имя цели.
Предполагается, что для обоих систем код уже включен на странице в соответствии с рекомендациями. Подробнее о настройке целей в Яндекс Метрике.

Естественно, перед тем, как отправлять цели в аналитику, их нужно создать.

1. В Google Analytics нужно войти в аккаунт, открыть счетчик из списка и в меню пройти по цепочке: Администратор -> Управление -> Цели представлений. Там нажать «+Цель» и выбрать тип цели «Собственная», потом «Событие».
2. В Яндекс Метрике примерно также: нужно войти в аккаунт, открыть счетчик, нажать на «Настройка» и во вкладке выбрать «Цели». Потом «Добавить цель» и выбрать «Javascript-событие».

Полностью код из плагина:

		$.ajax({
			type: "post",
			dataType: "json",
			url: myAjax.ajaxurl,
			data: form_data,
			success: function(response){
				$parent.addClass('mode-send');
				$parent.children('.after-send-text').css('display', 'block');
				$buttonSpinner.css('display', 'none');
				if (response != 0) {
					// google analytics
					if (gaEventCategory != '' && gaEventAction != '') {
						ga('send', 'event', gaEventCategory, gaEventAction, gaEventLabel);
					}
					// yandex metrika
					if (ymCounterID != '' && ymTargetName != '') {
						window[yaCounter].reachGoal(ymTargetName);
					}
				}
			}
		});

Такая конструкция:

window[yaCounter].reachGoal(ymTargetName);

нужна только для моего плагина, так как я не знаю, какой будет идентификатор счетчика, мне приходится задавать его через переменную yaCounter. Благодаря этому, при использовании моего плагина не нужно ничего настраивать в JavaScript, достаточно добавить данные из аналитики в настройки виджета.

Как сделать крутой фильтр записей на WordPress с использованием WP_Query, Ajax и template_redirect…

Сейчас я расскажу, как можно сделать крутой фильтр для сайта на WordPress с использованием самых современных технологий 🙂 Для нетерпеливых — демо прямо тут. Код выложен в виде плагина на GitHub. Внимание!!! Код только для ознакомления, хоть это и полноценный плагин, но на рабочем сайте его нельзя использовать без доработок. Демонстрационных данных он также не содержит.

1. Для целей демонстрации я сделал custom post type (CPT) и custom taxonomy (CT) для него. В принципе это необязательно, можно прицепить к любому типу записей, как и к любой таксономии. Хоть к товарам из WooCommerce.

2. Для этого CPT я сделал три мета-поля, значения которых можно редактировать в специально созданном мета боксе, прямо в окне редактирования этой записи. Можно использовать и стандартный функционал работы с мета полями или плагин Advanced Custom Fields — кому как больше нравится. Равно как и использовать стандартные мета-записи. Мне удобнее именно так.

3. Сделал отдельную функцию, использующую WP_Query для вывода списка записей. Стандартный вариант вывода в этом случае неудобен, так как использовать Ajax с ним не очень-то комфортно.

4. Сделал форму выбора параметров, изменения которых отслеживаются с помощью Jquery и передаются через Ajax в плагин. В результате после каждого изменения параметра пользователь видит новый список, отфильтрованный с учетом выбранных параметров.

5. Для вывода страницы используется хук template_redirect и фильтры pre_get_document_title, body_class. В принципе можно создать пустую страницу с нужным адресом в админке и подвесить к ней нужный шаблон, но так намного красивее, а я за красивые решения! 🙂

Этот фильтр я использовал в том или ином виде на ряде проектов, где нужно фильтровать данные по нескольким параметрам. Работает он достаточно быстро, по крайней мере, на проекте с 30 000+ записей и порядка 12-15 параметров фильтра обновление страницы занимало несколько секунд. Конечно, это все работало не на виртуальном хостинге 🙂

Где это применимо? Да практически где угодно. Например, на лендинге с несколькими товарами. Или в каталоге с несколькими десятками тысяч наименований чего угодно. Без проблем такой фильтр прикручивается к WooCommerce.

Есть и ещё один вариант фильтрации, когда под каждый тип товара создается отдельная страница. Такое решение очень удобно для SEO, но его не имеет смысла применять для того же WooCommerce — там это уже есть. А вот для каталога услуг или компаний, к примеру, подходит замечательно.

Обновлено 16.09.2016: исправил несколько багов в скриптах, спасибо Александру!

Редирект на внешний URL на WordPress с подсчетом переходов

Задача: необходимо сделать возможность редиректа на внешний URL с подсчетом переходов по ссылке. Управление ссылками должно быть максимально близким к управлению обычными записями в блоге и использовать стандартный интерфейс. При этом ссылки должны выводиться в общей ленте и ничем внешне не отличаться от остальных записей. URL ссылки желательно скрывать от посетителя до момента перехода по ней.

Как решаем? Можно было бы создать отдельный формат поста, но гораздо проще создать мета-поле для ссылки, которое будет выводиться при редактировании обычной записи в блоге.

Можно было бы ограничиться редиректом на нужный URL сразу после клика по ссылке, но мы сделаем все красиво и покажем посетителю специальную страницу с уведомлением о том, что он переходит на другой сайт. Для этого создадим отдельный шаблон, который мы и подключаем в предыдущем скрипте вместо выполнения функции wp_redirect().

В header’е обязательно прописать строчку c meta refresh внутри тега head, например так:

В принципе это все, свою задачу мы решили. Управление ссылками производится максимально просто, примеры смотрите в моём блоге по тегу wordpress.

Анимированый прелоадер сделан на CSS на базе этой статьи: https://ihatetomatoes.net/create-css3-spinning-preloader/

Загрузка файлов pdf с помощью стандартного WP Media Uploader

Для одного из наших проектов потребовалось загружать файлы в формате pdf и прикреплять их к записям. В принципе, это можно было сделать и абсолютно стандартным путём, безо всяких доработок — но я решил немного облегчить работу контент-менеджеру сайта. Тем более что подобная задача встречается регулярно и эти наработки практически без изменений можно использовать в будущих проектах.

Для начала создадим отдельный meta box для сохранения ссылки на файл pdf:

Для работы WP Media Uploader используем следующий код на JavaScript:

Очень просто и удобно, особенно когда на сайте несколько тысяч медиафайлов и из них несколько десятков в формате pdf.