SB-Placer: модуль подмены контента в зависимости от источника

куда мы поместим подменяемый телефонный номер;

DOM-элемент

Первый этап — это указание DOM-элемента, в который скрипт подставит телефон. Этот шаг — единственное отличие в настройке jQuery-версии модуля от версии без зависимостей:

// Stand-alone
sbPlacer({
	/* настройки */
});

// jQuery
$('.sb-phone').sbPlacer({
	/* настройки */
});

В stand-alone версии DOM-элемент указывается через обязательный параметр targets. Значение этого параметра —.sb-phone — это обычный css-селектор. Он выбирает все DOM-элементы, у которых атрибут class=«sb-phone».

В jQuery-версии для указания элемента мы используем старый добрый jQuery-объект: $('.sb-phone'). В него поместим подменяемый телефон.

Проставьте элементу (или ряду элементов) класс sb-phone (или любой другой) и скрипт проставит телефоны во всех блоках с данным классом. Чтобы выбрать ряд разных элементов, укажите css-селекторы через запятую: '#phone,.sb-phone'.

Не размещайте в target-элементе что-то постороннее. После подмены в нём останется только проставленное скриптом значение.

Остальные параметры у двух версий модуля идентичны, поэтому дальше смотрим на примере jQuery-версии.

(которое подставим, если ни одно из условий подмены не выполнилось);

Условия подмены

Следующий шаг — передать скрипту условия подмены и значение по умолчанию, которое проставим, если ни одно из условий подмены не выполнилось:

// определяем текущий источник посетителя
var source = sbjs.get.current.src;

// магия!
$('.sb-phone').sbPlacer({
	default_value: '8-800-DEFAULT-PHONE',
		conditions: [
		  {
			  check: source,
			  when: 'yandex',
			  place: '8-800-YANDEX-PHONE'
		  },
		  {
			  check: source,
			  when: 'google',
			  place: '8-800-GOOGLE-PHONE'
		}
	]
});

default_value — String (может содержать html-теги)
Значение по умолчанию, которое проставится в том случае, если ни одного совпадения не было найдено.
Наличие обязательно.

conditions — Array of Objects
Условия, по которым происходит подмена.

Объект условия

check — String / Array of Strings
Параметр, который мы проверяем на соответствие. Например, источник посетителя.

when — String / Array of Strings / RegExp
Значения, по которым идет проверка. Например, источник 'yandex'. Чуть ниже рассмотрим применение разных типов значений.

place — String (может содержать html-теги)
То, что мы помещаем в элементы при условии найденного совпадения (check с when).

Все параметры обязательны.

В примере выше в первом объекте условий мы проверяем: если utm_source посетителя — yandex, то подставляем 8-800-YANDEX-PHONE.

Теперь пример интереснее:

$('.sb-phone').sbPlacer({
default_value: '8-800-DEFAULT-PHONE',
	conditions: [
		{
			check: source,
			when: ['yandex', 'begun'],
			place: '8-800-YANDEX-BEGUN-PHONE'
		},
		{
			check: source,
			when: 'google',
			place: '8-800-GOOGLE-PHONE'
		}
	]
});

Обратите внимание на первый объект: если source посетителя либо yandex, либо begun, то скрипт подставит 8-800-YANDEX-BEGUN-PHONE.

Ещё интереснее:

var source = sbjs.get.current.src,
	medium = sbjs.get.current.mdm;

$('.sb-phone').sbPlacer({
	default_value: '8-800-DEFAULT-PHONE',
		conditions: [
		{
			check: [source, medium],
			when: [['yandex', 'begun'], 'cpc'],
			place: '8-800-YANDEX-BEGUN-PHONE'
		},
		{
			check: [source, medium],
			when: ['google', 'cpc'],
			place: '8-800-GOOGLE-PHONE'
		}
	]
});

Значение check теперь массив [source, medium]. Это значит, что проверка будет идти по двум параметрам: source и medium. И только при совпадении обоих будет подставлено значение из place. С чем же будем сравнивать? С массивом when.

Кол-во объектов в массиве check должно совпадать с кол-вом объектов в массиве when!

Итак, скрипт сначала проверяет длины массивов check & when. Если они не совпадают, то условие пропускается. Если совпадают, то смотрим входит ли значение source в первый объект массива when — ['yandex', 'begun'], если да, то идет проверка является ли значение medium — cpc. Если оба условия выполнены, то подставляется значение 8-800-YANDEX-BEGUN-PHONE. Если хотя бы одно из условий не выполняется, то скрипт данное значение не подставляет и переходит к следующему объекту с условием.

И, наконец, RegExp:

var source   = sbjs.get.current.src,
	medium   = sbjs.get.current.mdm,
	campaign = sbjs.get.current.cmp;

$('.sb-phone').sbPlacer({
  default_value: '8-800-DEFAULT-PHONE',
  conditions: [
	{
	  check: [source, medium, campaign],
	  when: [['yandex', 'begun'], 'cpc', /^y_.*_poisk$/i],
	  place: '8-800-YANDEX-BEGUN-PHONE'
	},
	{
	  check: [source, medium, campaign],
	  when: [['google', 'facebook'], 'cpc', /^g_.*_poisk$/i],
	  place: '8-800-GOOGLE-FACEBOOK-PHONE'
	}
  ]
});

Всё работает так же, как в примере выше, но 3 объект в массиве when — это RegExp. Если campaign соответствует данному регулярному выражению, то подставляется значение из place.

Сначала загрузится узел, потом скрипт проставит в него значение:

<head>
  <script src="/path/to/sb-placer.jquery.min.js"></script>
</head>
<body>
  <div class="sb-phone"></div>
  <script>
    $('.sb-phone').sbPlacer({ /* логика */ });
  </script>
</body>

Мы говорим браузеру, чтобы он запустил функцию подмены по событию document.ready (то есть сразу после того, как всё DOM-дерево будет загружено):

<head>
  <script src="/path/to/sb-placer.jquery.min.js"></script>
  <script>
    $('document').ready(function() {
      $('.sb-phone').sbPlacer({ /* логика */ });
    });
  </script>
</head>

<body>
  <div class="sb-phone"></div>
</body>

Необязательно вываливать настройки подмены в тело html-страницы. Можно поместить функцию во внешний js-файл и подключить его через <script>:

<head>
  <script src="/path/to/sb-placer.jquery.min.js"></script>
  <script src="/path/to/sb-placer-settings.js"></script>
</head>

<body>
  <div class="sb-phone"></div>
</body>