用途
新着
履歴
分類


JS 値を一定期間保持してABテスト

JS 値を一定期間保持してABテスト
JS 値を一定期間保持してABテスト
cookieを利用して一定の時間、同じ人に同じものを表示して、別のコンテンツをだし分けるサンプルです。

このサンプルでは1日同じアルファベットを表示するサンプルです。

初回のアクセスでA・B・Cのどれかを表示して、その値をブラウザのcookieに保存します。

次回から保存された値を表示し、24時間で再度抽選を行います。

」を1日ブラウザに記録しています。

このサンプルは、jQueryを利用しています。

JS

$(function(){
    var t_type;

    
    if(GetCookie("t_type")){
        t_type = GetCookie("t_type");
    }else{
        var rnum = Math.floor(Math.random()*3);
        //0から3以下の乱数を生成して少数点切り捨て
        if(rnum === 1){
            t_type="A";
        }else if(rnum ===2){
            t_type="B";
        }else{
            t_type="C";
        }

        //cookie書き込み
        t_type_enc = encodeURIComponent(t_type);
        limit_sec = 60*60*24; //一日
        cookie_string = 't_type='+t_type_enc+'; '
        cookie_string +=  'max-age='+limit_sec+'; ';
        cookie_string += 'path=/; '
        document.cookie = cookie_string;
    }

    //わかりやすくアルファベットで条件分岐
    if(t_type==="A"){
        $(".demo_val_text").html('A');
    }else if(t_type==="B"){
        $(".demo_val_text").html('B');
    }else{
        $(".demo_val_text").html('C');
    }
});


function GetCookie( cookieName )
{
    //cookieの名前に一致する値を読み込む
    var result = null;
    var indexOfName = cookieName + '=';
    var AllCookie = document.cookie;
    var position = AllCookie.indexOf( indexOfName );
    if( position != -1 )
    {
        var startIndex = position + indexOfName.length;
        var endIndex = AllCookie.indexOf( ';', startIndex );
        if( endIndex == -1 )
        {
            endIndex = AllCookie.length;
        }
        result = decodeURIComponent(
            AllCookie.substring( startIndex, endIndex ) );
    }
    return result;
}

css

    #demo_val {
        width: 100px;
        height: 100px;
        line-height: 100px;
        font-size: 50px;
        background-color: #333;
        color: #FFF;
        text-align: center;
        border-radius: 10px;
        margin: 20px auto;
    }
公開 2021-12-07 11:29:07
更新 2021-12-07 11:36:33
このページの二次元コード

同じカテゴリーのサンプル

人気のサンプル

search -  category -  about
© 2022 kipure
Top