Часто при проектуванні сайту постає завдання формування заголовків, текстів, зміни будь-яких даних в залежності від того, які параметри задаються в url сайту. Наприклад, на сайті потрібно виводити різні номери телефонів для різних міст або в залежності від параметрів в посиланнях. Для цього в оголошення додається параметр з будь-яким назвою, і, якщо користувач переходить на сайт з цього оголошення, то йому показується на сайті новий телефон.
Алгоритм, за яким можна вирішити це завдання, виглядає приблизно так:
- У оголошення додається параметр, наприклад, з назвою "utm_campaign" і певним набором можливих значень (tumen, kirov, ivanovo), тоді посилання на сайт буде мати вигляд: com/?utm_source=yandex&utm_campaign=tumen> http://www.site.com/?&utm_campaign=tumen
- Скрипт аналізує вміст адресного рядка і, якщо вона містить параметр з ім'ям "utm_campaign" і його значення входить в список можливих, то він зберігає в браузері куку з унікальним ім'ям для цього сайту і значенням, переданим в адресному рядку, наприклад, вийде кука "utm_campaign_change = tumen ".
- Потім скрипт виконує перевірку умов: чи містить посилання заданий нами параметр з можливим значенням і зберігається чи в браузері кука "utm_campaign_change" з одним з можливих значень. Якщо хоча б одна з цих умов виконано, то скрипт замінює телефон на сайті.
Приклад реалізації цього завдання наведено в плагіні, доступному за засланні .
Для використання даного скрипта потрібно підключити бібліотеку jquery.js перед закриває тегом, після цього підключити наведений вище скрипт. Нижче наведено приклад сторінки, на якій підключені необхідні скрипти і є блок, в якому буде змінюватися номер телефону, з унікальним ідентифікатором:
<! Doctype html> <html lang = "ru"> <head> <meta charset = "UTF-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1"> < title> Скрипт підміни номерів </ title> <link rel = "stylesheet" href = "styles.css" /> </ head> <body> <div class = "phone__outer"> <p> Номер телефону: </ p> <div class = "phone__in" id = "phone"> + 7 (8332) 22-22-22 </ div> </ div> <script src = "juery.js" type = "text / javascript"> </ script> <script src = "main.js" type = "text / javascript"> </ script> </ body> </ html>У блоці з ідентифікатором "phone" буде змінюватися номер телефону. У рядках <script src = '...' type = "text / javascript"> підключаються необхідні скрипти.
Код скрипта main.js наведено нижче:
(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 + "=; expires =; path = /"; expires = new Date (); expires.setTime (expires.getTime () + 622229959999); document.cookie = name + "=" + valCookie + "; expires =" + expires.toGMTString () + "; path = /"} function parseGetParams (peremennya) {var getURl = window.location.search.substring (1); var peremennii = getURl.split ( "&"); for (var i = 0; i <pe remennii.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) .text (settings.newData [i]); }}})}; }) (JQuery); $ (Function () {$ ( '# phone'). ChangeData ({urlParam: 'utm_campaign', nameCookie: 'utm_campaign_change', paramList: [ 'tumen', 'ivanovo'], newData: [ '+7 (982) 977-30-36 ',' +7 (930) 347-69-65 ']});});В скрипті для блоку, в якому будемо міняти дані, викликається функція, в яку передаємо наступні параметри: ім'я параметра, що вказується в оголошенні, ім'я куки, в якій будемо зберігати значення параметра, масив значень параметра (в нашому випадку список міст) і масив значень для заміни (в нашому випадку номерів телефонів).
Функція changeData () містить наступні методи:
• функція getCookie (name) повертає значення куки, ім'я якої передаємо як параметр;
• функція setCookie (name, valCookie) записує куку з ім'ям name і значенням valCookie;
• функція parseGetParams (peremennya) визначає значення параметра peremennya в адресному рядку.
У функції changeData () після завдання параметрів і визначення функцій виконується запис куки, якщо адресний рядок містить зазначений нами параметр із значенням зі списку можливих. Потім виконується перевірка, чи містить адресний рядок параметр або кука зі значенням зі списку. Якщо хоча б одна умова виконується, то відбувається заміна номера телефону в зазначеному нами блоці.
Після того, як користувач перейшов по оголошенню з нашим параметром, він може заходити на сайт і за прямим посиланням (без параметрів) і тоді йому теж буде показуватися змінений номер телефону, так як в браузері в куках збережена інформація про перехід з оголошення.
PS Якщо вам необхідно реалізувати підміну телефонів, заголовків, банерів в залежності від рекламних каналів і не хочеться розбиратися в цьому самостійно, то ми можемо зробити це за вас. Будь ласка, звертайтеся .
Автор: Буякова Катерина - Web-технолог інтернет-агентства Brandmaker.
Com/?
