【GTM】Facebook広告のカスタムイベント・カスタムコンバージョンの設定方法

【FB広告でイベント計測の設定方法に悩んでいる人】

「Facebook広告でカスタムイベントの設定方法が知りたいな。それと、それを使ったカスタムコンバージョンの設定方法もついでに知りたい。」

こういった疑問に答えます。

この記事を書いている僕は元々はエンジニアとして働いており、現在は広告運用を得意とする Webマーケターとして活動しています。

そんな僕が、本記事をあなたが読み終わる頃には、 Facebook広告のカスタムイベントの設定を一人でバッチリできるよう分かりやすく解説していきますね！

Facebook広告のイベント計測に「カスタムイベント」をオススメする理由

カスタムイベントを薦める理由は結論、イベント計測の管理がしやすいから。

そもそも、Facebook広告で使用できるイベントには大きく分けて下記の2種類があります。

標準イベント
カスタムイベント

1つめの「標準イベント」は、 あらかじめFacebook側で用意されているイベントで、以下の17種類があります。（※「イベント名：コード」の組み合わせで記載）

支払情報の追加：fbq('track', 'AddPaymentInfo');
カートに追加：fbq('track', 'AddToCart');
ウィッシュリストに追加：fbq('track', 'AddToWishlist');
登録完了：fbq('track', 'CompleteRegistration');
問い合わせ：fbq('track', 'Contact');
製品のカスタマイズ：fbq('track', 'CustomizeProduct');
寄付：fbq('track', 'Donate');
場所の検索：fbq('track', 'FindLocation');
チェックアウト開始：fbq('track', 'InitiateCheckout');
リード：fbq('track', 'Lead');
購入：fbq('track', 'Purchase', {value: 0.00, currency: 'USD'});
日時を指定：fbq('track', 'Schedule');
検索：fbq('track', 'Search');
トライアルを開始：fbq('track', 'StartTrial', {value: '0.00', currency: 'USD', predicted_ltv: '0.00'});
応募：fbq('track', 'SubmitApplication');
サブスクリプション登録：fbq('track', 'Subscribe', {value: '0.00', currency: 'USD', predicted_ltv: '0.00'});
コンテンツビュー：fbq('track', 'ViewContent');

>> 標準イベントの仕様｜Meta Business Help Center >> Currency（通貨コード）の種類｜Meta for Developers >> 標準イベントとパラメーター｜Meta for Developers

このように、デフォルトでたくさんの標準イベントがありますが、「任意の名前をつけることが出来ない」というデメリットがあるため、

「“電話”や“問い合わせフォームの送信”など問い合わせの種類・方法が複数あるから、それぞれ異なるイベント名にして別々で計測したいなぁ。」

例えば、上記のような需要に対応することが出来ません。

しかし、そのデメリットを補えるのがこれから解説するカスタムイベントで、 イベント名をほぼ自由に設定できる* ので、管理がしやすくなるという訳です。＊カスタムイベントについて｜Meta for Developers

ただ、あくまで 推奨は「標準イベント」のようなので、標準イベントだけで完結する場合はそちらを積極的に利用したほうが良さそうです。

【GTM】Facebook広告のカスタムイベント・カスタムコンバージョンの設定手順

ここまでで、カスタムイベントを利用するメリットはお分かりいただけたと思うので、ここからは実際に、カスタムイベントとそれを利用したカスタムコンバージョンの設定手順を解説していきます。

はじめに全体のざっくりとした流れをお伝えしておくと、以下のとおり。

順番に解説していきます。

手順①：ベースコードを設置

まずは「ベースコード」を設置します。このベースコードはその名の通り全てのベースとなるコードで、サイトを訪れたユーザーの行動履歴が記録されるため、これが無いとイベントやCVの計測などをすることが出来ません。要するに Facebook広告を出稿する場合サイト内に必ず設置が必要なものだと思っていただければ大丈夫です。

というわけで、実際の設定手順を画面のスクショを載せながら解説していきます。 #すでに設置している方は読み飛ばしてください #スクショ内の表記が英語ですがお気になさらず

まずは、Facebook広告の イベントマネージャーに移動します。左端のメニューバーのハンバーガーメニューをクリックし、 イベントマネージャーを選択します。

イベントマネージャーまでの導線

次に、左端メニューの [データソース] のアイコン もしくは、ピクセル名をクリックします。

「データソース」までの導線

次に、[Add Events] をクリックし、展開されたメニューの中から [From a New Website] をクリックします。

Facebook広告のデータソース画面

ポップアップが表示されるので、上側のボタン [Install code manually] をクリックします。

[Install code manually] をクリック

そうすると、ベースコードをコピーできる画面に遷移するので、緑色のボタンを押してベースコードをコピーします。

ベースコードのコピー画面

あとはこれを GTMで全てのページに設置したらベースコードの設定は完了です。（↓↓こんな感じ↓↓）

手順②：カスタムイベントを設定

では、ここから本題のカスタムイベントの設定方法について解説していきます。

GTMを開いていただき、タグの作成画面から [カスタムHTML] を選び以下のコードを貼り付けます。

<script>
 fbq('trackCustom', 'tel');
</script>

↓↓こんな感じ↓↓

GTMでカスタムイベントを作成① #ご覧の通り、「電話」の発信を計測する場合の例です

「タグの順序付け」の設定を忘れずに！

これで保存しようと思ってるそこのあなた！ちょっと待って！

先ほど紹介したベースコードを今設定しているイベントタグの前に配置させないといけないので以下の手順で忘れず設定してください。

[詳細設定] > [タグの順序付け] と順にメニューを展開
イベントタグの前にベースコードを配信するように設定

↓↓こんな感じ↓↓

GTMのカスタムイベントの詳細設定画面

あとは、言うまでもないですが、 [トリガー]の設定もお忘れなく。

カスタムイベントのコード解説

カスタムイベントのコード解説を少しだけ。

Facebookのカスタムイベントのコードは下記のような構成になっています。

fbq(‘trackCustom’, ‘eventName’, {key: ‘value’});

trackCustom：カスタムイベントを設定。（※変更不可）
eventName：カスタムイベント名。（※変更可）
{key: ‘value’}：パラメーター。[key] と [value] にそれぞれ任意の値を設定。省略可。

どの標準イベントでもカバーされていない活動については、fbqコールの最初の値'track'を'trackCustom'に置き換え、eventNameをあなた自身の定義したイベントに置き換えることでカスタムイベントを送信することができます。標準のパラメータでは不十分な場合は、各イベント内にカスタムパラメータを導入することができます。注：標準パラメータとカスタムパラメータは、標準イベントとカスタムイベントの両方で使用することができます。

>> 参考：カスタムイベントとカスタムパラメーター｜Meta Blueprint