Google Chromeを利用したタグの設置確認方法 – ecコンシェルサポートサイト

Google Chromeの検証機能を利用して、次のステップで確認作業を進めます。

　ステップ1　ページ内にecコンシェルのタグが設置されていることの確認
　ステップ2　タグ設置済みページでjavascriptエラーが発生していないことの確認
　ステップ3　設置済みタグが正常に作動することの確認

【ステップ1　ページ内にecコンシェルのタグが設置されていることの確認】

Google Chromeを使用して、ecコンシェルのタグが設置されているページ（HTML）を表示します。
ページが表示されているウィンドウの任意の場所を右クリックして現れるコンテキストメニューから「検証(I)」を選択して、デベロッパー・ツールを表示します。
Sourcesタブを選択してナビゲータのSourcesタブを表示します。
「 ec-concier.com」が表示されていれば、当該ページにecコンシェルのタグが設置されています。タグ内容が正しいか確認するため☞5へ

当該ページのアクセス先サーバ
- 「 ec-concier.com」が表示されている場合
  設置済みタグの個数を確認します。☞5へ
- 「 ec-concier.com」が表示されていない場合
  ec-concier.comとの通信環境を見直してください。
  ec-concier.comとの通信環境に問題が無ければ、当該ページにecコンシェルのタグが設置されていませんので、設置してください。
  ※タグマネージャを利用している場合は、当該ページへのタグ配信トリガー設定を見直してください。
Elementsタブを選択してElementsパネルを表示します。
Elementsパネルを左クリックしてから検索ウィンドウを表示（Windows: [Ctrl]+[F]、Mac: [command ⌘]+[F]）し、文字列 'ara' を検索します（下図は、検索結果が1件の場合の例）※タグ設置にご使用のツールによっては検索にかからない場合がございますので、その場合ara.pで検索をお願いいたします。
検索結果が1件の場合は、当該ページにecコンシェルのタグが正しく設置されています。

検索結果
- 0件【0 of 0】の場合
  当該ページにecコンシェルのタグが設置されていませんので、設置してください。
  ※タグマネージャを利用している場合は、当該ページへのタグ配信トリガー設定を見直してください。
- 1件【1 of 1】の場合
  ☞ステップ2へ
- N(≧2)件以上【1 of N】の場合
  当該ページにecコンシェルのタグが重複して設置されていますので、1ページにecコンシェルのタグが1個となるように設置個所を見直してください。
  ※タグマネージャを利用している場合は、当該ページへのタグ配信トリガー設定を見直してください。
  ※手順6でara.pで検索された場合、検索結果が１つの<script></script>内であれば問題ございません
調査対象のサイトがレスポンシブではなく、且つ、対応デバイスが複数ある場合

対応デバイス毎にURLが異なりますので、対応デバイス用ページを全て確認する必要があります。
モバイル端末用ページとPC用ページの切り替え表示は、モバイル・エミュレータのON/OFFで行います。

モバイル・エミュレータのON/OFF後は、ページの再読み込みを行ってください。

【ステップ2　タグ設置済みページでjavascriptエラーが発生していないことの確認】

Webブラウザを使用して、ecコンシェルのタグが設置されているページ（HTML）を表示します。
ページが表示されているウィンドウの任意の場所を右クリックして現れるコンテキストメニューから「検証(I)」を選択して、デベロッパー・ツールを表示します。
Consoleタブを選択してConsoleパネルを表示します（下図は、ecコンシェルのタグ内でjavascriptエラーが発生している場合の例）。
ecコンシェルのタグ内でjavascriptエラーが発生していない場合は、当該ページのecコンシェルのタグは正常に作動します。

エラーメッセージ
- 0件【 0】の場合
  ☞ステップ3へ
- N(≧1)件以上【 N】の場合
調査対象のサイトがレスポンシブではなく、且つ、対応デバイスが複数ある場合

対応デバイス毎にURLが異なりますので、対応デバイス用ページを全て確認する必要があります。
モバイル端末用ページとPC用ページの切り替え表示は、モバイル・エミュレータのON/OFFで行います。

モバイル・エミュレータのON/OFF後は、ページの再読み込みを行ってください。

【ステップ3　設置済みタグが正常に作動することの確認】

こちらのドキュメントを参考に、設定済みのキャンペーンの中からウィジェットの表示確認用パラメータを確認します。
Webブラウザを使用して、ecコンシェルのタグが設置されているページのURLに1で確認したウィジェットの表示確認用パラメータを付与してページ（HTML）を表示します。
ページ読み込み完了後に1で選んだウィジェットが表示される場合は、当該ページに設置されているecコンシェルのタグは正しく作動していることになります。

よくあるエラーの原因と対処方法

Consoleパネルに表示されているエラーメッセージとecコンシェルのタグ設置内容の対応一覧を以下に示します。

※以降の説明において、javascript変数「total_price」、「cv_name」は定義済みとします。

ReferenceError系

Uncaught ReferenceError: XXXX is not defined
原　　因：　合計金額の値が代入されている変数「XXXX」が参照できません。
対処方法：　合計金額の値が代入されている定義済みの変数を指定してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:合計金額}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);

原　　因：　コロン「:」が足りません。
対処方法：　コロン「:」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal',sumValuetotal_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);

原　　因：　コンバージョンタイプ名の値が代入されている変数「XXXX」が参照できません。
対処方法：　コンバージョンタイプ名の値が代入されている定義済みの変数を指定してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:cvName,sumValue:total_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:cv_name,sumValue:total_price}]);

原　　因：　コンバージョンタイプ名にjavascript変数「XXXX」が指定されています。
対処方法：　コンバージョンタイプ名には文字列を指定してください（シングルクォート「'」で括ってください）。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:goal,sumValue:total_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);

SyntaxError系

Uncaught SyntaxError: Unexpected token ,
原　　因：　コンバージョンタイプ名が空文字になっています。
対処方法：　conversion_typeにコンバージョンタイプ名を指定してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:,sumValue:total_cost}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Unexpected token :
原　　因：　コンバージョンタイプの指定が間違っています。
対処方法：　conversion_typeにコンバージョンタイプ名を指定し、カンマ「,」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:sumValue:total_cost}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Unexpected token }
原　　因：　合計金額の値が空文字になっています。
対処方法：　合計金額の値に定義済みの変数を指定してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);

原　　因：　波括弧「}」が余計です。
対処方法：　余計な波括弧「}」を削除してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Unexpected token ]
原　　因：　波括弧「}」が足りません。
対処方法：　波括弧「}」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Unexpected token )
原　　因：　角括弧「]」が足りません。
対処方法：　角括弧「]」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price});
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Unexpected identifier
原　　因：　カンマ「,」が足りません。
対処方法：　カンマ「,」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal'sumValue:total_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Unexpected string
原　　因：　コロン「:」が足りません。
対処方法：　コロン「:」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type'goal',sumValue:total_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);
　
Uncaught SyntaxError: Invalid or unexpected token
原　　因：　シングルクォート「'」が足りません。
対処方法：　シングルクォート「'」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:'goal,sumValue:total_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);

原　　因：　シングルクォート「'」が足りません。
対処方法：　シングルクォート「'」を追加してください。
タグ修正例
　修正前：　ara.push(['conversion_type', {conversion_type:goal',sumValue:total_price}]);
　修正後：　ara.push(['conversion_type', {conversion_type:'goal',sumValue:total_price}]);

{[{category.name}]}

【ステップ1 ページ内にecコンシェルのタグが設置されていることの確認】