tips

特定ページへの初回訪問かどうかを見分ける

jQueryなどを使って初回訪問時のみアクションを加えたい。でもクッキーなんて使いたくない。

…という場合には、ウインドウ名を利用して簡易的に判断する方法が有効です。javascriptで表示中のURLからファイル名（ベースのスラッグ）を取得し、ウインドウ名に加える処理を行います。

verify first time visitor or not

<script type="text/javascript">

    //verify first time visitor or not in the pages
    var $currentpath = window.location.pathname.replace(///, '').replace(/./, '').replace(/_/, '-'); // 表示中のページのファイル名を取得する
    if ( !$currentpath ) $currentpath = "homepage"; // トップページ（ファイル名が存在しない場合）に登録する任意のファイル名
    if ( window.name.indexOf( '#' + $currentpath )!=-1 ) { //ウィンドウ名に現在のファイル名が含まれるかチェック
        alert( "I've seen you before!" ); // リロードや２度目以降の訪問時の処理
    } else { 
        window.name = window.name + '#' + $currentpath; // ウィンドウ名の末尾にファイル名を追加する、#はエスケープ処理
        alert( "It's nice to see you!" ); // 初回訪問時の処理
    }

</script>

チェックしたいページ全てに記述する必要があります。ウインドウ名を利用しているので別窓で開くと無効になります。

なお、ウインドウ名には文字数制限（255文字かな？）があるはずなので、動的サイトで全体のアクセス履歴を書き込んでいくのは無理があります。また、ウィンドウ名に指定できるのは半角英数字のみです。なのでwordpressなどのCMSに埋め込むなら、トップページや固定ページ内だけなどに絞って、何かアクションさせたいときに使いましょう。wordpressなどのCMSで埋め込むなら、ページテンプレートやホームテンプレート内で使用し、らpathnameを取得する手続きをカットし、直接phpでpost IDを使った名前を代入する方が、処理も早くて文字数も抑えられます。以下はWPで実際に私が使ってる感じに近いもの。

var currentid = <?php echo "'p$post->ID#'"; ?>; // #はエスケープ処理
if ( window.name.indexOf( currentid ) == -1 ) { // 初アクセス 
    window.name = window.name + currentid; // ウィンドウ名の末尾にファイル名を追加する
    //以下処理が続く
}

 

そもそもユーザーがホームページへの初回訪問かどうかを判別する場合

おまけ。

ニュースなどのウインドウをポップアップしたいときなど、すべてのページでユーザーが初回訪問かどうか有効にしたいときもあります。この場合、チェックしたい各ページ全てに記述する必要があります。

<script type="text/javascript">

    //verify first time visitor or not in the site
    var $my_window = "my_homepage";　// 任意のウィンドウ名を指定
    if ( window.name.indexOf( $my_window )!=-1 ) { //任意のウインドウ名かチェック
        alert( "I've seen you before!" ); // ２度目以降の訪問時の処理
    } else { 
        window.name = $my_window; // ウィンドウ名を任意に名付ける
        alert( "It's nice to see you!" ); // 初回訪問時の処理
    }

</script>

とにかく外部からのアクセス時の一回だけでいい、という場合は以下のようにシンプルに処理する方法もあります。リファラを見ているので、別ウインドウで開いても大丈夫ですし、該当するページ一箇所に記述するだけで済みます。しかしスクリプトの設置の有無で判別できないので、サブディレクトリ以下でのみチェックをしたい場合には不向きです。

<script type="text/javascript">

    //verify first time visitor or not in the site
    
    if( document.referrer.indexOf( "//example.com" )!=-1 ) {  { //リファラにアドレスが含まれているか。
        alert( "I've seen you before!" ); // ２度目以降の訪問時の処理
    } else { 
        alert( "It's nice to see you!" ); // 初回訪問時の処理
    }

</script>