どんな時に使えますか?
下記は一例ですが、このような場合に使用をおすすめします。
- アプリダウンロードを目的とした接客の場合に、
アプリダウンロード完了ページにタグが設置出来ないため、コンバージョンが計測できない。 - ページの到達ではなく、ボタンが押された時にコンバージョン計測したい。
何ができますか?
通常のコンバージョンはコンバージョンページへと到達することで計測されますが
本マニュアルの通りに設定を行うことでHTML上の要素、
例えばボタンや画像などがクリックされた時にもコンバージョンを計測できるようになります。
※本マニュアルはGoogleタグマネージャーを利用した設定になりますが、
Googleタグマネージャーを利用しない場合もタグをHTMLに記述していただくことで利用可能です。
前提条件
- 計測タグを設置済み
- Googleタグマネージャーを導入済み
設定手順
- コンバージョンタイプを登録する
- Googleタグマネージャーでコンバージョンタグを作成する
- webページからクリックコンバージョンとする要素を取得する
- Googleタグマネージャーで配信トリガーを設定する
- タグを公開する
- キャンペーン登録時に1.のコンバージョンタイプを設定する
備考
1. コンバージョンタイプを登録する
要素クリックをコンバージョンとするコンバージョンタイプを登録します。
下記の例ではタイプ名をクリック、タイプ識別子をclickと設定しています。
2. Googleタグマネージャーでコンバージョンタグを作成する
Googleタグマネージャーでコンバージョンタグを作成します。
Googleタグマネージャーのダッシュボードを開き、「タグ」をクリックした後、「新規」をクリックしてください。
タグの設定をクリックすると、タグタイプを選択するメニューが表示されます。
カスタムHTMLを選択してください。
HTMLタグの入力欄に下記タグをコピーして貼り付けてください。
タイプ識別子には1.で設定したコンバージョンタイプのタイプ識別子を入力してください。
※CSSセレクタについては手順3.で説明します。
(ここをクリックすると下記のコードをコピーできます。)
<script>
(function (){
var dom = document.querySelector('CSSセレクタ');
var cv = function (){
ara.push(['conversion_type', {conversion_type:'タイプ識別子'}]);
}
dom.addEventListener('click', cv);
}());
</script>
ここまでの設定が完了しましたら、次の手順3.に移ります。
3. webページからクリックコンバージョンとしたい要素を取得する
GoogleChromeの検証ツールを使い「クリックコンバージョンとしたい要素」を取得します。
検証ツールの起動は下記のキーを入力することで可能です。
※Windows:F12
※Mac:option + command + i
※スマートフォンとPCでサイトのデザインが変わる場合は、別々にタグを用意する必要がある場合がございます。
その場合はこちらをご覧ください。
検証ツールを起動後、画像の手順に従って設定を行ってください。
Copy selectorをクリックするとCSSセレクタがコピーされた状態になります。
コピーして得られた値を手順2.で設定したタグの下記赤字部分にペーストしてください。
(ここをクリックすると下記のコードをコピーできます。)
<script>
(function (){
var dom = document.querySelector('この部分にCopy selectorした値をペースト');
var cv = function (){
ara.push(['conversion_type', {conversion_type:'タイプ識別子'}]);
}
dom.addEventListener('click', cv);
}());
</script>
※シングルクォート「'」を消してしまわないように注意してください。
ここまでの手順が完了しましたら、次の手順4.に移ります。
4. Googleタグマネージャーで配信トリガーを設定する
次は設定したタグの配信先を決定するためのトリガーを設定します。
タグの設定の下にあるトリガーをクリックし、開いたウィンドウの「+」をクリックします。
トリガーの設定画面が開きます。任意のトリガー名を設定し、トリガーの設定をクリックします。
トリガーのタイプを選択するメニューが表示されます。ページビューを選択します。
トリガーの配信設定を行います。クリックCVを行うページを設定してください。
例1: https://example.com/ に配信を行う場合
このトリガーの発生場所:一部のページビュー
Page Path 等しい / と指定します。
例2: https://example.com/example/test.html に配信を行う場合
Page Path 等しい /example/test.html と指定します。
例3: https://example.com/exam?test=123 に配信を行う場合
Page URL 等しい https://example.com/exam?test=123 と指定します。
ここまでの全工程を完了し、最後に保存ボタンをクリックすることでタグの設定完了となります。
5. タグを公開する
公開をクリックし、設定したタグを公開してください。
前回の公開以後ワークスペース内で変更された全ての内容がサイトに反映されますのでお気をつけください。
※【参考】タグの動作確認
タグが設置されているかどうかを確認する場合、プレビューボタンを押下すると、「プレビューとデバッグ」モードを利用することができます。プレビューを押下したあと、タグを設置したいページを閲覧するとそのサイト内で動作しているタグが確認できますので、参考までご利用ください。
6. キャンペーン登録時に1.のコンバージョンタイプを設定する
キャンペーン編集 > なにを > コンバージョンタイプ にて、
手順1.で登録したコンバージョンタイプを選択します。
キャンペーン登録については、こちらのドキュメントをご参照ください。
スマートフォンとPCでサイトデザインが異なる場合
スマートフォンとPCでサイトデザインが異なる場合は、別々にタグを用意していただく必要がある場合がございます。
スマートフォンとPCで別のタグを用意する必要がある場合はどんな時?
手順3.を行った後に得られたCSSセレクタの値が
PCサイトとスマートフォンサイトで異なる場合はタグを別々に用意する必要がございます。
※CSSセレクタの値が変わらない場合は別々にタグを用意する必要はありません。
スマートフォン用サイトから要素を取得する場合は、下記画像の手順を行った後に手順3.をご覧ください。
コンソールエラーが出る場合
Uncaught TypeError: Cannot read property 'addEventListener' of null
上記のようなエラーが出る場合、CSSセレクタの設定を間違っている可能性があります。
その場合はタグが正しくコピーできているか、CSSセレクタが正しく取得できているか今一度ご確認ください。
タグの一部が削除されたり、CSSセレクタがシングルクォートで囲まれていない等がある場合正常に動作しません。