WEB制作、マーケティングに関する情報をお届けします。

URLパラメーターとは、流入経路などを把握し、アクセス解析、マーケティングでよく使用されますが、PHPでパラメーターを取得することでユーザーによって処理を切り替えることができます。
本記事では「JavascriptでURLパラメーターを取得、値に応じて処理を分岐させる方法」を紹介します。

コードの紹介

document.addEventListener('DOMContentLoaded', function() {
    // URLからクエリパラメータを取得する関数
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}

    // 'param' パラメータを取得
    const paramValue = getQueryParam('param');

    // 'param' の値によって処理を分岐
    if (paramValue === 'yellow') {
        //ここにyellowの場合の処理
    } else {
        //ここにyellow以外の場合の処理
    }
});

コードの解説

以下でHTMLソースが読み込まれてから実行させています。

document.addEventListener('DOMContentLoaded', function() {
});

以下でURLのパラメーターを取得する関数を作成します。

function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
const paramValue = getQueryParam('param');

値によって分岐させています。

if (paramValue === 'yellow') {
    //ここにyellowの場合の処理
} else {
    //ここにyellow以外の場合の処理
}