Отслеживание целей кнопок и форм в Elementor

Отследить нажатие на кнопки и отправку форм, сделанных при помощи Elementor, в Google Analytics или Яндекс Метрике можно с помощью простых сниппетов.

Причины

Заметка создана в качестве дополнения к видеозаписи «Отслеживание нажатия кнопок и заполнения форм Elementor в Google Analytics и Яндекс Метрика» от Александра Парфилова по двум причинам.

Во-первых, код передачи целей Яндекс Метрики изменился и не совсем соответствует тому, что приведён на видео.

Во-вторых не у всех нас сайтах есть или правильно подключена библиотека jQuery.

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

Поэтому приведу также сниппет на чистом коде (ванильном JavaScript).

Сниппеты

Сниппеты — это маленькие кусочки JavaScript кода, которые вам необходимо скопировать, обернуть в теги <script> и </script> и вставить на ваш сайт.

На jQuery

Этот сниппет должен быть в футере сайта как можно ниже, после подключения бибилиотеки jQuery:

jQuery(
	function( $ ) {
		$( '#email-button' ).on(
			'click',
			function() {
				ga( 'send', 'event', 'button', 'click', 'Email' );
				ym( 'XXXXXX', 'reachGoal', 'header-email' );
			}
		);

		$( '#contact-form' ).on(
			'submit_success',
			function(){
				ga( 'send', 'event', 'Lead', 'Submit', 'Contact' );
				ym( 'XXXXXX', 'reachGoal', 'contact-form' );
			}
		);
	}
);

На «ванильном» JavaScript

Этот сниппет также должен быть в футере сайта как можно ниже:

var ready = ( callback ) => {
	if ( 'loading' !== document.readyState ) {
		callback();
	} else {
		document.addEventListener( 'DOMContentLoaded', callback );
	}
};

ready( () => {

	document.querySelector( '#email-button' ).addEventListener( 'click', ( e ) => {
		ga( 'send', 'event', 'button', 'click', 'Email' );
		ym( 'XXXXXX', 'reachGoal', 'header-email' );
	} );

	document.querySelector( '#contact-form' ).addEventListener( 'submit_success', ( e ) => {
		ga( 'send', 'event', 'Lead', 'Submit', 'Contact' );
		ym( 'XXXXXX', 'reachGoal', 'contact-form' );
	} );		
} );

Как добавить сниппеты

Для добавления сниппетов на сайт без знания кода можно использовать либо плагин Code Snippets Extended (он не обновлялся пару лет), который рекомендует Александр в своём видео, либо плагин LuckyWP Scripts Control, который рекомендую лично я.

Если вы разбираетесь в коде и не хотите ставить лишние плагины, то сниппеты можно добавить при помощи функции wp_add_inline_script() для примера с jQuery или на хуке wp_footer для примера без jQuery внутри functions.php вашей активной темы (дочерней темы) или внутри mu-plugins.

На jQuery

add_action(
    'wp_enqueue_scripts',
    function() {
        // Добавляем сниппет как зависимость от jQuery.
        wp_add_inline_script( 'jquery', 'тут ваш сниппет' );
    }
);

На «ванильном» JavaScript

add_action(
    'wp_footer',
    function() {
        // Добавляем сниппет в вйтер сайта.
        ?>
        тут ваш сниппет
        <?php
    }
);

Проверка целей

Для проверки правильности отправки целей в Яндекс Метрику можно использовать специальный режим отладки.

Чтобы его активировать, добавьте в конце адреса проверяемой страницы параметр _ym_debug=1.

Откройте косноль Google Chrome комбинацией клавиш Ctrl + Shift + J (на маках ⌥ + ⌘ + J) и смотрите, что передаётся в метрику при клике на кнопки и отправку форм.

Обратите внимание на опцию Не учитывать мои визиты (Настройка → Фильтры) в Яндекс Метрике. Если она включена, выполняйте предыдущие шаги в приватном режиме браузера (инкогнито).

Для проверки правильности отправки целей в Google Analytics можно использовать специальное расширение Google Analytics Debugger под Google Chrome.

Результат его работы также можно наблюдать в консоли браузера.

Ссылки

• Отслеживание целей кнопок и форм Elementor в Google Analytics и Яндекс Метрике
• Cheat sheet for moving from jQuery to vanilla JavaScript

Elementor Google Analytics JavaScript PHP Яндекс.Метрика