Google Analytics で、Scrapbox のアクセス数を計測する

個人的に、Blogの下書きや、その他雑多なメモの管理にScrapboxを使っています。

Scrapbox には、GAタグの設定機能はなく、
UserScript - Scrapbox研究会という機能があり、この機能を使用すると、自分自身のアクセスについては、Google Analytics に情報を送付できますが、 パブリックページではUserScriptが使えません。

しかし、パブリックページではGoogle Analytics タグは設定できないのかというと、そうではなく、
Mesure Mentprocol で画像を設置すればできそうに思い、試しにやってみたら制限はありつつも計測はできたので、試した結果を記載します。

0. 目次

1. Google Analytics の Mesurement Protocol について

2. Scrapbox へのタグ設置方法
   2.1. 1. GAアカウント取得、プロパティの作成
   2.2. 2. Hit Builder で Mesurement Protocol のURLを生成する

3. Hit Builder で生成したURLを、Scrapbox に貼り付ける
   3.1. 3. Bookmarklet を作る

4. 制限事項

1. Google Analytics の Mesurement Protocol について

メールの開封のイベント計測などに使用される機能です。
計測イベントの種類に対応するURLを生成して、GETなり、POSTでHTTPリクエストを送ると、Google Analytics に情報を記録してくれます。
ちなみに、リファラースパムにも使われているという噂もあります。

以下に菅蓮する情報のリンクを記載します。

• メール開封率の取得

  • メルマガ開封率をアナリティクスで測定する簡単設置方法について | キーワードファインダー

• リファレンス

  • Measurement Protocol のリファレンス  |  アナリティクス Measurement Protocol

• URLビルダー

  • Hit Builder — Google Analytics Demos & Tools

2. Scrapbox へのタグ設置方法

以下、Scrapbox への GAタグ設置方法を記載します。

2.1. 1. GAアカウント取得、プロパティの作成

GAアカウントと、プロパティの作成は以下の記事が参考になるかと思います。

• Google Analytics（アナリティクス）アカウント登録、設定方法（アクセス解析 はじめの一歩） | ネットビジネス支援 情報サイト

scrapbox向けのアカウントですが、私は以下のように設定しました。

• アカウント名はscrapbox.io としました。
  

• 測定の対象はウェブにしました。
  

• ウェブサイト名は、scrapbox.io、URLは自分のアカウントURLを設定しました。
  

• 規約に同意する必要があるので、同意します。
  

アカウント発行され、プロパティが1つ追加されるので、追加されたプロパティのプロパティIDを取得します。
プロパティIDとは、UA-で始まるIDのことです。

2.2. 2. Hit Builder で Mesurement Protocol のURLを生成する

Hit Builder — Google Analytics Demos & Tools でMesurement Protocol のURLを生成します。

以下、URLを作成した際のスクリーンショットになります。

• 設定値について

  • v
    Mesurement Protocol の Version 番号です。 1を指定します。

  • t
    Hit Type です。 pageview を指定します。

  • tid
    GAプロパティのプロパティIDを指定します。

  • cid
    クライアントIDを指定します。制限事項として記載していますが、任意の値でOKです。

  • dp
    ページのPathを設定します。これは、計測ページごとに変更する必要があります。

  • ext
    Scrapbox にタグを貼り付けるためのダミーパラメータです。.jpgを値として設定します。
    URLに拡張子がないと、Scrapboxが画像として認識してくれなかったので、付与しています。

HitBuilderでコピーできる文字列に、Mesurement Protocoll のエンドポイントURLをつけると以下になります。

https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-164570404-1&cid=3469a46d-13d1-4494-8382-e90d2af2da18&dp=%2Fmonotalkxyz%2FScrapbox_%E3%81%A7_Google_Analytics_%E3%81%AE%E8%A8%88%E6%B8%AC%E3%82%92%E8%A1%8C%E3%81%86&ext=.jpg

3. Hit Builder で生成したURLを、Scrapbox に貼り付ける

Scraobox に、以下の形式でURLを貼り付けます。

[https://www.google-analytics.com/collect?v=1&t=pageview&tid=UA-164570404-1&cid=3469a46d-13d1-4494-8382-e90d2af2da18&dp=%2Fmonotalkxyz%2FScrapbox_%E3%81%A7_Google_Analytics_%E3%81%AE%E8%A8%88%E6%B8%AC%E3%82%92%E8%A1%8C%E3%81%86&ext=.jpg
]

これで、ページ表示時にページビュー が記録されます。

これは、メール開封の計測と同様に、img タグのsrc属性にMesurement Protocol のURLを設定して、
GETリクエストを送信し、GAに記録しています。

3.1. 3. Bookmarklet を作る

以下のようなBookmarkletを作成しました。
"UA-XXXXXXXXXXXXX" には発行したGAのプロパティIDを設定してください。

(function() {
    'use strict';
    function uuid() {
        var uuid = "", i, random;
        for (i = 0; i < 32; i++) {
            random = Math.random() * 16 | 0;

            if (i == 8 || i == 12 || i == 16 || i == 20) {
                uuid += "-";
            }
            uuid += (i == 12 ? 4 : (i == 16 ? (random & 3 | 8) : random)).toString(16);
        }
        return uuid;
    }
    var pathname = window.location.pathname;
    var propertyId = "UA-XXXXXXXXXXXXX";
    var cid = uuid();
    var url = "https://www.google-analytics.com/collect?v=1&t=pageview&tid=" + propertyId + "&cid=" + cid + "&dp=" + pathname + "&ext=.jpg";
    var temp = document.createElement('div');
    temp.appendChild(document.createElement('pre')).textContent = "[" + url + "]";
    var s = temp.style;
    s.position = 'fixed';
    s.left = '-100%';
    document.body.appendChild(temp);
    document.getSelection().selectAllChildren(temp);
    var result = document.execCommand('copy');
    document.body.removeChild(temp);
})();

このBookmarkletを計測したいページで、実行すると、対象画面に設定する画像URLが生成できます。
上記コードは、改行を含むため、Bookmarkletで実行する場合は、Bookmarklet Creator with Script Includer - Peter Colesで変換してください。

4. 制限事項

Google Analytics の仕様と、Scrapbox のページの作り上以下のような制約があります。

• Google Analytics ユーザー数、セッション数は正確に記録できない
  クライアントIDはユーザーごとに発行できないので、Mesurement Protocol のタグ上はサイト全体で同じ値か、もしくは、Bookmarkletでランダムに発行する形式になります。
  クライアントIDは、ユーザー数、セッション数の計算に使用されるので、正確に記録できません。

• 自分が編集中のページのページビュー も計測されてしまう
  ページ編集時に、編集ページにタグを設置しておくと、自分自身の閲覧もページビュー としてカウントされます。
  これはUserScriptを駆使すると、回避できるかもしれませんが、試しておりません。

• Scrapboxのページ一覧表示時に、各ページのページビューが記録される
  Scrapbox はページ一覧で画像のサムネイルを表示しますが、Mesurement Protocolの画像がサムネイルと認識されてしまいます。
  通常の画像があるページでは、その画像の下部に、設置するか、 画像のないページの場合は、ダミーのタグを埋め込んでおいて、その下にページビュー発行のためのタグを設定するのが良いかと思います。

かなり無理矢理な感じですが、Scrapbox のページビュー の測定ができました。
動作確認のために、以下のページに設置しています。
Scrapbox で Google Analytics の計測を行う - monotalkxyz

個人的には、Scrapboxで公開ページを作っていないので、現状、使用する機会がないですが、どうしても取得が必要なケースが出てきたらこの方法で計測しようかと思います。
以上です。