自作アクセス解析の作成と失敗談原因はjQuery.noConflict()

自分のブログを運営する以上、アクセスがどれくらいあるのかは知りたい物です。無料で使えるアクセス解析はありますが、どうもデータが正確に取得できていないような気がするので自作したことがあります。

作成方法ですが、JavaScriptとPHPを組み合わせます。JavaScriptならアクセス元のページや実際にスクロールされたかどうかもわかります。

以下のスクリプトを書くことでページへのアクセスがあったこと、リンクがクリックされたこと、スクロールされたことを検出することができます。スクロールされるたびに記録しようとするとサーバーに負荷がかかるのでスクロールされたら30秒間は記録しないことにします。アクセスが多いサイトの場合はこの時間は長めにとったほうがよいと思われます。

またjQueryを使うので、この1行が必要です。

これをHTMLの最後の方に書きます。記述例として

<!-- bodyタグの最後のほうに -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://lets-csharp.com/analyze/analyze.js"></script>

</body>
</html>

</body>

</html>

analyze.jsの内容を示します。

let phpurl = "後述するPHPファイルをアップロードしたurl";
let timeout = 1000 * 30; // millisecond.

let width = $(window).width(); // ブラウザのウィンドウサイズを取得 これでPCかスマホかだいたいわかる
let flag = true;
let scroll = 0; // スクロール量を取得

let url = location.href;

$(function() {
    var prev_page = document.referrer;

    $.get(phpurl, {
        scroll:0,
        width:width,
        cur_page:url,
        prev_page:prev_page,
        next_page:"",
        action:"In",
    });

    $('a').click (function (){
        val = $(this).attr("href");
        var next_page = val;

        $.get(phpurl,{
            scroll:scroll,
            width:width,
            cur_page:url,
            prev_page:"",
            next_page:next_page,
            action:"Click!!",
        });
    });

    $(window).scroll(function() {
        if(flag){
            flag = false;
            setTimeout(function(){
                scroll = $(this).scrollTop();
                $.get(phpurl,{
                    scroll:scroll,
                    width:width,
                    cur_page:url,
                    prev_page:"",
                    next_page:"",
                    action:"Scroll",
                });
                flag = true;
            }, timeout);
        }
    });
});

let phpurl = "後述するPHPファイルをアップロードしたurl";

let timeout = 1000 * 30; // millisecond.

let width = $(window).width(); // ブラウザのウィンドウサイズを取得これでPCかスマホかだいたいわかる

let flag = true;

let scroll = 0; // スクロール量を取得

let url = location.href;

