gaintsev/example.html

## example.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>ss-utm</title>
  </head>
  <body data-ss-user-utm>

    <form action="?" method="post">
      <input data-ss-user-utm-source type="text" name="utm_source" value="">
      <input data-ss-user-utm-medium type="text" name="utm_medium" value="">
      <input data-ss-user-utm-campaign type="text" name="utm_campaign" value="">
    </form>

    <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      (function($) {

        function checkAndStoreUtm(name) {
          var url = new URL(window.location.href);
          var param = url.searchParams.get(name);
          if (!!param) {
            localStorage.setItem(name, param);
          }
          return false;
        }

        function getAndPassUtm(name, el) {
          if (localStorage.getItem(name) != null) {
            $(el).val(localStorage.getItem(name));
          }
          return false;
        }

        $('[data-ss-user-utm]').each(function() {

          // Store UTM's if exist
          checkAndStoreUtm('utm_source');
          checkAndStoreUtm('utm_medium');
          checkAndStoreUtm('utm_campaign');

        });

        // Pass data to fields
        $('[data-ss-user-utm-source]').each(function() {
          getAndPassUtm('utm_source', this);
        });

        $('[data-ss-user-utm-medium]').each(function() {
          getAndPassUtm('utm_medium', this);
        });

        $('[data-ss-user-utm-campaign]').each(function() {
          getAndPassUtm('utm_campaign', this);
        });

      })(jQuery);
    </script>

  </body>
</html>

## ss-user-utm.md

      
    Raw
  

              ss-user-utm.md
            
          
    Сохранение UTM меток на протяжении всей воронки

В качестве зависимости к страницам должен быть подключен jQuery.
Следующий скрипт можно оформить отдельным файлом и подключать на всех старницах воронки:
(function($) {

  function checkAndStoreUtm(name) {
    var url = new URL(window.location.href);
    var param = url.searchParams.get(name);
    if (!!param) {
      localStorage.setItem(name, param);
    }
    return false;
  }

  function getAndPassUtm(name, el) {
    if (localStorage.getItem(name) != null) {
      $(el).val(localStorage.getItem(name));
    }
    return false;
  }

  $('[data-ss-user-utm]').each(function() {

    // Store UTM's if exist
    checkAndStoreUtm('utm_source');
    checkAndStoreUtm('utm_medium');
    checkAndStoreUtm('utm_campaign');

  });

  // Pass data to fields
  $('[data-ss-user-utm-source]').each(function() {
    getAndPassUtm('utm_source', this);
  });

  $('[data-ss-user-utm-medium]').each(function() {
    getAndPassUtm('utm_medium', this);
  });

  $('[data-ss-user-utm-campaign]').each(function() {
    getAndPassUtm('utm_campaign', this);
  });

})(jQuery);

В каждую из форм добавляется 3 скрытых поля такого вида:
<input data-ss-user-utm-source type="hidden" name="utm_source" value="">
<input data-ss-user-utm-medium type="hidden" name="utm_medium" value="">
<input data-ss-user-utm-campaign type="hidden" name="utm_campaign" value="">

Затем какому-либо главному элементу-контейнеру (например body) добавляется атрибут data-ss-user-utm:
<body data-ss-user-utm>

Как это работает.

Когда пользователь переходит по ссылке (в которой присутствуют UTM) на посадочную страницу, скрипт распознает эти метки в URL и сохраняет их localStorage.
Затем, если на странице присутствуют скрытые поля с атрибутами data-ss-user-utm-source, data-ss-user-utm-medium и data-ss-user-utm-campaign то в значения этих полей заносятся сохраненные ранее данные из localStorage.
Пример


Ссылка на страницу с передачей UTM в URL - http://web-templates.su/ss-utm/?utm_source=foo&utm_medium=bar&utm_campaign=baz
При повтроном заходе на страницу но уже без передачи UTM, можно будет увидеть сохраненные значения - http://web-templates.su/ss-utm/

Соответственно, если у пользователя меняется набор UTM меток в URL, они так же обновляются в localStorage - http://web-templates.su/ss-utm/?utm_source=FOO&utm_medium=BAR&utm_campaign=BAZ
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>ss-utm</title>
	</head>
	<body data-ss-user-utm>

	<form action="?" method="post">
	<input data-ss-user-utm-source type="text" name="utm_source" value="">
	<input data-ss-user-utm-medium type="text" name="utm_medium" value="">
	<input data-ss-user-utm-campaign type="text" name="utm_campaign" value="">
	</form>

	<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js" charset="utf-8"></script>
	<script type="text/javascript">
	(function($) {

	function checkAndStoreUtm(name) {
	var url = new URL(window.location.href);
	var param = url.searchParams.get(name);
	if (!!param) {
	localStorage.setItem(name, param);
	}
	return false;
	}

	function getAndPassUtm(name, el) {
	if (localStorage.getItem(name) != null) {
	$(el).val(localStorage.getItem(name));
	}
	return false;
	}

	$('[data-ss-user-utm]').each(function() {

	// Store UTM's if exist
	checkAndStoreUtm('utm_source');
	checkAndStoreUtm('utm_medium');
	checkAndStoreUtm('utm_campaign');

	});

	// Pass data to fields
	$('[data-ss-user-utm-source]').each(function() {
	getAndPassUtm('utm_source', this);
	});

	$('[data-ss-user-utm-medium]').each(function() {
	getAndPassUtm('utm_medium', this);
	});

	$('[data-ss-user-utm-campaign]').each(function() {
	getAndPassUtm('utm_campaign', this);
	});

	})(jQuery);
	</script>

	</body>
	</html>