ShopifyでFacebook PixelをGoogleタグマネージャーで設定する方法

この記事ではShopifyで運営中のECサイトでFacebook広告のFacebook Pixelを設定する方法を紹介します。今回はGoogleタグマネージャーを利用してFacebook PixelをShopifyに導入します。

Googleタグマネージャーを利用するメリットは広告タグの管理が簡単になることです。また、Googleタグマネージャー用のShopifyアプリを活用することで、広告配信に有用なデータを収集することもできます。

---

GoogleタグマネージャーでのFacebook Pixel設定方法

Facebook広告のFacebook Pixelを設定する方法は以下があります。
Facebook広告が収集できるデータを考えると、2番と3番がオススメの方法になります。
2番や3番の方法は設定が簡単で様々なアクセスデータをFacebookが収集できるため、広告配信をする上でメリットがあります。

1. Googleタグマネージャー用Shopifyアプリを利用する方法
2. 本記事で紹介するGoogleタグマネージャーで手動設定する方法
3. Facebookチャネル（ShopifyのFacebook）アプリを利用する方法

Shopifyアプリを利用する方法

弊社ではPafit Tag ManagementというShopifyアプリを提供しています。

Googleタグマネージャーを簡単に設定するためのShopifyアプリを利用すれば、簡単にFacebook Pixelの導入を終えられます。また、Google広告やYahoo!広告、Googleアナリティクスの設定も一括で行えるため、作業時間の短縮になります。

広告タグをShopifyに設置するためにGoogleマネージャーで設定したり、テーマを編集するのは面倒です。
アプリ費用は発生しますが、「作業時間の短縮」・「広告配信に重要なデータ収集の効率化」の上でGoogleタグマネージャー用Shopifyアプリはオススメです。

詳しくはをご覧ください。

Googleタグマネージャーの設定とGA4・Facebook広告などのデータ収集を簡単にするアプリ | Shopify App Store

Pafit Tag Managementは、Shopifyでのデータ収集とGoogleタグマネージャーの設定を簡単にするアプリです。ShopifyのECサイトのGoogleタグマネージャーの設定を簡略化し、Googleアナリティクスや各広告サービスにおけるデータ収集をサポートします。 Paf...

apps.shopify.com

Googleタグマネージャー用Shopifyアプリでは、初期設定完了後に以下のようなタグを自動設定することができます。

ShopifyでGoogleタグマネージャーを導入する方法

ShopifyにGoogleタグマネージャーを設置していない方は、以下の記事を参考にGoogleタグマネージャーの設置をお願いします。

ShopifyでGoogleタグマネージャーを10分で設定する方法

この記事ではShopifyでGoogleタグマネージャー（Google Tag Manager, GTM）を10分で設定する方法を2つ紹介します。 1.Shopifyのテーマのコードを編集する方法、2.Shopifyのアプリを利用する方法。注意点としては関係のないコードを編集しないようにお気をつけください。心配な方は2番目の方法であるShopifyアプリの利用をご検討ください。

pafit.cc

2021.09.17

 

Facebook Pixelを作成

ここからは手動設定する方法をご紹介します。作成手順が長いため、動画も参考にしてみてください。
また、タグマネージャーを利用する場合はタグマネージャー用のShopifyアプリの利用がオススメです。

まずはFacebook Pixelを作成します。

Facebookビジネス設定に移動し、ご自身のアカウントを選択してください。
アカウントを選択後、以下のような画面が表示されますので、「追加」を選択します。

ピクセル名とURLを入力し、「次へ」を選択します。

「ピクセルを今すぐ設定」を選択します。

「手動でピクセルコードをウェブサイトに追加」をクリックします。

Facebook Pixelのコードが作成されるため、コピーします。
次のステップで利用するのは「fbq(‘init’, ‘XXXXXX’);」の「XXXXXX」の数字の部分です。
例えば、「fbq(‘init’, ‘161784896037110’);」なら「161784896037110」を次のステップで利用します。

Facebook PixelにPageViewイベントを送信

タグマネージャーに移動し、タグページで「新規」を選択します。

鉛筆マークなどをクリックします。

タグタイプを選択する画面で、「コミュニティテンプレートギャラリー」を選択します。

「Facebook」と検索し、「Facebook Pixel（作成者 facebookincubator）」を選択します。

「ワークスペースに追加」を選択します。

次に先程コピーしたFacebook Pixel IDを入力します。

次はトリガーを設定します。「All Page」トリガーを選択し、名前を「Facebook Pixel – PageView – All Pages」にします。

最後にタグの名前を「Facebook Pixel – PageView – All Pages」などと設定し、「保存」をクリックします。
これでFacebook PixelにPageViewイベントが飛ぶようになります。

---

Facebook PixelにPurchaseイベントを送信

次はユーザーの購入が完了した際にPurchaseイベントをFacebookに飛ばすように設定します。

同様にタグを追加します。

Facebook Pixel IDを入力し、Standardの部分をPurchaseに設定します。

トリガーは「ページビュー」、名前は「Facebook Pixel – Purchase」にします。

「一部のページビュー」を選択し、Page URLで「正規表現に一致」で値を「.*/checkouts/*./thank_you」にします。これはShopifyの注文完了ページの正規表現です。

タグの名前を「Facebook Pixel – Purchase」にし、「保存」をクリックします。

以上でFacebook Pixelの基本的な設定は完了になります。

Googleタグマネージャーの記事リスト