ウェブサイト分析ハック集: JavaScript ドキュメント オブジェクト モデル

この記事は、Web 分析の第一人者である Eric T. Peterson 氏の著書「Web Site Measurement Hacks」からの抜粋です。

– HACK #30「JavaScript ドキュメント オブジェクト モデルをハックする」

Web 分析ソリューションでは通常、JavaScript ドキュメント オブジェクト モデル (DOM) の使用方法を理解したタグ付けアプローチが使用されます。

ほとんどの Web 分析ツール プロバイダーは JavaScript ドキュメント オブジェクト モデル (DOM) を広範に使用しているため、プロバイダーのコードが独自の JavaScript コードに干渉するかどうかが懸念されるかもしれません。さらに重要なのは、サービス プロバイダーがデータを収集するために DOM が提供する可能性のあるすべてのデータを使用することについても考慮する必要があることです。

DOM によって提供される情報の例をいくつか示します。

● ブラウザ版

● オペレーティングシステムの時間

● オペレーティングシステムの言語

● ディスプレイの解像度

● ディスプレイの色深度

● ブラウザの高さと幅

● フォーム分析

ドキュメント オブジェクト モデル (DOM) は、Web ブラウザーと JavaScript がドキュメント (つまりページ) 情報を保存および取得するために使用するデータ構造です (図 2-16)。 JavaScript および JavaScript 開発者は、DOM を使用してデータを収集し、データ情報を表示します。 Webページ監視タグの挿入からWebサイトのユーザー情報の収集まで、DOMが中心となります。図 2-16 は DOM コンポーネントの一部のみを示していますが、これにより DOM の全体構造が明確に示されています。 window オブジェクトは、他のすべての要素にアクセスできるルート ノードです。各オブジェクトには関数、プロパティ、イベントがあり、他のオブジェクトが含まれています。 JavaScript を使用すると、DOM のすべての要素にアクセスしたり制御したりできます。これについては、次の章で詳しく説明します。

図2-16 JavaScriptドキュメントオブジェクトモデル

監視タグを挿入

