先日、フォームのinputタグでURLパラメータを取得する実装を行いました。
備忘録のためにメモ残しておきます。
背景
- 広告の流入元を知るため、以下3つのパラメータを取得したい
- utm_source
- utm_medium
- utm_campaign
- 取得したパラメータをフォームで送信したい
URLパラメータとは
プログラムに情報を送信するため、URLの末尾についた文字列
https://hogehoge.co.jp?○○○=×××
パラメータの種類（？）
utm_source：どこからの流入なのかを分類
utm_medium：どのメディアからの流入なのかを分類
utm_campaign：メルマガなど広告を条件ごとに絞って分析する
utm_term：有料検索での「キーワード」を分析
utm_content：一つの広告に同一のURLを複数入れている場合、どの「コンテンツ」から流入したかを分類
実装内容
大まかな流れ
- HTMLでinputタグを作成
- JavaScriptでパラメータを取得
- 取得したパラメータをinputタグのvalueに入れる
- フォーム送信
例のURL
https://hogehoge.co.jp?utm_source=hoge&utm_medium=fuga&utm_campaign=piyo
HTMLでinputタグを作成
index.html
<input type="hidden" name="utm_source" value=""></input>
<input type="hidden" name="utm_medium" value=""></input>
<input type="hidden" name="utm_campaign" value=""></input>
ユーザーに入力してほしいものではないのでtype="hidden"にして見えなくしています。
JavaScriptでパラメータを取得＆取得したパラメータをinputタグのvalueに入れる
form.js
// パラメータを取得
const params = new URLSearchParams(location.search);
// 取得したそれぞれのパラメータをそれぞれのinputタグのvalueに入れる
document.getElementsByName("utm_source")[0].value = params.get("utm_source");
document.getElementsByName("utm_medium")[0].value = params.get("utm_medium");
document.getElementsByName("utm_campaign")[0].value = params.get("utm_campaign");
下記のような形で、それぞれのパラメータがそれぞれのinputタグのvalueに入る
<input type="hidden" name="utm_source" value="hoge"></input>
<input type="hidden" name="utm_medium" value="fuga"></input>
<input type="hidden" name="utm_campaign" value="piyo"></input>
参考
すごく参考になりました！ありがとうございます