【便利ツール】 サイトカタリストで計測しているページ名(s.pageName)を簡単に確認するスクリプト

サイカタのページ名を1ページ、1ページ、ソースで確認するのはめんどくさすぎる!というときに便利なツールの紹介です。

今回、作ったのは、SiteCatalyst(新名称:Adobe Analytics)でページ名をどのように計測されているか確認するときに、ブックマークひと押しで確認できるスクリプトです。実際のサイトのURLとサイトカタリストで計測されているページ名がどうつながっているのか不明なんてときに便利かと思います。

実行結果

該当ページを開いて、ブックマークをひと押しすると…
黒い箱が現れて、サイカタの計測されているページ名が表示されます。

screenshoffft.667

使用方法

①ブラウザ(Chromeなど)でどこかのサイトのブックマークを作成

②ブックマークを編集
名前:(任意の名称)例:SCページ名確認
URL:以下のスクリプトを入力(1行で保存)

スクリプト

javascript:/* jQueryの読み込み確認 */ if(typeof jQuery == "undefined"){ loadJQuery();}function loadJQuery(){var script=document.createElement("script");script.setAttribute("src","//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js");script.setAttribute("type","text/javascript");document.body.appendChild(script);}/* s.pageName判定 */ if(typeof s =="undefined"){ sc_name = "s.pageNameなし" }else{ sc_name = s.pageName;}jQuery("body").append("<span class='pop_span'>"+sc_name+"</span>");var style1 = "<style type='text/css'>.pop_parent {position: relative;} .pop_a {position: relative;}.pop_span {line-height: 15px;text-indent: 0;text-align: left;display: block;top: 2em;left: 1em;border: 1px solid #ccc;padding: 1em;background: #000;position: absolute;letter-spacing: 0em;font-size: 20px;font-weight: 900;color: #FFF;font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E%E8%A7%92%E3%82%B4 ProN W3',Meiryo,%E3%83%A1%E3%82%A4%E3%83%AA%E3%82%AA,sans-serif;z-index: 999999;margin-top: -20px;}.outline1{outline:3px solid #00f}.outline2{outline:3px solid #0f0}</style>";jQuery("head").append(style1);

スクリプト 2014/8/21更新版

javascript:/* jQueryの読み込み確認 */ if(typeof jQuery == "undefined"){ loadJQuery();}function loadJQuery(){var script=document.createElement("script");script.setAttribute("src","//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js");script.setAttribute("type","text/javascript");document.body.appendChild(script);}/* s.pageName判定 */ if(typeof s =="undefined"){ sc_name = "s.pageNameなし" }else{ sc_name = s.pageName;}jQuery("body").append("<span class='pop_span'>"+sc_name+"</span>");var style1 = "<style type='text/css'>.pop_parent {position: relative;} .pop_a {position: relative;}.pop_span {line-height: 15px;text-indent: 0;text-align: left;display: block;top: 2em;left: 1em;border: 1px solid #ccc;padding: 1em;background: #000;position: absolute;letter-spacing: 0em;font-size: 20px;font-weight: 900;color: #FFF;font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','%E3%83%92%E3%83%A9%E3%82%AE%E3%83%8E%E8%A7%92%E3%82%B4 ProN W3',Meiryo,%E3%83%A1%E3%82%A4%E3%83%AA%E3%82%AA,sans-serif;z-index: 99988999;margin-top: -20px;}.outline1{outline:3px solid #00f}.outline2{outline:3px solid #0f0}</style>";jQuery("head").append(style1);

スクリプト 2015/1/23更新版

ページタイトルとフルURL、サイカタ名を取得するように改良しました。
さらに背景色を透過させて、ページ固定からウィンドウ固定位置に変更しています。

screenshot.805

javascript: /* jQueryの読み込み確認 */ if (typeof jQuery == "undefined") {
    loadJQuery();
}
function loadJQuery() {
    var script = document.createElement("script");
    script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js");
    script.setAttribute("type", "text/javascript");
    document.body.appendChild(script);
} /* s.pageName判定 */
if (typeof s == "undefined") {
    sc_name = document.title + "<br />" + location.href + "<br />" + "s.pageNameなし";
} else {
    sc_name = document.title + "<br />" + location.href + "<br />" + s.pageName;
}
jQuery("body").append("<span class='pop_span'>" + sc_name + "</span>");
var style1 = "<style type='text/css'>.pop_parent {
    position: relative;
}

.pop_a {
    position: relative;
}

.pop_span {
    line-height: 1.4em;
    text-indent: 0;
    text-align: left;
    display: block;
    top: 2em;
    left: 1em;
    border: 1px solid #ccc;
    padding: 1em;
    background-color: rgba(0,0,0,0.5);
    position: fixed;
    margin:0;
    top:10px;
    left:10px;
    letter-spacing: 0em;
    font-size: 15px;
    font-weight:100;
    color: #FFF;
    font-family: 'Lucida Grande','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',Meiryo,メイリオ,sans-serif;
    z-index: 99988999;
}

.outline1 {
    outline: 3px solid #00f
}

.outline2 {
    outline: 3px solid #0f0
}

</style>";
jQuery("head").append(style1);

③ページ名を確認したいページを開く

④作成したブックマークを実行

⑤実行結果がページの左上の黒いボックスに表示されます。

  • サイトカタリストで計測あり(s.pageNameがソースにあり) → ページ名が表示
  • サイトカタリストで計測なし(s.pageNameがソースになし) → undefineと表示されます。

場合によっては2回押さないと反応しない場合があります。
jQueryがソースに読み込まれていない場合は、1回クリックで読み込み、2回目で実行となるためです。

いくつか確認してみました

スクリプトをいくつかのサイトで実行してみました。

例でも上げましたが、カルピス

screenshot.663

味の素

screenshot.665

イケア

screenshot.664

このサイト、ツマミグイ。

ちなみにサイカタは入っていないので、undefined(未定義)です。

screenshot.666

さいごに

ページ名が正しく付与されていなくて、集計に苦戦することも多々あります。そんなことのないように、計測タグを実装する際には、プロに依頼するか、もしくはきちんとした知識を身に着けて実装することが大切です。足りない知識は、書籍等で学んでください。

入門 ウェブ分析論 ―― アクセス解析を成果につなげるための新・基礎知識 増補改訂版
小川 卓
ソフトバンククリエイティブ
売り上げランキング: 18,744
ウェブ解析力 ROI(投資対効果)を最大化するアクセス解析の実践的ノウハウ90
村上 知紀 手崎 佳充
翔泳社
売り上げランキング: 189,810
PROFESSIONAL アクセス解析
PROFESSIONAL アクセス解析
posted with amazlet at 14.08.05
衣袋 宏美
技術評論社
売り上げランキング: 259,995

あなたにオススメ(Amazon)

あなたにオススメ(楽天)