従来のfutureshop利用店舗様:Google広告のコンバージョンの設定をしたいです。どうしたらいいですか?

コマースクリエイター未利用店舗様専用の記事です。
コマースクリエイター利用店舗様はこちらの記事をご確認ください。

Googleショッピング広告や、Google広告のP-MAXキャンペーンなど、
Goole広告にて設定した内容で正しくコンバージョンを測定する場合、
Google広告側と、futureshop側でそれぞれ設定が必要です。

本ページでそれぞれご紹介いたします。

  1. Google広告で設定する
  2. Google広告から出力したタグを確認する
  3. futureshop管理画面:任意測定タグ設定で設定する
  4. futureshop管理画面:コメントパターン一覧で設定する
  5. futureshop管理画面:各ページ設定で設定する
  6. futureshop管理画面:コメントパターン一覧(モバイル)で設定する
  7. futureshop管理画面:各ページ設定(モバイル)で設定する

 

1.Google広告で設定する

Google広告管理画面の左側メニュー「目標」>「コンバージョン」>「概要」をクリック後、「新しいコンバージョンアクション」をクリック
18.png



<既にコンバージョン設定を行っている場合はこのような画面>



「ウェブサイトで発生したコンバージョン」にチェックを入れ、「URLを追加」をクリックします。

 

futureshopで構築したECサイトのドメインを入力し「スキャン」をクリック。
サイトにGoogleタグが設定されてたら「サイトに設定済み」と表示が出ます。
※Googleタグがまだ設定されていない場合は「まだ実装されていません」と表示されますが、気にせずに先に進めてください。

 

「購入」をクリックします。

 

コードを使って手動で設定する」を選択し、「コンバージョン設定」を開きます。

 

コンバージョン設定に関しては必要に応じて店舗様にてご調整をお願いします。

※値に関しては「コンバージョン毎に異なる価値を割り当てる」が推奨です。

  • 設定項目につきまして不明な点がございましたら、マニュアルをご確認の上、必要に応じてGoogle広告ご担当者様までご確認をお願いいたします。
  • Google広告管理画面の設定がうまくいかない・その他広告運用のご相談があれば、
    WEB広告設定・運用相談受付フォームまでお問い合わせください。


入力できたら「完了」ボタンをクリックします。


「保存して次へ」ボタンをクリック

 

「もう少しで完了です。」の表示がされたら、下までスクロールして「完了」ボタンをクリックします。

 

元の画面に戻るので、もう一度左側メニュー「目標」>「コンバージョン」>「概要」をクリックし、「購入」カテゴリを展開して、作成したコンバージョンアクション名をクリック


「タグを自分で追加する」をクリック
10.png

※Googleタグとイベントスニペットで表示されるHTMLタグ(イベントスニペット)をコピーし、メモ帳などに控える
(もしくはダウンロードをクリックしてテキストファイルをダウンロード)

11.png

イベントスニペット箇所の選択は「ページの読み込み」のままで、
表示されるHTMLタグ(イベントスニペット)をコピーし、メモ帳などに控える
(もしくは「ダウンロード」をクリックしてテキストファイルをダウンロード)

12.png

こちらでGoogle広告側の設定は完了です。

 

 

2.Google広告から出力したタグを確認する

Google広告管理画面からは2つのタグを出力しました。
1つは「Googleタグ」、もう1つは「イベントスニペット」です。

 

Googleタグ

Googleタグは下記のようなタグです。
(XXXXXXXX箇所は固有の数字が入ります。)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>

このタグはECサイト全体に埋め込むことを推奨されています。
Googleタグはfutureshop管理画面で設定するにあたって、青字箇所のように変更していただく必要があります。

 

イベントスニペット

イベントスニペットの下記のようなタグです。
(XXXXXXXX箇所は固有の数字が、YYYYYY〜箇所は固有の英数字が入ります)

<!-- Event snippet for 購入  conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'AW-XXXXXXXX/YYYYYYYYYYYYYYYYYYYY',
'value': 1.0,
'currency': 'JPY',
'transaction_id': ''
});
</script>

