Как создавать события на сайте по utm-меткам?

Question

[Сергей Шилов]

Всем привет! Не силен в js, но буду благодарен, если хотя бы сориентируете в какую сторону начать искать.
Требуется следующее: в зависимости от параметров utm-меток, у меня должно быть определенное событие на сайте, например, человек по контекстной рекламе перешел по определенной метке, и, соответственно, выполнилась функция, соответствующая данной метке.

Answer 1

[Виталий Инчин ☢]

Смотрите что в location и запускайте нужный кусок кода.
----------------
Можно написать функцию для получения метки:

function getUTM(name){
  var target = location.search.match(
     new RegExp("utm_"+name+"=([^&]+)")
  );

  return target ? target[1] : null;
}

выполнилась функция, соответствующая данной метке.

Я бы либо использовал switch -> case, либо объект с методами, идентичными по названию значениям метки.

switch(getUTM("source")){
   case "yandex": //Делаем что-то
          break;
   case "google": //Или делаем это
          break;
}

Или вот так:

var funcGen = {
  "yandex" : function(){ ... },
  "google" : function(){ ... }
}[getUTM("source")];

//Если есть такая - запустим
funcGen&&funcGen();

Comments

[Виталий Инчин ☢]

Максим Зайцев: действительно, исправил

[Сергей Шилов]

Спасибо большое! А если у меня есть якорь, допустим mysite.com/#anchor, то как, в зависимости от анкора выполнить функцию?

[Виталий Инчин ☢]

Сергей Шилов: location.hash будет содержать "#anchor".

[Сергей Шилов]

а, я понял как!

[Сергей Шилов]

Предлагаю перейти к моему примеру. Я его упростил. Не буду использовать utm-метки, буду использовать якоря. В коде ниже, я пытаюсь сделать так, чтобы, если ссылка, по которой клиент перешел на сайт равна значению name в теге а, то выполняется какая-то функция.

var clientHref = window.location.href;
var siteHref = $('.why-content').find('a').attr('name', clientHref);

if (clientHref = siteHref) {
$(this).closest('.why-wrap').find('.why-content').show();
}

[Виталий Инчин ☢]

Сергей Шилов
Могу предположить, что вам нужно это:

var clientHref = window.location.hash;
$('.why-content').each(function(){\
  //Если в текущем .why-content есть ссылка с name="#yakor", то показать его
  if($(this).find('a[name='+clientHref+']').length) $(this).show();
});

[Сергей Шилов]

Виталий Инчин ☢: не работает. Там поправочка, вместо .why-content должен быть .why-wrap.
По умолчанию раздел раздел скрыт, но если ссылка с якорем, по которой перешел клиент, соответствует ссылке внутри раздела, то он открывается. Ну, это я так, повторил задачу.

Вот что сейчас стоит:

var clientHref = window.location.hash;
    $('.why-wrap').each(function(){
        if($(this).find('a[name='+clientHref+']').length) {
            $(this).find('.why-content').show();
        }
    });

[Виталий Инчин ☢]

Сергей Шилов: а можно разметку?

[Сергей Шилов]

Виталий Инчин ☢: вот:

<div class="why-wrap">
     <a name="оценка-бизнеса"></a>
     <h3>Оценка бизнеса</h3>
     <div class="why-content" style="display:none;">Собственно, описание></div>
</div>

[Виталий Инчин ☢]

Сергей Шилов: в вашем случае нужно так: var clientHref = location.hash.split("#")[1];, так как само по себе свойство включает в себя и знак "#", а в name он у вас отсутствует.

[Сергей Шилов]

Виталий Инчин ☢: вот я так и подумал сначала

[Сергей Шилов]

Виталий Инчин ☢: ошибка в консоли в строке, где начинается оператор if

Uncaught SyntaxError: missing ) after argument list

[Виталий Инчин ☢]

Сергей Шилов: у меня все работает - jsfiddle.net/In4in/qn4zfuL8

[Сергей Шилов]

Виталий Инчин ☢: извиняюсь, моя ошибка в коде, спасибо Вам большое!

Answer 2

[Дмитрий Новиков]

utm-метка это по сути get-параметр.
отлавливайте значение get-параметра (удобнее через PHP, на через js) и выполняйте код, который нужен.

Comments

[Сергей Шилов]

бекенд для меня вообще темный лес, а в js более-менее хоть как-то, так что js мне перспективнее будет