WEB制作、マーケティングに関する情報をお届けします。ホームページ制作会社、テラのブログ

カスタムパラメータを取得してフォームにセットする方法

カテゴリ：WEB制作

タグ：

※当サイトはアフィリエイト広告を利用しています。

Webマーケティングにおいて必ずと言ってもいいほど使われるカスタムパラメータですが、フォームにセットすることでMA(マーケティング オートメーション ツール)などにユーザーの属性を受渡することなどができ、ユーザー動向を細かく計測することができます。
今回はフォームにカスタムパラメーターをセットする方法を紹介します。

デモを見る

 

今回のコードの特徴

ユーザーがアクセスした際にJavascriptでカスタムパラメーターを取得してセッションストレージに保存します。
form要素を取得してあらかじめ設定していたクラス名をformタグが持っていればパラメーターをセットします。

コードを紹介

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>UTMパラメータの保持</title>
</head>
<body>

<form class="params_set_target">
  <table>
    <tbody>
      <tr>
        <th>お名前</th>
        <td><input type="text" name="name" value="" placeholder="お名前を入力してください"></td>
        <th>メールアドレス</th>
        <td><input type="email" name="email" value="" placeholder="メールアドレスを入力してください"></td>
      </tr>
    </tbody>
  </table>
  
  <input type="hidden" class="utm_source" name="utm_source" value="">
  <input type="hidden" class="utm_medium" name="utm_medium" value="">
  <input type="hidden" class="utm_campaign" name="utm_campaign" value="">
  <input type="hidden" class="utm_term" name="utm_term" value="">
  <input type="hidden" class="utm_content" name="utm_content" value="">
</form>

<script>
  document.addEventListener("DOMContentLoaded", function() {
    function getQueryParams() {
      const params = new URLSearchParams(window.location.search);
      return {
        utm_source: params.get("utm_source") || "",
        utm_medium: params.get("utm_medium") || "",
        utm_campaign: params.get("utm_campaign") || "",
        utm_term: params.get("utm_term") || "",
        utm_content: params.get("utm_content") || ""
      };
    }

    function saveUTMParamsToSession(params) {
      Object.keys(params).forEach(key => {
        if (params[key]) {
          sessionStorage.setItem(key, params[key]);
        }
      });
    }
    function getUTMParamsFromSession() {
      return {
        utm_source: sessionStorage.getItem("utm_source") || "",
        utm_medium: sessionStorage.getItem("utm_medium") || "",
        utm_campaign: sessionStorage.getItem("utm_campaign") || "",
        utm_term: sessionStorage.getItem("utm_term") || "",
        utm_content: sessionStorage.getItem("utm_content") || ""
      };
    }
    function setUTMParamsToForm(params) {
      document.querySelector(".utm_source").value = params.utm_source;
      document.querySelector(".utm_medium").value = params.utm_medium;
      document.querySelector(".utm_campaign").value = params.utm_campaign;
      document.querySelector(".utm_term").value = params.utm_term;
      document.querySelector(".utm_content").value = params.utm_content;
    }
    const queryParams = getQueryParams();
    saveUTMParamsToSession(queryParams);
    
    const forms = document.querySelectorAll('form');
    forms.forEach((form) => {
      let formClass = form.className;
      if (formClass == "params_set_target") {
        const utmParams = getUTMParamsFromSession();
        setUTMParamsToForm(utmParams);
      }
    });
  });
</script>

</body>
</html>

コードを解説

HTML

formタグには『params_set_target』のクラス名を付与しておき、クラスが存在する場合のみカスタムパラメーターをセットするようにしています。

また、カスタムパラメーターを取得する入力フォームにもクラス名を付与しておきます。
ブラウザからは見えないようにするため『type=”hidden”』で要素を隠します。

<form class="params_set_target">
  <table>
    <tbody>
      <tr>
        <th>お名前</th>
        <td><input type="text" name="name" value="" placeholder="お名前を入力してください"></td>
        <th>メールアドレス</th>
        <td><input type="email" name="email" value="" placeholder="メールアドレスを入力してください"></td>
      </tr>
    </tbody>
  </table>
  <!-- UTMパラメータを受け取るhiddenフィールド -->
  <input type="hidden" class="utm_source" name="utm_source" value="">
  <input type="hidden" class="utm_medium" name="utm_medium" value="">
  <input type="hidden" class="utm_campaign" name="utm_campaign" value="">
  <input type="hidden" class="utm_term" name="utm_term" value="">
  <input type="hidden" class="utm_content" name="utm_content" value="">
</form>

Javascript

読み込みが終わってから実行します。

document.addEventListener("DOMContentLoaded", function() {});
カスタムパラメーターを取得する関数

『URLSearchParams()』でカスタムパラメーターを取得できます。
『return』の中でそれぞれのキーを指定して値を取得していきます。

function getQueryParams() {
  const params = new URLSearchParams(window.location.search);
  return {
    utm_source: params.get("utm_source") || "",
    utm_medium: params.get("utm_medium") || "",
    utm_campaign: params.get("utm_campaign") || "",
    utm_term: params.get("utm_term") || "",
    utm_content: params.get("utm_content") || ""
  };
}
セッションストレージにパラメータを保存する関数

パラメータを受け取り、その中に値があるかどうかをチェックして存在する場合だけセッションに追加します。

function saveUTMParamsToSession(params) {
  Object.keys(params).forEach(key => {
    if (params[key]) {
      sessionStorage.setItem(key, params[key]);
    }
  });
}
セッションストレージからパラメータを取得する関数

『sessionStorage.getItem()』で値を取得できますので、それぞれ取得して値を返します。

function getUTMParamsFromSession() {
  return {
    utm_source: sessionStorage.getItem("utm_source") || "",
    utm_medium: sessionStorage.getItem("utm_medium") || "",
    utm_campaign: sessionStorage.getItem("utm_campaign") || "",
    utm_term: sessionStorage.getItem("utm_term") || "",
    utm_content: sessionStorage.getItem("utm_content") || ""
  };
}
フォームにUTMパラメータをセットする関数

『document.querySelector(“.utm_source”)』でセットする入力フォームのクラス名を取得して『.value』で値を設定します。

発火条件の設定

初回アクセス時にパラメータを取得します。

const queryParams = getQueryParams();
saveUTMParamsToSession(queryParams);

パラメータを設定するフォームにクラス名が振ってあるので全てのフォームを取得、ループで処理します。
『.className』でフォームが持つクラス名を取得、あらかじめ名付けておいた『params_set_target』と合致した場合は処理を実行するようにします。

const forms = document.querySelectorAll('form');
forms.forEach((form) => {
  let formClass = form.className;
  if (formClass == "params_set_target") {
    const utmParams = getUTMParamsFromSession();
    setUTMParamsToForm(utmParams);
  }
});

以上で実装完了です。

まとめ

以上、『カスタムパラメータを取得してフォームにセットする方法』でした。
カスタムパラメータの操作はマーケティングでは必須になってきますので覚えておくと便利でしょう。

テラ合同会社

テラ合同会社(東京都)

テラは2014年に東京都でスタートアップしたホームページ制作会社です。ホームページ制作以外にも広告運用、マーケティング、ブランディング、印刷物など幅広い領域をサポートしています。
コーポレートサイトはこちらをご覧ください。

関連する記事

Popular

Category

Copyright © 2018 ホームページ制作のテラ.All Rights Reserved.