個人的に、Blogの下書きや、その他雑多なメモの管理にScrapboxを使っています。
Scrapbox には、GAタグの設定機能はなく、
UserScript - Scrapbox研究会という機能があり、この機能を使用すると、自分自身のアクセスについては、Google Analytics に情報を送付できますが、
パブリックページではUserScriptが使えません。
しかし、パブリックページではGoogle Analytics タグは設定できないのかというと、そうではなく、
Mesure Mentprocol で画像を設置すればできそうに思い、試しにやってみたら制限はありつつも計測はできたので、試した結果を記載します。
0. 目次
-
Scrapbox へのタグ設置方法
2.1. 1. GAアカウント取得、プロパティの作成
2.2. 2. Hit Builder で Mesurement Protocol のURLを生成する -
Hit Builder で生成したURLを、Scrapbox に貼り付ける
3.1. 3. Bookmarklet を作る
1. Google Analytics の Mesurement Protocol について
メールの開封のイベント計測などに使用される機能です。
計測イベントの種類に対応するURLを生成して、GETなり、POSTでHTTPリクエストを送ると、Google Analytics に情報を記録してくれます。
ちなみに、リファラースパムにも使われているという噂もあります。
以下に菅蓮する情報のリンクを記載します。
-
メール開封率の取得
-
リファレンス
-
URLビルダー
2. Scrapbox へのタグ設置方法
以下、Scrapbox への GAタグ設置方法を記載します。
2.1. 1. GAアカウント取得、プロパティの作成
GAアカウントと、プロパティの作成は以下の記事が参考になるかと思います。
scrapbox向けのアカウントですが、私は以下のように設定しました。
アカウント発行され、プロパティが1つ追加されるので、追加されたプロパティのプロパティIDを取得します。
プロパティIDとは、UA-
で始まるIDのことです。
2.2. 2. Hit Builder で Mesurement Protocol のURLを生成する
Hit Builder — Google Analytics Demos & Tools でMesurement Protocol の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
特にこだわりがなければ、下記に記載している Bookmarklet のGAのプロパティIDを変更してもらって使うで良いと思います。
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で公開ページを作っていないので、現状、使用する機会がないですが、どうしても取得が必要なケースが出てきたらこの方法で計測しようかと思います。
以上です。
コメント