Простой коллтрекинг своими руками. Часть JavaScript

Появилась необходимость у клиента отслеживать некоторые сайты через статический коллтрекинг, для этого были написаны скрипты для Bitrix на php и часть на JavaScript, которую рассмотрим в этой статье.

Клиент занимается автозапчастями, по-этому отслеживаем тематические площадки:

  • farpost.ru
  • drom.ru
  • auto.ru
  • ferio.ru

Итак приступим

Создадим файл в our_script.js в папке нашего шаблона Битрикс или любой другой CMS — очевидно js часть не будет сильно отличаться.

Скрипт максимально простой, мы получаем заранее обработанные в php куки, анализируем их содержимое и подменяем телефоны на указанные.

Очевидно, что можно сделать модуль, в который пользователь сможет вносить признаки и телефоны, но для простоты мы оставили только самую суть. Далее все понятно из комментариев в скрипте:

// @consultapp.ru
// файл our_script.js в папке /ПУТЬ_К_ШАБЛОНУ/js/
function get_co (co_name){
  var res = document.cookie.match ( '(^|;) ?' + co_name + '=([^;]*)(;|$)' );
  if (res) return (unescape(res[2]));
  else return null;
}
// по готовности документа получаем куки
$(document).ready(function() { 
		var lidsrc = get_co ( "ИМЯ_НАШЕЙ_КУКИ" );
		var tel=null;
		var telhref=null;

		// анализируем текст куки и указываем нужный телефон
		if((lidsrc.indexOf("farpost")>=0) || (lidsrc.indexOf("drom")>=0)){
			tel='8 (999) 999-99-99';
			telhref='tel:79999999999';
		}else if(lidsrc.indexOf("ferio")>=0){
			tel='8 (888) 888-88-88';
			telhref='tel:78888888888';
		}else if(lidsrc.indexOf("auto.ru")>=0){
			tel='8 (777) 777-77-77';
			telhref='tel:77777777777';
		}

		// заменяем телефоны на странице по признаку class
		// предварительно все ссылки (тег <a>) надо отметить,
		// добавив в class атрибут cont_tel
		if(tel!=null){
			// все отмеченные телефоны
			$('.cont_tel').html(tel);
			$('.cont_tel').attr("href", telhref);
			$('.cont_tel_html').html(tel);
			$('.cont_tel_href').attr("href", telhref);
		}
	}
);

Вставим в header шаблона строку php подключения js для Bitrix, в других CMS есть свои инструменты, ну или вставить в head напрямую, тут уж как кому нравится.

<? 
// @consultapp.ru
// подключаем наш скрипт в шаблоне .php
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/our_script.js");
?>

Куки мы используем, т.к. HTTP_REFERER постоянно меняется при переходе по страницам, а нам надо точно указывать одинаковый телефон на всех страницах сайта, который бы соответствовал источнику, с которого пришел клиент.