HTMLを編集せずにクリックトラッキングのタグを追加する – Kaizen Platform(サイト改善) ヘルプセンター

概要

このページでは、クリックトラッキングのタグを設置したいページの修正に時間がかかってしまうなど、クリックトラッキングのタグの設置が難しい場合の解決法について記載します。

クリックトラッキングについて知りたい方は、クリックトラッキング型ゴールを設定するをご参照ください。

クリックトラッキングを使って計測をしたい時に、

セキュリティや技術面で、HTMLを編集することが困難である
HTMLを編集するとなると、制作会社に依頼しなければならず、時間がかかってしまう

といった事情がある場合、「エクスペリエンススクリプト」を利用することで、KaizenPlatformのツールのみで完結させることができます。

※ある程度、HTMLとJavaScriptにご理解のある方による閲覧・実装を推奨しております。

エクスペリエンススクリプトとは

「エクスペリエンス > 詳細設定」の最下部にある、JavaScriptを記述できる項目です。

エクスペリエンススクリプト利用上の注意

エクスペリエンススクリプトに記述したJavaScriptは、そのエクスペリエンスが実行されるページにて、Kaizen対象外ユーザー・オリジナル案・デザイン案全てに実行されます。
思わぬ不具合に繋がる可能性がありますので、十分に動作確認をしてから記述をしてください。
なお、ご利用は自己責任にてお願いいたします。
エクスペリエンススクリプトは使用方法を誤ると、デザインが反映されない・計測ができない等の問題が発生する可能性があります。
JavaScriptコードステータスを活用するを参考に、エクスペリエンススクリプトを設定した後に計測ができているか、必ず確認してください。
ここではサンプルコードを公開していますが、より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。
エクスペリエンススクリプトは、テスト対象が「ページ修正（スプリットURL）」の場合、動作しません。

エクスペリエンススクリプトを記述するための準備

エクスペリエンススクリプトを設定するまでの手順は以下の通りです。

1. クリックトラッキングを設置したい箇所のHTMLを確認し、要素を特定する
2. href属性が指定されているか確認する
3. エクスペリエンススクリプトに落とし込む
4. HTMLを確認し、設置できているか、設置によって元の機能が損なわれていないか確認する

1. クリックトラッキングを設置したい箇所のHTMLを確認し、要素を特定する

ここではブラウザは、Google Chromeを使用します。

今回デモのために、架空の通販ページをご用意しました。
※架空の通販ページのため、実際にお買い物することはできません。また、動作するリンクはログイン/ログアウトと一部存在する商品のリンクのみとなっており、本物のログイン機能は実装されておりません。

クリックトラッキングを設置したい箇所は、「ショップ内の商品リンク」とします。

では、商品リンク部分のHTMLを確認してみましょう。
command+option+i(windowsはF12)でGoogleの検証を開いてください。
該当部分の要素を調べるには、下記の図のように、選択モードを使うと簡単です。

この通販ページでは、商品リンクが3つ存在しています。
3つとも、「intro」というクラス名が付けられたdiv要素の中に、リンクが設定されており、同じ構造となっています。

2. href属性、action属性が指定されているか確認する

クリックトラッキングを設置したいリンクやボタンに、「href属性」や「action属性」が指定されているかを確認してください。
herf属性・action属性とは、リンクの遷移先や、フォームの送信先を指定している箇所のことです。

このhref属性やaction属性が指定されていない場合、通常のクリックトラッキングのタグでは計測できない場合があります。
詳細はクリックトラッキング型ゴールを設定する APIを利用するをご確認の上、クリックを取得したい箇所の構造に合わせて、どちらのクリックトラッキングタグを設置するかをお選びください。

3. エクスペリエンススクリプトに落とし込む

今回の要件を改めて整理すると、「商品リンクにクリックトラッキングのタグを設置したい」となります。

これをエクスペリエンススクリプトにすると、こうなります。

$(function() {
$('.intro > a').attr("data-kz-track-on-click", "XXXXX");
//"XXXXX"に設置するゴールのIDを入れてください
});

また、href属性やaction属性が設定されていない場合、下記のようになります。

$(function() {
$('.intro > a').attr("onclick", "try{kzs('trackClickGoals',ゴールID)}catch(e){}");
//"XXXXX"に設置するゴールのIDを入れてください
});

今回の場合、aタグにクラスが付けられていないため、「introというクラスの直下にあるaタグ」という指定の仕方をしています。

これを「エクスペリエンスの詳細設定 > エクスペリエンススクリプト」に記述します。
「正しいJavaScriptの文法です」と表示されたら、エクスペリエンス編集画面右上の「保存する」をクリックしてください。

4. HTMLを確認し、設置できているか、設置によって元の機能が損なわれていないかを確認する

エクスペリエンススクリプトの反映には少し時間がかかるため、10分ほど経ってから、ページを確認してみてください。

正しい要素に、正しいIDのクリックトラッキングのタグが設置できているかを確認してください。
実際にクリックして、計測ができるか、また、タグの設置によって元のリンクの機能が損なわれていないかを確認したら、完了です。

※計測は1セッションに1度のみ行われます。何度も検証する際は、cookie・localStorageを削除してください。

概要