WebflowサイトにMetaピクセルを挿入する

Meta ピクセルを使用すると、ウェブサイト訪問者の行動を監視できます。追跡されたコンバージョンは Meta イベント マネージャーに表示され、コンバージョン ファネルの有効性を評価し、ダイナミック広告キャンペーンのカスタム オーディエンスを特定するために利用できます。

開始前に： Meta ピクセルを構成および展開するための Meta のガイドラインを確認します。

このチュートリアルでは、次のトピックについて説明します。

1. ウェブサイトにMetaピクセルを実装する
2. クッキー承認の遅延の実装
3. Pixel の Cookie 承認バナーを作成する
4. 電子商取引イベントの有効化
5. 高度なイベントトラッキングの設定

サイトにMetaピクセルを実装する手順

重要な： 以前にカスタム コードを使用して Meta ピクセルを Web サイトに統合したことがある場合は、Meta ピクセル ID を追加する前に必ずカスタム コードを削除してください。

サイトに Meta ピクセルを挿入するには:

1. アクセス サイト設定 > アプリと統合 タブ > Metaピクセル
2. MetaピクセルIDを貼り付けてください

電子商取引イベントの有効化

ウェブサイトで電子商取引を有効にすると、Webflow は後続のイベントを Meta イベント マネージャーに自動的に中継します。

• 閲覧した商品
• 商品をカートに追加しました
• 購入した商品

これらのイベントでは、Meta と Instagram での広告キャンペーンを効果的に評価し、改善することができます。

もっと詳しく知る：

• Instagramショッピングの設定
• 製品の同期
• Meta Advantage+カタログ広告を製品向けに構成する

クッキー承認の遅延を実装する手順

ウェブサイトがEU居住者から個人データを収集する場合、GDPR規制に準拠することが不可欠です。「Cookie同意の遅延」オプションを切り替えて、ウェブサイト訪問者がCookie同意に同意するまでピクセルの読み込みを延期することができます。 はい.

この設定を有効にしたら、Cookie 同意バナーを使用してサイト上で Cookie 同意を要求する必要もあります。

Pixel の Cookie 承認バナーを作成する方法

重要： このガイドでは、Webflow の埋め込み要素を使用してカスタム コードを追加します。埋め込み要素は、有料のサイト プランと、Core、Growth、Agency、Freelancer Workspace プランで利用できます。

次の手順で Pixel Cookie 承認バナーを設定できます。

1. バナーを考案する
2. 交流を確立する
3. カスタムコードを埋め込む

バナーを考案する

1. クッキー同意通知メッセージを組み込んだバナーを好みに合わせてデザインして作成します。
2. 割り当てる ID バナー（例：consentPopup）
3. 「ピクセルCookieを受け入れる」ボタンを統合する
4. 割り当てる クラス あなたのボタンに
5. 提供する ID ボタン（例：consentBtn）
6. 「ピクセルCookieを拒否」または「閉じる」ボタンを追加する
7. 「承諾」ボタンと同じクラスを「拒否」ボタンに割り当てる
8. （オプション）訪問者をプライバシーポリシーページに誘導するための「詳細」リンクを追加します。
9. バナーを divブロック ポップアップコンテナとして機能する
10. クラスを割り当てる divブロック (例: popupWrapper)
11. ポップアップコンテナの設定 位置 として 修理済み
12. ポップアップコンテナの位置をプリセット位置を選択するか手動で調整します
13. ポップアップコンテナをコンポーネントとして指定する
14. このコンポーネントをウェブサイトのすべてのページに追加します

交流を確立する

まず、訪問者がピクセル クッキーを承認したときにクッキー同意バナーを非表示にするインタラクションを確立します。

1. 画面上の「ピクセルクッキーを受け入れる」ボタンを選択します
2. 案内する インタラクションパネル > 要素トリガー
3. クリック "プラス”アイコンをクリックして新しい要素トリガーを作成します
4. 選択する マウスクリック（タップ）
5. アクセス トリガー設定 選択して クラス
6. 選ぶ 1回目のクリックで 選択して アクションを選択
7. 選ぶ アニメーションを開始する
8. クリック "プラス”アイコンをクリックしてカスタマイズされたアニメーションを作成します
9. カスタムアニメーションに名前を付けます（例：「Cookieポップアップを閉じる」）
10. 画面上のポップアップコンテナを選択します
11. クリック "プラス”アイコンの隣に 行動 アニメーションにアクションを追加する
12. セット 影響する に クラス
13. 調整する 動く そして、 Y軸 に 100%
14. 設定を確認する

次に、訪問者がピクセル クッキーを拒否した場合にクッキー同意バナーを非表示にする同様のインタラクションを作成します。

