従来の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広告管理画面の左側メニュー「目標」をクリックし、「コンバージョン」の「概要」をクリック


「新しいコンバージョンアクション」をクリック


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



「ウェブサイト」をクリック


futureshopで構築したECサイトのドメインを入力し「スキャン」をクリック


「手動でコンバージョンアクションを追加」をクリック



「コンバージョン アクションの詳細」ページにて設定して完了をクリック

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

項目名

選択内容

Googleマニュアル

目標とアクションの最適化

購入

 

コンバージョン名

(任意のものをご入力ください)

 

コンバージョンごとに異なる価値を割り当てる

日本円

1

マニュアル

カウント方法

全件

マニュアル

クリックスルー コンバージョンの計測期間

30日間

(お客様の検討期間が長い商材については90日間)

マニュアル

エンゲージ ビュー コンバージョンの計測期間

3日間

マニュアル

ビュースルー コンバージョン計測期間

1日間

マニュアル

アトリビューション モデル

データドリブン 

マニュアル


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


「完了」ボタンをクリック


元の画面に戻るとGoogleタグ箇所でエラー(もう一度やり直してください)が表示されますが、
ページ下部のステップでタグを設定するのでこちらはこのままで進めます。
作成したコンバージョンアクション名をクリックしてください。
10.jpg

イベント スニペットを使用してコンバージョンを個別に測定する箇所のイベントスニペットを確認をクリック

gtag('config', 'AW-XXXXXXXX');gtag('config', 'AW-XXXXXXXX');


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


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



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


閉じるをクリックした後、下部の「完了」をクリック

こちらで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', { ' allow_enhanced_conversions':true });
</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'
}
 
区切り文字

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

 

商品詳細ページ

出力設定

<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広告設定・運用相談受付フォームまでお問い合わせください。

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