$(function() {

var prev_page = document.referrer;

$.get(phpurl, {

scroll:0,

width:width,

cur_page:url,

prev_page:prev_page,

next_page:"",

action:"In",

});

$('a').click (function (){

val = $(this).attr("href");

var next_page = val;

$.get(phpurl,{

scroll:scroll,

width:width,

cur_page:url,

prev_page:"",

next_page:next_page,

action:"Click!!",

});

$(window).scroll(function() {

if(flag){

flag = false;

setTimeout(function(){

scroll = $(this).scrollTop();

$.get(phpurl,{

scroll:scroll,

width:width,

cur_page:url,

prev_page:"",

next_page:"",

action:"Scroll",

});

flag = true;

}, timeout);

}

});

次にPHPですが、$_GETをつかってアクセスされたページ、アクセス元（ブックマークなどの場合はなにも取得されない）、リンクがクリックされた場合はリンク先のurlを取得することができます。

それから$_SERVER[‘HTTP_REFERER’]でリファラーを取得しています。これなら不正なリクエストがおこなわれた場合、おかしなログが記録されることがありません。

<?php

SaveLog();

function SaveLog(){
    $cur_page = "";
    $cur_page = $_GET["cur_page"];

    $scroll   = 0;
    $scroll   = $_GET["scroll"];

    $action = "";
    $action = $_GET["action"];

    $width = "";
    $width = $_GET["width"];

    $prev_page = "";
    $prev_page = $_GET["prev_page"];

    $next_page = "";
    $next_page = $_GET["next_page"];

    $date = date("Y-m-d");
    $now = date("H:i:s");

    // 上記のJavaScriptファイルはhttps://lets-csharp.com/のどこかにアップロードされているのが前提
    $referer = $_SERVER['HTTP_REFERER'];
    if(strpos($referer,'https://lets-csharp.com/')  === false)
        return;

    // ファイル名はアクセスがあった日時とする
    $filename = date("Y-m-d"). ".csv";

    // ページのurl、アクセス元、スクロールの状態などを記録する
    $logdata = "$date,$now,$width,$action,$scroll,$cur_page,From $prev_page,To $next_page";

    $exists = "y";
    if (file_exists($filename)) {
        $exists = "y";
    } else {
        $exists = "n";
    }

    if (!$fp = fopen($filename,"a")){ }
    flock($fp,LOCK_EX);

    // ファイルがない場合は新しくファイルを作成してutf8のBOMを書き込む
    if($exists == "n")
        fwrite($fp, "\xEF\xBB\xBF");

    fwrite($fp,"$logdata\n");
    flock($fp,LOCK_UN);
    fclose($fp);
    chmod($filename,0666);   // ファイルのモードを変更 第二引数は8進法で指定
}

<?php

SaveLog();

function SaveLog(){

$cur_page = "";

$cur_page = $_GET["cur_page"];

$scroll = 0;

$scroll = $_GET["scroll"];

$action = "";

$action = $_GET["action"];

$width = "";

$width = $_GET["width"];

$prev_page = "";

$prev_page = $_GET["prev_page"];

$next_page = "";

$next_page = $_GET["next_page"];

$date = date("Y-m-d");

$now = date("H:i:s");

// 上記のJavaScriptファイルはhttps://lets-csharp.com/のどこかにアップロードされているのが前提

$referer = $_SERVER['HTTP_REFERER'];

if(strpos($referer,'https://lets-csharp.com/') === false)

return;

// ファイル名はアクセスがあった日時とする

$filename = date("Y-m-d"). ".csv";

// ページのurl、アクセス元、スクロールの状態などを記録する

$logdata = "$date,$now,$width,$action,$scroll,$cur_page,From $prev_page,To $next_page";

$exists = "y";

if (file_exists($filename)) {

$exists = "y";

} else {

$exists = "n";

}

if (!$fp = fopen($filename,"a")){ }

flock($fp,LOCK_EX);

// ファイルがない場合は新しくファイルを作成してutf8のBOMを書き込む

if($exists == "n")

fwrite($fp, "\xEF\xBB\xBF");

fwrite($fp,"$logdata\n");

flock($fp,LOCK_UN);

fclose($fp);

chmod($filename,0666); // ファイルのモードを変更第二引数は8進法で指定

}

これでアクセス解析をおこなうことができていたのですが、ある日を境にアクセスが激減。1年半にわたって運営してきた当サイトもついにGoogleから嫌われたのかと思ったら、Googleアナリティクスではアクセスはこれまで同様に存在することがわかりました。それからJavaScriptで作成したゲームを公開しているページは何の問題もなく動いています。

なぜだろう？　このかんやったことといえば

PHPを8.0にアップデート
ワードプレスを5.8にアップデート

などがありました。

それからサーチコンソールで CLS（Cumulative Layout Shift）が0.1を上回っていると指摘されたので、それを解消するプラグインを入れたのもこの頃です。

それでこれまで動いていたものが動かなくなったのかな？

トップページのHTMLをそのままコピーして別の場所にアップロードしてアクセス解析ができるかやってみると動かない。そこで1行ずつ削除して調べていると、ある行が原因であることがわかりました。JavaScriptを読み込んでいる部分なのですが、それをみてみると、その先頭部分にこんなものが・・・。

jQuery.noConflict()

これは$関数の動作が先に定義されている動作に戻るというもので、$関数を定義する複数のライブラリを用いた際に衝突することを防ぐものです。noConflictを使った場合、jQueryオブジェクトの呼び出しには明確に’jQuery’と書かなければなりません。

ということで以下のように書き直すと動くようになりました。めでたしめでたし。

let phpurl = "PHPファイルをアップロードしたurl";
let timeout = 1000 * 30; // millisecond.

let width = jQuery(window).width();
let flag = true;
let scroll = 0;

let url = location.href;

jQuery(function() {
    var prev_page = document.referrer;

    jQuery.get(phpurl, {
        scroll:0,
        width:width,
        cur_page:url,
        prev_page:prev_page,
        next_page:"",
        action:"In",
    });

    jQuery('a').click (function (){
        val = jQuery(this).attr("href");
        var next_page = val;

        jQuery.get(phpurl,{
            scroll:scroll,
            width:width,
            cur_page:url,
            prev_page:"",
            next_page:next_page,
            action:"Click!!",
        });
    });

    jQuery(window).scroll(function() {
        if(flag){
            flag = false;
            setTimeout(function(){
                scroll = jQuery(this).scrollTop();
                jQuery.get(phpurl,{
                    scroll:scroll,
                    width:width,
                    cur_page:url,
                    prev_page:"",
                    next_page:"",
                    action:"Scroll",
                });
                flag = true;
            }, timeout);
        }
    });
});

let phpurl = "PHPファイルをアップロードしたurl";

let timeout = 1000 * 30; // millisecond.

let width = jQuery(window).width();

let flag = true;

let scroll = 0;

let url = location.href;

jQuery(function() {

var prev_page = document.referrer;

jQuery.get(phpurl, {

scroll:0,

width:width,

cur_page:url,

prev_page:prev_page,

next_page:"",

action:"In",

});

jQuery('a').click (function (){

val = jQuery(this).attr("href");

var next_page = val;

jQuery.get(phpurl,{

scroll:scroll,

width:width,

cur_page:url,

prev_page:"",

next_page:next_page,

action:"Click!!",

});

jQuery(window).scroll(function() {

if(flag){

flag = false;

setTimeout(function(){

scroll = jQuery(this).scrollTop();

jQuery.get(phpurl,{

scroll:scroll,

width:width,

cur_page:url,

prev_page:"",

next_page:"",

action:"Scroll",

});

flag = true;

}, timeout);

}

});

自作アクセス解析の作成と失敗談原因はjQuery.noConflict()

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