パラメータを設定しGA4で値を取得しようかなと思いJavascriptでパラメータを取得する方法を調べました。忘れないように備忘録を残します。
URLパラメータとは
URLパラメータ（別名：GETパラメータ、 リクエストパラメータ、クエリ文字列）とは、urlの主に末尾にある「?」以降の値のことです。この値をサーバーなどに情報を送ることが可能です。
例：https://programmer-life.work/?parameter1=1¶meter2=2
パラメータが複数ある場合は&で追加していきます。
実際にパラメータがどのように影響しているのか確認したい場合は有名どころのグーグル検索確認してみるとわかりやすいかもしれません。
例：https://www.google.com/search?q=あいうえお&num=20
上記のURLをChromeのURLに入力した場合グーグル検索で「あいうえお」を検索し20件の結果を画面に表示してくれます。
URLパラメータを取得する
書き方はいろいろありそうですがわかりやすいかなと思う書き方で書いていきます。
JavascriptでのURLパラメータの取得はまずwindow.locationオブジェクトとURLSearchParamsインターフェースを利用してURLパラメータを取得します。
window.locationでできること
window.locationの動きを軽くみます。
// https://programmer-life.work?id1=1&id2=2 の場合
let url = window.location;
console.log(url) //全ての情報を確認
console.log(url.href) // https://programmer-life.work?id1=1&id2=2
console.log(url.search); // ?id1=1&id2=2window.locationで値を取得すると以下のようなデータが取得できます。
Location {ancestorOrigins: DOMStringList, href: ‘https://programmer-life.work/?id1=1&id2=2’, origin: ‘https://programmer-life.work’, protocol: ‘https:’, host: ‘programmer-life.work’, …以下略}
console.log(url.href)ではhref情報を確認(現在表示しているurl)が確認でき、console.log(url.search);ではパラメータの値を取得しています。
これだけでもパラメータを取得できているとも言えますが、例えば、id1の値だけ取得したいなどの時に不便です。そこでURLSearchParamsも使っていきます。
window.locationとURLSearchParamsを使ってパラメータを取得
URLSearchParamsを使うことで色々な関数が使えるようになります。
以下簡単な例です。
// https://programmer-life.work?id1=1&id2=2&id2=value の場合
let url = window.location;
//URLSearchParamsへパラメータ(?id1=1&id2=2&id2=value)を渡す
const searchParams = new URLSearchParams(url.search);
// パラメータを全て表示
for (const p of searchParams) {
console.log(p); // ['id1', '1'] ['id2', '2'] ['id2', 'value']
}
// id1の値を取得
console.log(searchParams.get("id1")) // 1
// id2の値を全て取得
console.log(searchParams.getAll("id2")); // ['2', 'value']
// id3があるか
console.log(searchParams.has("id3")); // falseパラメータ一つ一つを取得したり、まてめて取得したり、キーとなる値が存在しているか確認したりなど簡単に行えるようになりました。
他にも関数はあるので気になる方は以下を確認してみるといいかと思います。
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
おわり
めちゃくちゃ便利ですね。知らなかったので正規表現でURLパラメータの値を引っ張ってこようかと思っていました。