上記Google広告側の設定とタグの確認が終わりましたら、
今度はfutureshop管理画面側で設定が必要です。
futureshop管理画面では下記5ページで設定が必要です。
(モバイルページはモバイルオプション契約店舗のみ)

  • 構築>プロモーション管理>任意測定タグ設定
  • 構築>ページ設定>コメントパターン一覧
  • 構築>ページ設定>各ページ設定
  • モバイル>ページ設定>コメントパターン一覧
  • モバイル>ページ設定>各ページ設定

 

 

3.futureshop管理画面:任意測定タグ設定で設定する

構築>プロモーション管理>任意測定タグ設定 と進み、
「任意測定タグ 新規登録」をクリックし、下記の通り設定をお願いします。

測定タグ設定

全体出力設定

「各ページの出力設定を有効にする」のチェックを入れる

 

設定名

「Google広告」など任意の文言を設定

 

商品一覧ページ

出力設定

<head>タグ内に出力する

 

出力内容

下記2つのタグの記載が必要です。

  • Google広告管理画面でコピーしたGoogleタグ
  • 商品一覧ページ用のイベントトラッキングタグ

全てのタグを記載すると下記のようになります。
(XXXXXXXX箇所は固有の数字が入ります。)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>
<script>
gtag('event','view_item_list', {
'items': [$ITEM_INFO$
]
});
</script>

 

Google広告管理画面でコピーしたGoogleタグ
XXXXXXXX箇所は固有の数字が入ります。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>

 

商品一覧ページ用のイベントトラッキングタグ

<script>
gtag('event','view_item_list', {
'items': [$ITEM_INFO$
]
});
</script>

 
商品情報置換文字($ITEM_INFO$)の設定

{
'id': $GOODS_ID$,
'google_business_vertical': 'retail'
}

 
区切り文字

「,」(半角カンマ)を入力

 

最大出力件数

100

 

商品詳細ページ

出力設定

<head>タグ内に出力する

 
出力内容

Google広告管理画面でコピーしたGoogleタグを設定

 

ショッピングカートページ

出力設定

<head>タグ内に出力する

 
出力内容

下記2つのタグの記載が必要です。

  • Google広告管理画面でコピーしたGoogleタグ
  • ショッピングカートページ用のイベントトラッキングタグ

全てのタグを記載すると下記のようになります。
(XXXXXXXX箇所は固有の数字が入ります。)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>
<script>
gtag('event','add_to_cart', {
'items': [$ITEM_INFO$
]
});
</script>

 

Google広告管理画面でコピーしたGoogleタグ
XXXXXXXX箇所は固有の数字が入ります。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>

 

ショッピングカートページ用のイベントトラッキングタグ

<script>
gtag('event','add_to_cart', {
'items': [$ITEM_INFO$
]
});
</script>

 
商品情報置換文字($ITEM_INFO$)の設定

{
'id': $GOODS_ID$,
'google_business_vertical': 'retail'
}

 
区切り文字

「,」(半角カンマ)を入力

 

注文完了ページ

出力設定

<head>タグ内に出力する

 

出力内容

下記3つのタグの記載が必要です。

  • Google広告画面からダウンロードしたGoogleタグ
  • Google広告画面からダウンロードしたイベントスニペット(コンバージョン)を編集したタグ
  • イベントスニペット(購入)タグ

全てのタグを記載すると下記のようになります。
(XXXXXXXX,YYYYYYYYYYYYYYYYYYYYは店舗様によって異なります)

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>

<!-- Event snippet for 購入 conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'AW-XXXXXXXX/YYYYYYYYYYYYYYYYYYYY',
'value': $TOTAL_BUY_GOODS_PRICE_WITH_OPTION$,
'currency': 'JPY',
'transaction_id': '$ORDER_ID$'
});
</script>

<script>
gtag('event','purchase', {
'value': $TOTAL_BUY_GOODS_PRICE$,
'items': [$ITEM_INFO$
]
});
</script>

 

Google広告管理画面でコピーしたGoogleタグ

XXXXXXXX箇所は固有の数字が入ります。

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'AW-XXXXXXXX');
</script>

 

Google広告画面からダウンロードしたイベントスニペット(コンバージョン)を編集したタグ

イベントスニペット(コンバージョン)の'value'の行'transaction_id'の行を変更してください。

