Условия в Oxygen: как показать/скрыть контент в зависимости от UTM-меток?

Начиная с версии 2.4 в Oxygen появился крутой и мощный функционал "Условия" (Conditions). Подробнее можно посмотреть в официальной документации. Теперь мы можем скрывать или показывать определённый контент сайта в зависимости от выполнения условий. Это может быть полезно, например, для создания скрытого контента только для подписчиков сайта, или создания платных закрытых разделов. Кроме базовых 26-ти условий, мы можем создавать собственные условия при помощи API.

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

Я всё ещё тестирую это, но, кажется, это не плохо работает. И так, рассказываю, как это сделать пошагово.

Шаг 1

Установите плагин "Сниппеты" (Code Snippets), если он у вас ещё не установлен. Нам потребуется добавить небольшой php-код для регистрации собственных условий.

Шаг 2

Создайте новый сниппет "Сниппеты > Добавить новый" (например, я назвал его "Тестирование UTM-меток", но вы можете присвоить ему любое необходимое имя). В поле сниппета вставьте следующий код и сохраните изменения:

if( function_exists('oxygen_vsb_register_condition') ) {
	
	oxygen_vsb_register_condition('UTM source', array('options' => array(), 'custom' => true), array('=='), 'utm_source_callback', 'UTM');
	function utm_source_callback($value, $operator) {
		if (isset($_GET['utm_source'])){
    		$utm_source = $_GET['utm_source'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_source", $utm_source, $expire);
			return oxy_condition_eval_int($utm_source, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM medium', array('options' => array(), 'custom' => true), array('=='), 'utm_medium_callback', 'UTM');
	function utm_medium_callback($value, $operator) {
		if (isset($_GET['utm_medium'])){
    		$utm_medium = $_GET['utm_medium'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_medium", $utm_medium, $expire);
			return oxy_condition_eval_string ($utm_medium, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM campaign', array('options' => array(), 'custom' => true), array('=='), 'utm_campaign_callback', 'UTM');
	function utm_campaign_callback($value, $operator) {
		if (isset($_GET['utm_campaign'])){
    		$utm_campaign = $_GET['utm_campaign'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_campaign", $utm_campaign, $expire);
			return oxy_condition_eval_string ($utm_campaign, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM content', array('options' => array(), 'custom' => true), array('=='), 'utm_content_callback', 'UTM');
	function utm_content_callback($value, $operator) {
		if (isset($_GET['utm_content'])){
    		$utm_content = $_GET['utm_content'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_content", $utm_content, $expire);
			return oxy_condition_eval_string ($utm_content, $value, $operator);
		}
	}
	
	oxygen_vsb_register_condition('UTM term', array('options' => array(), 'custom' => true), array('=='), 'utm_term_callback', 'UTM');
	function utm_term_callback($value, $operator) {
		if (isset($_GET['utm_term'])){
    		$utm_term = $_GET['utm_term'];
    		$expire=time()+60*60*24*5;
    		setcookie("utm_term", $utm_term, $expire);
			return oxy_condition_eval_string ($utm_term, $value, $operator);
		}
	}

}

В данном примере я установил время жизни куки 5 дней. Это значит, что когда пользователь впервые перейдёт по ссылке с UTM-меткой, то после повторного посещения страницы условия по прежнему будут срабатывать, пока не пройдёт 5 дней, или пока он не очистит куки в своём браузере. Если вам требуется установить куки на более длительный или короткий срок, то в каждой строке $expire=time()+60*60*24*5; замените 5 на требуемое вам значение (в днях). Запоминать куки или нет, мы дополнительно настроим на следующем шаге.

Шаг 3

После регистрации условий на втором шаге, в списке условий в редакторе Oxygen, у нас должны появиться новые условия: UTM source, UTM medium, UTM campaign , UTM content и UTM term. Далее нам потребуется настроить условия скрытия/показа блока с контентом в зависимости от наших условий.

Предположим, что нам нужно отследить источник перехода (метка utm_source) из рекламы Гугл. Наша ссылка с UTM-хвостом может иметь такой вид: https://oxywp.com/uslovija-v-oxygen-kak-pokazat-skryt-kontent-v-zavisimosti-ot-utm-metok/?utm_source=google&utm_medium=cpc&utm_campaign={network}&utm_content={creative}&utm_term={keyword}

Теперь нам нужно создать условие, если источником перехода является Гугл, то показать на странице специальный блок, который изначально скрыт.

Вариант 1: не учитываем куки

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

Создадим для нашего блока условие, выбрав из списка UTM source и вписав слово, равное значению метки google.

Настройка условий Oxygen в зависимости от UTM-меток без учета куки

Сохраням результат и проверяем.

Таким образом мы можем отслеживать значение любой из UTM-меток (не только utm_source).

Вариант 2: учитываем куки

В этом случае блок будет показан при первом посещении ссылки с UTM-меткой. Если обновить страницу, или посетить страницу без UTM-хвоста, блок всё равно будет показан пользователю, на протяжение всего срока жизни куки (в нашем примере это 5 дней, либо пока пользователь сам не очистит куки).

Для этого нам обязательно потребуется изменить тип условий на OR ("ИЛИ") и добавить дополнительное стандартное условие Cookie List, в котором нужно указать значение, соответствующее значению нашей UTM-метки:

Добавление условия "ИЛИ" в Oxygen
Настройка условий в Oxygen с учетом utm-меток и куки

Теперь блок будет показан только в том случае, если url содержит метку google ИЛИ куки содержит слово google.

На этом всё. Надеюсь, что данная статья оказалась для вас полезной.

Демо пример:

Перейдите по ссылке с UTM-меткой и на этом месте будет показан другой блок: перейти ссылке
В этой статье я показал лишь простейший пример, на сколько хватило моей фантазии. Если у вас другая задача, есть вопросы или пожеления, то напишите свой комментарий ниже.
Следите за выходом новых советов и уроков:
arrow-up