Какой скрипт вставить для динамического контента?

Question

[deniskins23]

Доброго времени суток!С праздниками всех!Кто может подсказать - жутко нагрели голову. Есть лендинг, из него хотят сделать мультлендинг, чтобы по переходу с рекламы по utm-метке, в зависимости от того, с какой метки пришел посетитель, заголовок h1 на сайте менялся. Маркетолог дал такую метку https://site.ru/?utm_source=yandex&utm_medium=cpc&... (изменил только название сайта). И я не пойму, по каким параметрам тут вообще можно что-то менять?Искал решение в сети, есть скрипты, но они с абсолютно другими параметрами в метке. Кто может подсказать?Горит очень.

Comments

[di]

kwork

Answer 1

[alex]

это вам дали шаблон сылки. вместо фигурных скобок {}, там будут значения меток, типа:
https://site.ru/?utm_term=глажка котов

spoiler

;(function(){
//   [1]
//   берем содержимое адресной строки (все что идет после знака «?», включая сам этот знак)
  const url = location.search;

//   [2]
//   теперь нужно эту строку (пример):
//   '?utm_source=yandex&utm_medium=cpc&utm_campaign=ооо_рога_и_копыта&utm_term=глажка котов'
//   распарсить в объект:
//   {
//     utm_source: 'yandex',
//     utm_medium: 'cpc',
//     utm_campaign: 'ооо_рога_и_копыта',
//     utm_term: 'глажка котов'
//   }
//   напишем для этого функцию: 
  function parseUrlSearchParams(url) {
    return url.replace('?', '').split('&').reduce((res, mark) => {
      const [key, value] = mark.split('=');
      return (res[key] = value, res);
    }, {});
  }

//   [3]
//   далее берем со страницы нужный вам заголовок h1 или что вам там нужно
  const htmlElement = document.querySelector('h1.my-super-seo-header');

//   [4]
//   далее собственно меням содержимое тега, на значение нужной вам utm-метки (к примеру это utm_term):
  htmlElement.textContent = parseUrlSearchParams(url)['utm_term'];
//   было:
//   <h1 class="my-super-seo-header">мойка собак</h1>
//   стало
//   <h1 class="my-super-seo-header">глажка котов</h1>

//   все
})();

и я думаю вам нужно уточнить у ваших маркетологов по каким правилам менять текст заголовка. т.е. не тупо менять на значение метки, а типо: если значение метки - 'глажка котов', то меняем текст на: 'Гладим котов быстро и качественно'. и так для всех возможных значений меток

Comments

[deniskins23]

Спасибо за развернутый ответ. Сегодня уточнят кое-какие моменты и можно будет уже более конкретно подумать.Но думаю это решение мне тоже подойдет.

[deniskins23]

Кстати, есть вопрос. Я примерно разобрался со скриптом. Сейчас жду ответа от маркетолога. Вот только не совсем понятно, он в консоле ругается на Cannot set property 'textContent' of null . По сути я понимаю, что это он пришел на страницу не по ссылке с utm-метки, а просто заглянул на сайт, но есть какой-то способ обезопасить этот момент?

[alex]

deniskins23, вот немного подредактированный вариант, суть таже

;(function(){
  function getUrlParams() {
    if (location.search) {
      return location.search.replace('?', '').split('&').reduce((res, mark) => {
        const [key, value] = mark.split('=');
        return (res[key] = decodeURIComponent(value), res);
      }, {});
    }
  }
  
  const htmlElement = document.querySelector('h1.my-super-seo-header');
  const urlParams = getUrlParams();
  
  if (urlParams && htmlElement) {
    const param = urlParams['utm_term'];
    
    if (param) {
      htmlElement.textContent = param;
    }
    
  }
})();

[deniskins23]

Alex, Огромное спасибо!Все работает вроде. Хотя маркетолог так и молчит.-)Вообще своеобразный клиент, поменьше тебе таких в этом году!-)С праздниками наступившими!

Answer 2

[Rikonardo]

Значит я это делаю так:
В ссылке можно передать аргументы (наверно не раз встречали ссылку вида my.site/something?id=45445, и даже сами сейчас прислали такую ссылку). К чему я собственно веду, там например мы можем передать какую-то цифру которой соответствует определённый текст.
Допустим у нас будет такая ссылка: https://site.ru/?type=1
Теперь в JS читаем значение type. Так как в JS нет готовых инструментов для этого, поступим просто. Затребуем необходимость указывать параметр type первым. И так, есть код, который при условии параметра type первого в списке возвращает его значение:

var type = "0";
if(window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[0].replace("#","").replace("?","")=="type") 
{
type = window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[1].replace("#","");
}

Теперь перейдём к html, и найдём нужный заголовок, укажем ему id="titletype"
<h1 id="titletype">Добро пожаловать!</h1>
Ок, вернёмся к скрипту:

var type = "0";
if(window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[0].replace("#","").replace("?","")=="type") 
{
type = window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[1].replace("#","");
}
if(type=="1") document.getElementById("titletype").innerHTML = "Спасибо за регистрацию!"
if(type=="2") document.getElementById("titletype").innerHTML = "Благодарим, что доверяете нам!"
/*И так далее*/

Конечный результат:

