/ Адаптивность / Multi-page landing

Multi-page landing

HIT

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

Мультилендинг в виде страниц

Самый простой и быстрый способ создать мультилендинг в wordpress — завести несколько шаблонов страниц с разной конфигурацией блоков. Например первый блок у каждого шаблона отличается, остальные одинаковые (при этом все блоки подключены функцией get_template_part( ‘ ‘ );).

Мультилендинг по запросу хэша

Более продвинутый, но вместе с этим более сложный способ создания изменяемых элементов — парсинг URL. Специальным скриптом мы отлавливаем хэш в URL и в зависимости от этого динамически меняем содержание некоторых элементов средствами jQuery. Данный способ очень надуманный — не советую его применять. но упомянуть следует как альтернативный.

Мультилендинг по запросу UTM-метки

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

Скрипт отслеживания и обработки UTM-меток

<script type="text/javascript">
$(function () {
	var utm='utm_content';
	if( window.location.toString().indexOf(utm +'=') != -1) {
		var number=(window.location.toString().substr(window.location.toString().indexOf(utm+'=')+ utm.length+1,50)).toLowerCase();  
		if( number.indexOf('&') != -1) {
			number=(number.substr(0,number.indexOf('&')));
		}
		if(number == 'eng') {$('.multi-title').html('английского');}
		if(number == 'iaponia') {$('.multi-title').html('японского');}
		if(number == 'isp') {$('.multi-title').html('испанского');}
		if(number == 'itl') {$('.multi-title').html('итальянского');}
	}
});
</script>

$(‘.multi-title’).html(‘испанского’); — мы можем использовать абсолютно любые скрипты jQuery.

Данную задачу также можно решить с помощью php — это в разы быстрее, но не всегда удобно. Пример:

<?php
$title = $_GET['utm_content'];
 
if($title == 'eng') {$title_text = 'английского';}
elseif($title == 'iaponia') {$title_text = 'японского';}
elseif($title == 'isp') {$title_text = 'испанского';}
elseif($title == 'itl') {$title_text = 'итальянского';}
else{$title_text = 'китайского';}
?>
<h6>Онлайн изучение <span class="multi-title"><?php echo $title_text; ?></span> языка <br>с лучшими преподавателями</h6>

Данный способ создания мультилэндинга взял с сайта lozyuk.ru. Там же можно почитать более подробно про UTM-метки.

Доработанный скрипт с отлавливанием фраз из поискового запроса:

multi="перегородочные|перегородки;Перегородочные блоки\n\
перемычки;Блоки перемычки\n\
стеновые;Стеновые блоки";

$(function() {
	//формируем массив с utm метками
	function getURLParameter(name) {
		return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null;
	}

	utm=[];
	$.each(["utm_source","utm_medium","utm_campaign","utm_term",'source_type','source','position_type','position','added','creative','matchtype'],function(i,v){
		utm[v]=getURLParameter(v) || $.cookie(v);
		$.cookie(v, utm[v], { expires: 365, path: '/' });
	});

	// MULTI
	var ab_title = "default";
	if(utm['utm_term']){
		multi=multi.split('\n');
		multi=$.map(multi,function(v, i){
			arr1=v.split(';');
			r=new RegExp(arr1[0]);
			return {reg: r,val: arr1[1]};
		});
		multi=$.grep(multi,function(v,i){
		return utm['utm_term'].search(v.reg) > -1
		});
		if(multi[0]){
			ab_title=multi[0].val;
			var target = $('.multi'); //элемент для подмены
			target.html(ab_title); 
		}
	}
});

перегородочные|перегородки; — слова из поискового запроса (разделяются |, по окончании ;)
Перегородочные блоки\n\ — то, что нужно подставить в заголовок в зависимости от поискового запроса (переход для следующего условия \n\, если больше условий нет — ничего не ставим)

Парсинг utm-меток из url

Пример url c utm-метками:

https://site.ru/?utm_source=product_email&utm_medium=email&utm_term=September_15&utm_content=button_Read_more&utm_campaign=skidka_20

Получить все значения url после ? можно командой:

print_r ($_GET);

Получаем конкретные значения

$utm_source = $_GET['utm_source'];
$utm_term = $_GET['utm_term'];

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

<?php if (!empty($utm_source)): ?><input name="utm_source" class="utm_source" type="hidden" value="<?php echo $utm_source; ?>" /><?php endif; ?>
<?php if (!empty($utm_term)): ?><input name="utm_term" class="utm_term" type="hidden" value="<?php echo $utm_term; ?>" /><?php endif; ?>	

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Перемотка слайдами

Перемотка слайдами

Для главной страницы, либо для страницы лэндинга иногда требуется перемотка слайдами (перемотка к следующему экрану).Есть отличная реализации данного функционала — fullPage.js-master. Подключение скриптов и стилей Подключаем скрипт и стиль fullPage Читать далее »

Рекомендации по созданию лэндинга

Рекомендации по созданию лэндинга

Лэндинг является довольно специфическим вариантом сайта, требующим учитывать множество нюансов. Разбираемся в особенностях верстки и функционирования лэндинга. Рекомендации по верстке лэндинга Мобильная версия лэндинга В мобильной версии особенно ощущается величина Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Multi-page landing
Кнопки
Рекомендации для васКнопкиOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.