エドコマースサイトにトラッキングコードとスニペットコードをインストールする

Last updated: October 9, 2026

コードスニペットをウェブサイトに統合するには、通常、次の手順に従います：

ステップ1. スニペットコードを取得する

統合するサービスまたはプラットフォームからスニペットコードを見つけてコピーします。これには、トラッキングピクセル、チャットウィジェット、フォームの埋め込み、またはサービスが提供するその他のコードが含まれます。

GoogleタグマネージャーのコードまたはMeta Pixelをインストールしようとしている場合は、以下の専用セクションに従ってください：

  • Meta Pixelのインストール
  • Googleタグマネージャーのインストール

ステップ2. スニペットコードをエドコマースに追加する

エドコマースへのスクリプトの追加は非常に簡単です。統合エリアにアクセスして「スクリプトコードを追加」をクリックするだけです。

スクリプト統合のフィールドに次のように入力します：

  • 名前：スニペットに名前を追加します。統合するツールの名前を使用できます。
  • 挿入先：ヘッドまたはボディ（これは統合するサービスの指示によって異なります）。
  • コード：その他のアプリのプラットフォームで見つけた対応するスニペットコードをコピーして、ここに貼り付けます。

ステップ3. 統合が正しく機能していることを再確認する

統合が正しく機能していることを確認するプロセスは、統合するプラットフォームによって異なる場合があります。作業しているサービスまたはプラットフォームが提供する具体的な統合手順を確認することが重要です。そこには、コードスニペットを統合するための追加要件や推奨事項が含まれている場合があります。

Googleタグマネージャーのインストール

ステップ1 - Googleタグマネージャーからコードスニペットを取得する

まず、<https://tagmanager.google.com>でGoogleタグマネージャーアカウントにログインします。

ログインすると、アカウントに関連付けられたコンテナの一覧が表示されます。操作するコンテナを選択するか、エドコマース用に新しいコンテナを作成します。

コンテナを選択したら、それを開いて内容にアクセスします。コンテナの概要で、上部バーのメニューにあるコンテナIDを探してクリックします（通常はGTM-XXXで始まります）。

2つのコードスニペットが表示されます。1つはウェブサイトの<head>セクション用で、もう1つは<body>セクション用です。エドコマースでは、<head>セクションのコードのみを使用します。

ステップ2. コードスニペットをエドコマースに追加する

エドコマースへのスニペットコードの追加は非常に簡単です。統合エリアにアクセスして、「スクリプトコードを追加」ボタンをクリックするだけです。

スクリプト統合のフィールドに次のように入力します：

  • 名前: スニペットに名前を追加します。例: Google Tag Manager。
  • 挿入先: ヘッド （Google Tag Managerではbodyは使用しません）
  • コード: Google Tag Managerで見つけた対応する「header」スニペットコードをここにコピーします。

ステップ3: Google Tag Managerが正しく動作しているか確認する

インストールが正しく完了したかを確認する最も簡単な方法は、ChromeウェブストアからGoogle Tag Assistant Chrome拡張機能をインストールすることです。

次の手順に従ってください:

  1. Google Chromeでウェブサイトを開きます。
  2. ChromeツールバーにあるTag Assistant拡張機能のアイコンをクリックします。
  3. ポップアップウィンドウが表示されます。記録を開始するには「有効にする」をクリックします。
  4. ウェブサイト内を移動し、Google Tag Managerで設定したタグをトリガーする操作を実行します。
  5. 操作が完了したら、もう一度Tag Assistant拡張機能のアイコンをクリックします。
  6. Tag Assistantが各ページでトリガーされたタグを分析し、レポートを提供します。
  7. Google Tag Managerの設定に関連するエラーや警告がないか、レポートを確認します。

Tag Assistantのレポートには、Google Tag Managerコンテナのタグが正しく発火しているか、問題があるかが表示されます。ウェブサイトでさまざまなシナリオをテストし、目的のタグがすべて期待どおりに発火していることを確認してください。

さらに、Google Analyticsの「リアルタイム」セクションを確認して、ウェブサイトからデータが受信されているか確認することもできます。エドコマースサイトで操作を行った際にGoogle Analyticsにリアルタイムデータが表示される場合、Google Tag Managerが正しくデータをGoogle Analyticsに送信していることを示しています。

Metaピクセルのインストール

IMGタグを使用してMetaピクセルをすでに設定している場合、または設定する予定がある場合は、 Facebookの開発者向けドキュメントに従うことをおすすめします。

この記事では、エドコマースサイトでMetaピクセルを設定してインストールする方法を説明します。始める前にピクセルについて詳しく知りたい場合は、Metaピクセルをインストールするメリットをご確認ください。

Metaピクセルをすでに作成していて、ピクセルのベースコードを見つけたい場合は、 ステップ2: エドコマースにピクセルを追加する。まで進んでください。

ステップ1: Metaピクセルを作成して設定する

  1. イベントマネージャに移動します。
  2. 「データソースを接続」をクリックし、ウェブを選択します。
  3. Metaピクセルを選択し、「接続」をクリックします。
  4. ピクセル名を追加します。
  5. 簡単な設定オプションを確認するため、ウェブサイトのURLを入力します。
  6. 「続行」をクリックします。

\詳しくは [Metaビジネスヘルプセンター.*](https://www.facebook.com/business/help/952192354843755?id=1205376682832142)

ステップ2. EdCommerceにピクセルを追加する

MetaピクセルをEdCommerceに手動で追加するため、Metaイベントマネージャからスクリプトをコピーし、EdCommerceサイトのヘッダーに貼り付ける必要があります。

EdCommerceへのスクリプトの追加はとても簡単です。統合エリアにアクセスして「スクリプトコードを追加」をクリックするだけです。

スクリプトの統合フィールドに次のように入力します：

  • 名前: スクリプトに名前を付けます。例：Meta PixelまたはFacebook Pixel
  • 挿入先: ヘッド （Metaピクセルではbodyは使用しません）
  • コード: Metaイベントマネージャにあるコードをここにコピーします。

そして「保存」をクリックします。

ステップ3. Metaピクセルが正しく動作していることを再確認する

Facebookピクセルが正しく接続され、動作していることを確認するには、次の手順に従います：

  1. https://business.facebook.comからFacebookビジネスマネージャアカウントにログインします。
  2. 左側のサイドバーにある「データソース」タブに移動します。
  3. 「ピクセル」セクションにFacebookピクセルが表示されているはずです。接続され、正しく動作している場合は、アクティブであることを示す緑色の点が表示されます。
  4. ピクセルの名前をクリックして、その設定と詳細情報にアクセスします。
  5. ピクセルの設定内では、追跡されているイベントを確認したり、エラーや警告がないか確認したり、ピクセルの最近のアクティビティを確認したりできます。