<!-- Event snippet for 購入 conversion page -->
<script>
 gtag('event', 'conversion', {
     'send_to': 'AW-XXXXXXXX/YYYYYYYYYYYYYYYYYYYY',
     'value': 1.0,
     'currency': 'JPY',
     'transaction_id': ''
 });
</script>

<!-- Event snippet for 購入 conversion page -->
<script>
gtag('event', 'conversion', {
'send_to': 'AW-XXXXXXXX/YYYYYYYYYYYYYYYYYYYY',
'value': $TOTAL_BUY_GOODS_PRICE_WITH_OPTION$,
'currency': 'JPY',
'transaction_id': '$ORDER_ID$'
});
</script>

 

イベントスニペット(購入)

<script>
gtag('event','purchase', {
'value': $TOTAL_BUY_GOODS_PRICE$,
'items': [$ITEM_INFO$
]
});
</script>

 

商品情報置換文字($ITEM_INFO$)の設定

{
'id': $GOODS_ID$,
'google_business_vertical': 'retail'
}

 
区切り文字

「,」(半角カンマ)を入力

設定後「登録する」をクリックしてください。

 

 

4.futureshop管理画面:コメントパターン一覧で設定する

構築>ページ設定>コメントパターン一覧と進み「パターン新規登録」をクリックしてください。
その後、下記のコメント内容のコメントパターンを作成してください。
 

  • コメントパターンは2つ作成が必要です。
コメント名 動的リマケ_商品詳細用
コメント内容
HTMLタグを使用する
チェックを入れる
入力欄

<script>
gtag('event','view_item', {
'value': $GOOGLE_ADWORDS_PVALUE$,
'items': [
{
'id': $GOOGLE_ADWORDS_PRODID$,
'google_business_vertical': 'retail'
}
]
});
</script>

 

コメント名 動的リマケ_カート用
コメント内容 HTMLタグを使用する チェックを入れる
入力欄

<script>
gtag('event','add_to_cart', {
'value': $GOOGLE_ADWORDS_TOTALVALUE$,
});
</script>

 

 

5.futureshop管理画面:各ページ設定で設定する

構築>ページ設定>各ページ設定と進み、作成したコメントパターンを下記に設定してください。
 

  • 上部/下部どちらに設定しても構いません。
  • 上部・下部どちらも設定している場合は、
    すでに設定しているコメントパターンにタグを追記するなど、ご調整をお願いします。
     
コメントパターン 設定するページ
動的リマケ_商品詳細用 商品タブ>商品詳細
動的リマケ_カート用 カートタブ>ショッピングカート

 

 

6.futureshop管理画面:コメントパターン一覧(モバイル)で設定する

モバイル>ページ設定>コメントパターン一覧と進み「パターン新規登録」をクリックしてください。
その後、下記のコメント内容のコメントパターンを作成してください。
 

  • コメントパターンは2つ作成が必要です。
コメント名 動的リマケ_商品詳細用
コメント内容 HTMLタグを使用する チェックを入れる
入力欄

<script>
gtag('event','view_item', {
'value': $GOOGLE_ADWORDS_PVALUE$,
'items': [
{
'id': $GOOGLE_ADWORDS_PRODID$,
'google_business_vertical': 'retail'
}
]
});
</script>

 

コメント名 動的リマケ_カート用
コメント内容 HTMLタグを使用する チェックを入れる
入力欄

<script>
gtag('event','add_to_cart', {
'value': $GOOGLE_ADWORDS_TOTALVALUE$,
});
</script>

 

 

7.futureshop管理画面:各ページ設定(モバイル)で設定する

モバイル>ページ設定>各ページ設定と進み、作成したコメントパターンを下記に設定してください。
 

  • 上部/下部どちらに設定しても構いません。
  • 上部・下部どちらも設定している場合は、
    すでに設定しているコメントパターンにタグを追記するなど、ご調整をお願いします。
コメントパターン 設定するページ
動的リマケ_商品詳細用 商品タブ>商品詳細
動的リマケ_カート用 カートタブ>ショッピングカート



 

その他:設定や広告運用に不明点があれば…

Google広告管理画面の設定がうまくいかない・その他広告運用のご相談があれば、
WEB広告設定・運用相談受付フォームまでお問い合わせください。

この記事は役に立ちましたか?