Googleタグマネージャーを利用したタグ設置

ecコンシェルはタグマネージャーを活用して導入することが可能です。 タグマネージャーを活用してサイトに設置する場合の設置法について記載いたします。

目次

 

 

【準備】 

タグマネージャーのアカウント開設からサイト登録までは、Googleタグマネージャー公式サイトをご確認ください。
本手順では、タグマネージャーアカウントを取得し、貴社サイトにタグマネージャーの導入が完了した時点から説明をしております。 

 

 

【計測タグ】の導入 

 

  1. 埋め込みたいサイトのダッシュボードを開き、「タグ」をクリックしてください。



  2. 新規ボタンをクリックしてください。



  3. タグの設定より「タグタイプを選択して設定を開始」をクリックしてください。
  4. タグタイプを選択メニューより「カスタムHTML」を選択してください。
  5. ecコンシェルの管理画面・タグページから計測タグをコピーし、HTML枠内に貼り付けてください。
  6. タグの設定より「トリガーを選択してこのタグを配信」をクリックしてください。
  7. トリガーの選択の「＋」をクリックしてください。
  8. トリガーの設定より「トリガーのタイプを選択して設定を開始」をクリックしてください。
  9. トリガーのタイプを選択メニューより「ページビュー」を選択してください。
  10. トリガーの設定を以下の様に設定します。
    ① トリガーの種類：ページビュー
    ② このトリガーの発生場所：一部のページビュー
    ③ カートページ、コンバージョンページでの配信を除外するため、該当のPage Pathを除く指定をします。
    例）カートページ：https://example.com/cart
    例）コンバージョンページ：https://example.com/orders/214809835（動的文字列付与）


  11. 保存ボタンのクリックで計測タグの設定完了となります。

 

 

【カートタグ】の導入 

 

  1. タグページより新規ボタンをクリックしてください。



  2. タグの設定より「タグタイプを選択して設定を開始」をクリックしてください。



  3. タグタイプを選択メニューより「カスタムHTML」を選択してください。
  4. ecコンシェルの管理画面・タグページからカートタグをコピーし、HTML枠内に貼り付けてください。
    「カート内金額が○○円以上は送料無料」等のカート内合計金額に応じた接客を利用する場合（カート内合計金額を保有する変数が参照できる場合）は、「カート内合計金額」の部分を以下の様に変更してください。

    カート内合計金額に応じた接客を利用する場合
    • （置換前）ara.push(['cart', {/*cartPrice:カート内合計金額*/}]);
    • （置換後）ara.push(['cart', {cartPrice:{{cart_total_price}}}]);
      ※コメントアウト部の開始「/*」と終了「*/」を削除してください。
      ※cart_total_priceに設定する値には "," などの記号を含めずに整数となるように渡して下さい。（例 : 10,000 -> 10000）
      ※Googleタグマネージャー上でカート内合計金額を保有する変数名を cart_total_price と設定した場合の変更例となります。変数の設定方法に応じて適宜変更してください。
  5. タグの設定より「トリガーを選択してこのタグを配信」をクリックしてください。
  6. トリガーの選択の「＋」をクリックしてください。
  7. トリガーの設定より「トリガーのタイプを選択して設定を開始」をクリックしてください。
  8. トリガーのタイプを選択メニューより「ページビュー」を選択してください。
  9. トリガーの設定を以下の様に設定します。
    ① トリガーの種類：ページビュー
    ② このトリガーの発生場所：一部のページビュー
    ③ カートページのみで配信するため、該当のPage Pathを含む指定をします。
    例）カートページ：https://example.com/cart

  10. 保存ボタンのクリックでカートタグの設定完了となります。



 

 

【コンバージョンタグ】の導入  

 

  1. タグページより新規ボタンをクリックしてください。



  2. タグの設定より「タグタイプを選択して設定を開始」をクリックしてください。
  3. タグタイプを選択メニューより「カスタムHTML」を選択してください。



  4. ecコンシェルの管理画面・タグページからコンバージョンタグをコピーし、HTML枠内に貼り付けてください。
    売上効果を測定する場合（購入完了時の合計金額を保有する変数が参照できる場合）は、「合計金額」の部分を以下の様に変更してください。


    HTML枠内に貼り付けるコンバージョンタグ 
    <script>
if (document.location.href.search('gtm-msr.appspot') == -1) {
  (function(w,d,url,a,s,e){
    w[a]= (w[a]||[]);
    s = d.getElementsByTagName("script")[0];e = d.createElement("script");e.src=url;e.async=1;s.parentNode.insertBefore(e,s);
  })(window,document,'//ec-concier.com/サイト識別子/analytics.js','ara');
  ara.push(['init','サイト識別子']);ara.push(['conversion_type', {conversion_type:'goal'/*,sumValue:合計金額*/}]);
}
</script>
    ※「if (document.location.href.search('gtm-msr.appspot') == -1) {...}」の指定は、Googleタグマネージャを利用している環境でコンバージョンを正しく計測するために必要です。
    ※「サイト識別子」にはecコンシェルで登録したサイトごとの識別子を入力してください。

    売上効果を測定する場合
    • （置換前）ara.push(['conversion_type', {conversion_type:'goal'/*,sumValue:合計金額*/}]);
    • （置換後）ara.push(['conversion_type', {conversion_type:'goal',sumValue:{{total_price}}}]);
      ※コメントアウト部の開始「/*」と終了「*/」を削除してください（「sumValue:」の直前の「,」は残す）。
      ※ total_price に設定する値には "," などの記号を含めずに整数となるように渡して下さい。（例 : 10,000 -> 10000）
      ※Googleタグマネージャー上で購入完了時の合計金額を保有する変数名を total_price と設定した場合の変更例となります。変数の設定方法に応じて適宜変更してください。
  5. タグの設定より「トリガーを選択してこのタグを配信」をクリックしてください。
  6. トリガーの選択の「＋」をクリックしてください。
  7. トリガーの設定より「トリガーのタイプを選択して設定を開始」をクリックしてください。
  8. トリガーのタイプを選択メニューより「ページビュー」を選択してください。
  9. トリガーの設定を以下の様に設定します。
    ① トリガーの種類：ページビュー
    ② 一部のページビュー
    ③ コンバージョンページのみで配信するため、該当のPage Pathを含む指定をします。
    例）コンバージョンページ：https://example.com/orders/214809835（動的文字列付与）

  10. 保存ボタンのクリックでコンバージョンタグの設定完了となります。

 

 

【変数】の設定

 

  1. 変数ページでカートタグ、コンバージョンタグに記載した変数名で変数を設定してください。
    ※変数の設定方法は、導入サイトの構成に応じて設定をお願いたします。

 

 

【タグ】の公開

 

  1. 公開をクリックし、設定したタグを公開してください。
    前回の公開以後ワークスペース内で変更された全ての内容がサイトに反映されますのでお気をつけください。

    ※【参考】タグの動作確認
    タグが設置されているかどうかを確認する場合、公開ボタンの右側を押下すると、「プレビューとデバッグ」モードを利用することができます。プレビューを押下したあと、ecコンシェルを設置したいサイトを閲覧するとそのサイト内で動作しているタグが確認できますので、参考までご利用ください。