ご想像のとおり、タグベースの Web サイト データ収集方法で最も重要なのはタグ (目に見えない GIF 画像 Hack #29) です。ページに監視タグを挿入するには、サーバー側のイメージタグ ジェネレーターを使用する方法と、クライアント側の JavaScript を使用する方法の 2 つが主に存在します。 JavaScript を通じてイメージタグを作成することで、Web サイト分析ツールプロバイダーは可能な限り多くの情報を収集できますが、サーバー側で作成されたイメージタグを通じては、多くのユーザーの情報を収集することはできません。

ドキュメント オブジェクトの書き込み関数を使用すると、HTML ドキュメントに HTML と JavaScript を書き込むことができます。次のコードは例です。

<スクリプト言語=”JavaScript”>
<!—
window.document.write(“<img src='/images/loading.gif' data-original='http://visionalist.cn/images/1×1.gif' />”);
// –>
</スクリプト>

これは、DOM の構造はいつでも変更できることを示しています。この例では、ドキュメント オブジェクトを使用してドキュメントに要素を追加します。この要素は画像です。画像が挿入されたので、DOM を通じて画像にアクセスできるようになりました。

JavaScript ドキュメント オブジェクト モデル内の要素はいつでも位置を変更できます。

ドキュメント情報を取得する

次に、画像設定が非常に重要です。この画像の目的は、ページ、ブラウザ、ユーザーに関する情報を収集することです。この情報も DOM を通じて取得されます。ここでは、DOM を通じてページの URL を取得し、この URL を監視タグに含めようとします。

<スクリプト言語=”JavaScript”>
<!—
var url = window.localtion.href;
window.document.write(“<img src='/images/loading.gif' data-original='http://visionalist.cn/images/1×1.gif?url='”+url+” />”);
// –>
</スクリプト>

幸いなことに、DOM を通じて収集できる情報は、上記で示した URL だけではありません。たとえば、ページレイアウト、マルチメディアサポート、フォームデザインなどの情報を提供できます。次に、ページレイアウトを見てみましょう。

ブラウザの幅を取得する

ウェブページ全体をブラウザウィンドウの左半分に配置すると、貴重なリソース（空白スペース）の一部が無視される可能性があります。開発者に友人のブラウザの幅を聞いてもらう代わりに、DOM を使用して無駄なスペースがあるかどうかをクライアントに尋ねます。

ウィンドウのオフセット幅。

IE の最近のバージョンでは、上記のコードはブラウザ ウィンドウのピクセル値を返すことができます。この固有のプロパティはすべてのブラウザで使用できるわけではありませんが、ほとんどのブラウザでは、同様のプロパティを通じて同じ情報が提供されます。使用している Web サイト分析ツールがこの情報のレポートを提供しない場合は、次のコードを使用して自分で取得できます。データの並べ替えを容易にするために、幅は 50 ピクセル単位に丸められます。

var 幅 = window.document.documentElement.offsetWidth;
var width=Math.round(width/50)*50; // 幅は50ピクセルに丸められます

フォーム入力エラーの追跡

これまでのところ、DOM は主に Web ページやブラウザに関する情報を収集するために使用されています。実際、DOM を使用してページ上のユーザーアクションを監視することもできます。たとえば、ユーザーがフォームを使用するかどうか、またフォームをどのように使用するかなどを監視します。 DOM を使用すると、イベントが発生すると、対応するイベント ハンドラー関数が呼び出されます。ほとんどの Web サイトでは JavaScript ベースのフォーム エラー検証を使用していますが、これらのサイトでは通常、フォーム内で最もエラーが発生しやすい項目を追跡できません。次の例は、エラー検証機能を使用してフォーム エラーを記録する方法を示しています。

checkError 関数を定義した後、フォームが送信されると (onsubmit イベント)、JavaScript は DOM を使用して関数を呼び出します。 checkError 関数では、sendErrorInfo という関数も呼び出されることに注意してください。ウェブサイト分析ツールは、ページ上に画像を生成し、エラー情報をデータ収集サーバーに送信する同様の機能メソッドを提供します。最後に、サイト上で最も一般的なフォーム エラーを示すレポート (次のセクションで説明) が表示されます。

関数 checkError() {
// クレジットカード番号が16桁かどうか確認する
if ( window.document.forms[0].creditcard.value.length!=16 ) {
sendErrorInfo(window.document.forms[0].name, "クレジットカードエラー: 長さ");
false を返します。
}
// さらなるエラーチェック
true を返します。
}
// フォームが送信されたときにcheckError関数を呼び出す
window.document.forms[0].onsubmit=チェックエラー;

フォーム分析 – DOM からの恵み

これで、DOM を使用して画像を生成し、ブラウザ情報を収集してユーザーの操作を監視する方法がわかりました。この情報を組み合わせて、貴重な統計ツールを作成できます。 DOM は貴重なビジネス情報を提供し、ユーザー エクスペリエンスの微妙な点に関する洞察を提供します。たとえば、フォームのどの項目がユーザーにとって耐えられないものかがわかります。クレジットカードのアカウント、髪の色、母親の旧姓、隣人の電話番号など、入力する情報が多すぎませんか? どのステップで潜在顧客を失いましたか?

ユーザーがページを離れるときに、JavaScript と DOM を使用して情報を送信 (ページ内に画像を生成する) し、ユーザーがページを離れる前に最後にアクセスしたフォーム項目を知ることができます。おそらく、このフォーム項目はユーザーが我慢できない部分です。図 2-17 のレポートは、Checkout-Shipping ページの ShippingInfo フォームを示しています。注目すべきは、フォームが正常に送信された回数が 154 回であるのに対し、ユーザーがフォームをクリックせずにページを離れた回数が 202 回あったことです。もう 1 つのポイントは、ほとんどのユーザーが PhoneNumber フィールドをクリックした後に離脱してしまうことです。

図2-17 シンプルなフォームプロジェクト分析

すべてのアナリストは、顧客の真のニーズを理解するために顧客のオフィスに直接出向きたいと考えています。DOM は、その願いを叶えることができます。すべての Web 分析ツールと同様に、この情報収集方法では 100% のユーザーが収集されるわけではありませんが、サイトにアクセスするユーザーの 95% が JavaScript を有効にしているため、収集される情報は「統計的に有意なサンプル」以上のものになります。ウェブサイトには収集する必要のある情報が他にもたくさんあり、私たちはこれらすべての情報を解き明かすことができる「人」を見つける必要があるだけです。

— ブレット・エラー、ジョン・ペスターナ、エリック・T・ピーターソン

（著作権はDigital Forest Website Analysis Blogに帰属します。転載は歓迎しますが、出典を明記してください。）

原文: http://blog.digitalforest.cn/hacks-30-javascript

原題: ウェブサイト分析ハックセレクションシリーズ JavaScript ドキュメントオブジェクトモデル

キーワード: ウェブサイトの分類、ハック、選択、シリーズ、JavaScript、ドキュメント、ウェブマスター、ウェブサイトのプロモーション、収益化