カスタムディメンションコードの追加

カスタムディメンションのコードをウェブサイトのソースコードに手動で埋め込む以外の方法として、下記の2つを利用する方法ががあります。

• VWOのコードエディタ

• Google Tag Manager(GTM)などのタグマネージャー

VWOのコードエディタで追加する方法

カスタムディメンションの プレキャンペーンJSは、テスト対象ページとゴールページの両方で動作します。一方、ポストキャンペーンJSは、テスト対象ページでのみ動作します。

Tips：キャンペーンが走っている時に限り、プレキャンペーン／ポストキャンペーンJSは実行されます。この手法は、実行中のテスト特有のデータをとらえるのに適しています。

• プレキャンペーンJSコードの追加

プレキャンペーンJSのコードを追加する場合は、Campaign JS/CSS をコードエディタ上でクリックし、プレキャンペーンJSのセクションにコードを入力します。詳しくは コードエディタのキャンペーンJS/CSSについて 記事中の Pre-Campaign JS をご参照ください。

• ポストキャンペーンJSの追加

ポストキャンペーンJSのコードを追加する場合には、Campaign JS/CSS をコードエディタ上でクリックし、ポストキャンペーンJSのセクションにコードを入力します。詳しくは コードエディタのキャンペーンJS/CSSについて 記事中の Post-Campaign JS をご参照ください。

Tips：カスタムディメンションがプレ／ポストキャンペーンJSで入力されている場合、有効な値がページ上に現れるまでは、全てのテスト対象及びゴールURLで動作します。

GTMで追加する方法

Google Tag Manager (GTM) を JavaScript や HTML タグの管理に利用している場合、カスタムディメンションのコードもGTMを利用してプッシュすることができます。

1. GTMにログインします。

2. GTMの管理画面で、タグ を選択します。

3. 新しいタグを作成するには、新規 をクリックして、新規ウィンドウを開きます。

4 .タグのタイプを選択するには、タグの設定 セクションをクリックします。

5 .タグの設定 > タグタイプを選択 から、カスタム HTML を選択します。

6. タグの設定 セクションのHTML欄に、VWOで作成したカスタムディメンションのJSコードを貼り付けます。カスタムディメンションコードは、VWO管理画面の 設定 > アカウント > CUSTOM DIMENSIONS にあります。

Attention：タグ名称やキーが正しく設定され、コード中の TAG_ VALUE が、カスタムディメンションに送る実際の値に変更されていることをご確認ください。

7. タグを発火させるトリガーを選択するには、トリガー ボタンをクリックします。

8. 全てのページ を選択すると、カスタムディメンションが全てのページで発火します。

Tips：用途に応じて、特定のページや要素にトリガーを追加することが可能です。例えば、「ボタンをクリック」をトリガー条件として設定し、ボタンの要素IDを指定すれば、GTMはサイトのビジターがそのボタンをクリックするたびに、イベントをトリガーします。