Multi-page landing

Мультилендинг — это по сути лэндинг с изменяемыми частями контента в зависимости от запроса (рекламных объявления) фактического 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\, если больше условий нет — ничего не ставим)

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Параллакс эффект заднего фона

Параллакс эффект заднего фона

Добавим к сайту классный эффект параллакса (Parallax) заднего фона. Простой скрипт Parallax Добавляем после <body> <div class="bg"></div> Script <script> $(window).scroll(function(e){ parallax(); }); function parallax(){ var scrolled = $(window).scrollTop(); $('.bg').css('top',-(scrolled*0.1)+'px'); } Читать далее »

Южная заборная компания

Южная заборная компания

Южная заборная компания — строительство заборов любой сложности http://yugzk.ru

Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/

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

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

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