1. 画面上の「拒否」ボタンを選択します
2. クリック "プラス”アイコンをクリックして新しい要素トリガーを作成します
3. 選ぶ マウスクリック（タップ）
4. アクセス トリガー設定 選択して クラス
5. 選ぶ 1回目のクリックで 選択して アクションを選択
6. 選ぶ アニメーションを開始する
7. 「Cookieポップアップを閉じる」カスタムアニメーションを選択します

次に、ページが読み込まれたときに Cookie 同意バナーを表示するインタラクションを設定します。

1. アクセス インタラクションパネル > ページトリガー
2. クリック "プラス”アイコンをクリックして新しいページトリガーを作成します
3. 選択する ページの読み込み
4. アクセス ページの読み込みが始まると クリック アクションを選択
5. 選ぶ アニメーションを開始する
6. クリック "プラス”アイコンをクリックしてカスタマイズされたアニメーションを作成します
7. カスタムアニメーションに名前を付けます（例：「クッキーポップアップを表示する」）
8. 画面上のポップアップコンテナを選択します
9. クリック "プラス”アイコンの横にある 行動 アニメーションにアクションを追加する
10. 調整する 動く そして、 Y軸 に 100%
11. チェック 初期状態として設定
12. クリック "プラス”アイコンの横にある 行動
13. 調整する 動く y軸を 0%
14. 設定を確認する

最後に、サイトのすべてのページに Cookie 同意バナーが読み込まれていることを確認します。

1. サイト上の別のページにアクセスする
2. へ移動 インタラクションパネル > ページトリガー
3. クリック "プラス”アイコンをクリックして新しいページトリガーを作成します
4. 選択する ページの読み込み
5. アクセス ページの読み込みが始まると クリック アクションを選択
6. 選ぶ アニメーションを開始する
7. 「クッキーポップアップを表示する」カスタムアニメーションを選択します
8. 上記の手順をサイトのすべてのページで繰り返します。

重要： アニメーションにアクションを追加するときは、必ずポップアップ コンテナーを選択してください。バナー自体にアクションを直接適用すると、カスタム コードの機能が妨げられる可能性があります。

カスタムコードを埋め込む

クッキー同意バナーを運用するには、 サイト設定 > カスタムコード タブ > フッターコード 提供されたコードを挿入します:

    <script type="text/javascript">
  var popup = document.getElementById('consentPopup');  
  var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';
  //Show the consent banner if consent ispreviously approved.  
  if (previouslyLoaded) {    
  popup.style.display = 'none';    
  fbq('agreement', 'accept');  
  } else {    
  popup.style.display = 'block';  
  }
  
  //Accept agreement and save it in localStorage of the browser  
  var acceptButton = document.getElementById('acceptButton');  
  acceptButton.addEventListener("click", function() {  
  fbq('agreement', 'accept');    
  window.localStorage.setItem('fbAcceptAgreement', 'true');  
  });
</script>
    

重要な： 「Cookieを許可する」ボタンとポップアップに固有のIDが使用されている場合は、上記のコード内のIDを、代わりに使用したIDに置き換えてください。同意ポップアップ” をバナーに設定したIDに置き換えます。受け入れボタン「Cookie を許可する」ボタンに設定した ID を入力します。

その他の参考資料: 

• Metaの1TP32クッキー同意に関する意見
• 欧州委員会のクッキー受け入れ規制

高度なイベント監視を確立する方法

最先端の Pixel イベント監視について詳しく知るには、Meta のイベントに関するマニュアルを参照してください。また、高度な Meta ピクセル使用率インスタンスのサンプル コードを調べて、監視するイベントのコードを修正することもできます。

監視したいイベントに適したコードを用意したら、これらのイベントをサイト上の 1 つ以上のページのタグ。 

リンクやボタンのクリックを監視する場合は、デザイナーでそれらの要素に固有のIDを定義するようにしてください。その後、埋め込みコードをコードエディターに挿入します（例： 崇高なテキスト または ビジュアルスタジオコード）をクリックし、埋め込みコード内のIDをボタンやリンクに割り当てたIDに置き換えます。最後に、 ページパネル > ページ設定 > カスタムコード 後続のスクリプトを埋め込みます。 

ピクセルIDがすでに含まれている場合は、サンプルコードのMetaピクセルセグメントをサイトに組み込む必要はありません。 サイト設定 > アプリと統合 タブ > Metaピクセル.  

注記： 当社のサポートチームは、カスタムコードの設定やトラブルシューティングに関する直接的な支援を提供することはできません。これらのテーマは当社のサポート範囲を超えているためです。 クライアントサポートプロトコルMetaピクセルイベントの統合に関してさらにサポートが必要な場合は、 Webflow フォーラム できるだけ詳細な情報（サイトの読み取り専用リンク、関連するスクリーンショット、統合しようとしているコード、問題の説明など）を添えて、Webflow コミュニティ全体（スタッフを含む）がさらなる支援とリソースを提供できるようにします。