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

JavascriptでURLパラメーターを取得、値に応じて処理を分岐させる方法

タグ:

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

コードの紹介

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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以外の場合の処理
}
});
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以外の場合の処理 } });
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ソースが読み込まれてから実行させています。

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
document.addEventListener('DOMContentLoaded', function() {
});
document.addEventListener('DOMContentLoaded', function() { });
document.addEventListener('DOMContentLoaded', function() {
});

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
function getQueryParam(param) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(param);
}
const paramValue = getQueryParam('param');
function getQueryParam(param) { const urlParams = new URLSearchParams(window.location.search); return urlParams.get(param); } const paramValue = getQueryParam('param');
function getQueryParam(param) {
    const urlParams = new URLSearchParams(window.location.search);
    return urlParams.get(param);
}
const paramValue = getQueryParam('param');

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

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
if (paramValue === 'yellow') {
//ここにyellowの場合の処理
} else {
//ここにyellow以外の場合の処理
}
if (paramValue === 'yellow') { //ここにyellowの場合の処理 } else { //ここにyellow以外の場合の処理 }
if (paramValue === 'yellow') {
    //ここにyellowの場合の処理
} else {
    //ここにyellow以外の場合の処理
}

テラ合同会社(東京都)

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