DARTHARTH

Скрипт подмены данных в зависимости от utm метки в адресе

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

Был найден и немного переработан скрипт из интернета

(function( $ ) {
    $.fn.changeData = function(options) {
        var settings = {
            urlParam: null,
            nameCookie: null,
            paramList: null,
            newData: null
        };
        return this.each(function() {
            if (options) {
                $.extend(settings, options);
            }
            function getCookie(name) {
                var cookie = " " + document.cookie;
                var search = " " + name + "=";
                var setStr = null;
                var offset = 0;
                var end = 0;
                if (cookie.length > 0) {
                    offset = cookie.indexOf(search);
                    if (offset != -1) {
                        offset += search.length;
                        end = cookie.indexOf(";", offset);
                        if (end == -1) {
                            end = cookie.length;
                        }
                        setStr = unescape(cookie.substring(offset, end));
                    }
                }
                return(setStr);
            }
            function setCookie(name, valCookie) {
                document.cookie = name+"=; path=/";
                //document.cookie = name+"=; expires=; path=/";
                //expires = new Date();
                //expires.setTime(expires.getTime() + 622229);
                //expires.setTime(expires.getTime() + 622229);
                //document.cookie = name+"=" + valCookie + "; expires=" + expires.toGMTString() + "; path=/"
                document.cookie = name+"=" + valCookie + "; path=/"
            }
            function parseGetParams(peremennya) {
                var getURl = window.location.search.substring(1);
                var peremennii = getURl.split("&");
                for (var i=0; i<peremennii.length; i++) {
                    var pair = peremennii[i].split("=");
                    if (pair[0] == peremennya) {
                        return pair[1];
                    }
                }
                return(false);
            }
            var param = parseGetParams(settings.urlParam);
            if (settings.paramList.indexOf(param)!=-1) {
                setCookie(settings.nameCookie, param);
            }
            var param_cookie = getCookie(settings.nameCookie);
            for(var i=0; i<settings.paramList.length; i++){
                if ((param_cookie == settings.paramList[i]) || (param == settings.paramList[i])) {
                    //$(this).val(settings.newData[i]);
                    $(this).html(settings.newData[i]);
                }
            }
        })
    };
})(jQuery);

jQuery(document).ready(function($) {
     $('.replaced_phones').changeData({
         urlParam: 'utm_source',
         nameCookie: 'utm_campaign_change',
         paramList: [
             'direct'
         ],
		 newData: ['<a href="tel:+7(777)777-77-77">+7(777)777-77-77</a>']
		 
     });
	 
	 $('.replaced_mail').changeData({
         urlParam: 'utm_source',
         nameCookie: 'utm_campaign_change',
         paramList: [
             'direct'
         ],
         newData: ['<a href="mailto:zakaz.site@yandex.ru">zakaz.site@yandex.ru</a>']
     });
	 
});

Разберем немного точнее.

Во-первых, скрипт подключаем ниже подключения jquery.

Во-вторых, указание метки у нас идет в нижней части, а именно в строках

urlParam: 'utm_source',
paramList: [
             'direct'
         ],

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

utm_source=direct

В данном примере мы меняем ссылку с номером телефона и адресом электронной почты. Исходный код html выглядит примерно так

<div class="replaced_phones">
	<a href="tel:+7(888)888-88-88">+7(888)888-88-88</a>
</div>
<div class="replaced_mail">
	<a href="mailto:info.site@yandex.ru">info.site@yandex.ru</a>
</div>

Таким образом в нашем скрипте в строке

$('.replaced_phones').changeData({

мы указываем класс элемента в котором мы меняем значения, а в строке

newData: ['<a href="tel:+7(499)379-65-09">+7(499)379-65-09</a>']

что именно мы меняем.

В оригинале скрипта шла замена обычного текста и в строке 60 был такой код

$(this).text(settings.newData[i]);

т.е. «.text» у нас бы вывел нашу строку замены обычным текстом, не преобразованным в html тэги.

Также в нашем примере время жизни куки равно времени жизни сессии, т.е. куки пользователя, когда он уйдет с сайта, стираются. В оригинальном скрипте время жизни куки было выставлено чуть ли не 20 лет.

function setCookie(name, valCookie) {
   document.cookie = name+"=; expires=; path=/";
   expires = new Date();
   expires.setTime(expires.getTime() + 622229959999);
   document.cookie = name+"=" + valCookie + "; expires=" + expires.toGMTString() + "; path=/"
}

UPD. Дополняю кодом замены кнопки вызова вебформы в Drupal. Для этого пришлось добавить еще определение двух переменных — тайтла страницы из тэга h1 и адреса страницы, исключающего собственно саму метку.

var docstitle = document.getElementsByTagName('h1')[0].innerHTML;
var docurl = window.location.protocol + "//" + window.location.host + "/" + window.location.pathname;
	
	$('.button-buyoneklic').changeData({
		urlParam: 'utm_source',
		nameCookie: 'utm_campaign_change',
		paramList: [
			'yandex.search'
		],
		newData: ['<a class="buy_click_link" data-type="ajax" data-src="/node/26743?name='  + encodeURI(docstitle) + '&url=' + docurl + '" onclick="ym(33635284,\'reachGoal\',\'click\'); ga(\'send\', \'event\', \'kupit\', \'klik\'); return true;" data-fancybox="webform" href="javascript:;" >Купить в 1 клик</a>']
	});

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Scroll Up