このページについて

テストを行う際に、「クリックトラッキングのゴールを使用したいが、HTMLを編集することができない…」と困ったことはありませんか？
本項では、そういった場合の解決法をご案内します。

クリックトラッキングについてはこちらのヘルプをご覧ください。

※エクスペリエンススクリプトに記述したJavaScriptは、エクスペリエンスが実行されるページにてKaizen対象外ユーザー・オリジナル案・デザイン案全てに実行されます。思わぬ不具合に繋がる可能性がありますので、十分に動作確認をしてから記述をしてください。なお、ご利用は自己責任にてお願いいたします。

※エクスペリエンススクリプトを使った方法をご案内しています。
※エクスペリエンススクリプトは使用方法を誤ると、デザインが反映されない・計測ができない等の問題が発生する可能性があります。→ラウンド開始前に計測ができているか確認しましょう。
※ここではサンプルコードを公開していますが、より複雑なコードの提供や、お客様のページに合わせたコードの提供は、サポート対象外となっております。ご了承ください。

 

 

こんなシチュエーションはありませんか？

冒頭に書いたように、クリックトラッキングを使って計測をしたいが、HTMLを編集することができない。
例1）セキュリティや技術面で、HTMLを編集することが困難である
例2）HTMLを編集するとなると、制作会社に依頼しなければならず、時間がかかってしまう

これらはエクスペリエンススクリプトを使えば解決できます。

エクスペリエンススクリプトについてはこちらのヘルプをご覧ください。

 

 

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

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

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

②href属性が指定されているか確認する

③エクスペリエンススクリプトを使って、クリックトラッキングのタグを設置する

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

 

 

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

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

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

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

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

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

 

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

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

このhref属性やaction属性が指定されていない場合、通常のクリックトラッキングタグでは計測できない場合があります。
そういった場合は、こちらのonclick属性を指定する必要があります。
クリックを取得したい箇所の構造に合わせて、どちらにするかをお選びください。

 

③エクスペリエンススクリプトを使って、クリックトラッキングのタグを設置する

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

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

$(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タグ」という指定の仕方をしています。

これをエクスペリエンスの詳細設定>エクスペリエンススクリプトに設定します。

 

 

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

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

クリックトラッキングのタグが追加されています！
実際にクリックして、計測ができるか、また、タグの設置によってリンクの機能が損なわれていないかを確認したら、完了です。
(※計測は1セッションに1度のみ行われます。なんども検証する際は、Cookie・localStorageを削除してください。)