<h1 id="titletype">Добро пожаловать!</h1>
<script>
var type = "0";
if(window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[0].replace("#","").replace("?","")=="type") 
{
type = window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[1].replace("#","");
}
if(type=="1") document.getElementById("titletype").innerHTML = "Спасибо за регистрацию!"
if(type=="2") document.getElementById("titletype").innerHTML = "Благодарим, что доверяете нам!"
</script>

Comments

[deniskins23]

В целом я согласен с этим, но вот как это применимо к данной utm-метке?ПРосто она какую дали, такая и есть. в ней нет никаких параметров и ничего. Разве предложенный скрипт будет тут работать?

[deniskins23]

вот какой текст у utm/ сразу после слеша с названием сайта, может тут полностью выдаст ?

utm_source=yandex&utm_medium=cpc&utm_campaign={campaign_id}&utm_content={ad_id}&utm_term={keyword}

[Rikonardo]

deniskins23, скрипт, который предложил я целиком совместим с данной utm-меткой. Просто к параметрам добавится ещё один в начале.

https://site.ru/?type=1&utm_source=yandex&utm_medium=cpc&utm_campaign={campaign_id}&utm_content={ad_id}&utm_term={keyword}

[Rikonardo]

deniskins23, по описанному принципу можно читать также любой из параметров, если доработать механизм и сделать необязательным использование параметра в самом начале. Например параметры utm-метки.

[deniskins23]

Rikonardo, Извини может туплю..но откуда этот параметр взять?Точнее откуда он возьмется в этой строке?

[Rikonardo]

deniskins23, я не знаю, откуда берётся ссылка. Если например на эту страницу будет редирект после регистрации, ничего не мешает приписывать данный параметр. Если же эта ссылка приходит из вне и вас интересует снятие параметров utm-метки - тоже не проблема, вместо type мы можем считать любой из параметров.
Но от какого параметра всё будет зависить? От utm_source, utm_medium, utm_campaign, utm_content или utm_term?

[deniskins23]

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

[Rikonardo]

deniskins23, как я понял, вас интересует узнать, от куда перешёл пользователь. Тобеш utm_source.
Вот изменённый код:

<h1 id="titletype">Добро пожаловать!</h1>
<script>
var type = "0";
if(window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[0].replace("#","").replace("?","")=="utm_source") 
{
type = window.location.href.split('/')[window.location.href.split('/').length-1].split('=')[1].replace("#","");
}
if(type=="google") document.getElementById("titletype").innerHTML = "Добро пожаловать из Google!"
if(type=="yandex") document.getElementById("titletype").innerHTML = "Добро пожаловать из Yandex!"
if(type=="vkontakte") document.getElementById("titletype").innerHTML = "Добро пожаловать из VK!"
if(type=="facebook") document.getElementById("titletype").innerHTML = "Добро пожаловать из Facebook!"
</script>

[deniskins23]

Параметров там по сути никаких и не будет кроме тех что есть вот в этой метке. Это уже готовый вариант. Я видел решения, где в метке меняется какой-то параметр и его можно отследить, но тут вообще не понятно что к чему.

[Rikonardo]

deniskins23, что собственно такое utm. utm - идентификатор, прилепляющийся к ссылке при клике на объявление. Что содержит эта метка:
utm_campaign - id компании, с рекламы которой перешли
utm_content - id рекламного объявления на который кликнули
utm_term - ключевое слово, по которому было показано объявление

[deniskins23]

Rikonardo, Пользователь будет приходить четко с яндекса и разница лишь в том, с какого запроса он пришел. Это мультилендинг. То есть скажем пользователь пишет в поиске к примеру "ДВери в Питере", у меня реклама стоит на этот запрос и его перекидывает на страницу, а на ней написано - Двери в Питере по лучшей цене!. А если он пишет в поиске "Двери в Москве", то у меня на сайте после его перехода написано - Двери в Москве.

[deniskins23]

Rikonardo, Я понимаю. У меня упирается в одно - я не понимаю, что с этой utm именно имеющейся куда вставлять..Если бы там было что-то изменяемое..Вот тут описано как вставить, но там меняется часть ссылки https://ppc.world/articles/skript-podmeny-zagolovk...

[deniskins23]

Rikonardo, Если тебе не трудно, ты мог бы написать конкретное решение в данной ситуации?И чтобы я в h1 уже вставлял именно динамический контент

[Rikonardo]

deniskins23, смотрите. Фактически utm метка может быть записана как угодно (в любом порядке). Скрипт считывает например utm_term=spb после чего находи в каталоге контента нужный текст.

var content = {
    moscow: 'Заказать эвакуатор в Москве!',
    kazan: 'Заказать эвакуатор в Казани!',
    spb: 'Заказать эвакуатор в Санкт-Петербурге!',
};

Фактически всё что вам надо, это наполнить этот список возможными ключевыми словами. Вот где их брать - сам допереть не могу.
Ну и selector заголовка надо указать (по ссылке, что вы скинули есть инструкция по "добычи" селектора)

[deniskins23]

Rikonardo, В этом то и суть..Я сейчас с заказчиком и маркетологом ругаюсь жутко. Если толкового мне ничего не объяснят завтра то пусть идут лесом!ПОтому что я сутки уже ищу решение, а они там похоже отдыхают. Но если пояснения какие-то дадут, то завтра сможешь мне посоветовать, если сам не разберусь?Был бы признателен..