わからないことがありますか?

OutbrainのPixelをGoogle Tag Managerでインストールする方法

Google Tag Manager(GTM)を利用すると、コーディングやHTMLの変更などの知識がなくても、簡単にOutbrainのPixelを実装することができます。

この記事では、GTMでOutbrainのタグを追加して設定する方法を簡単に説明します。

(1)GTMの管理画面でタグを手動で設定する方法

(2)Amplifyの管理画面に直接接続する方法 (BETA)

(1)Google Tag Managerの管理画面でOutbrainタグを手動で設定する方法

すでに弊社のPixelをインストールしている場合は、既存のテンプレートを更新する方法をご確認ください。

1. Amplifyの管理画面でコンバージョンを作成する

コンバージョントラッキングを設定するには、まずAmplifyのアカウントで必要なコンバージョンを作成する必要があります。作成方法については、こちらの記事をご参照ください。

GTM Outbrain Pixelタグは、URLとイベントベースのコンバージョン、そしてダイナミックな値の両方をサポートしています。

  • 重要:OutbrainキャンペーンとGoogle Tag Manager間のトラッキングの不一致を防ぐために、キャンペーンのトラッキングに弊社のUTM文字列を必ず追加してください。詳しくはこちらをご覧ください。

2. GTMでOutbrain Pixelタグを追加する

Amplifyの管理画面でコンバージョンの作成が完了したら、Google Tag Manager Community Template Galleryに移動してください。

  • Google Tag Managerを開き、左側の「Template」を選択します。
https://www.outbrain.com/help/wp-content/uploads/2017/09/GoogleTagManager_1.png
  • 次に、タグテンプレートのセクションで、「Search Gallery」をクリックして、テンプレートギャラリーにアクセスします。
https://www.outbrain.com/help/wp-content/uploads/2017/09/GoogleTagManager_2.png
  • リストの中からOutbrain Pixelを探してクリックし、次に進みます。右上の検索機能で簡単に探すことができます。
https://www.outbrain.com/help/wp-content/uploads/2017/09/GoogleTagManager_3.png
  • 「Add to workspace」をクリックし、テンプレートをインストールします。
https://www.outbrain.com/help/wp-content/uploads/2017/09/GoogleTagManager_add-1.png
  • テンプレートがインストールされたら、Outbrain pixel用の新しいタグを作成します。
  • 左側にある「Overview」タブに戻ります。タグマネージャーアカウントの 「New Tag」をクリックし、「Tag Configuration 」を選択します。
https://www.outbrain.com/help/wp-content/uploads/2017/09/New-tag.png
  • カスタムタグの種類で、「Outbrain Pixel 」を選択します(検索機能を使えばすぐに見つけることができます)。
https://www.outbrain.com/help/wp-content/uploads/2017/09/Screen-Shot-2022-02-03-at-2.44.01-PM.png
  • タグの設定画面が開くので、そこでタグのプロパティを定義し、トリガールールを設定します。 *Amplifyの管理画面で設定したコンバージョンごとに別々のタグを作成する必要があります。

3. GTMでタグを設定する

  • OutbrainのマーケターIDを追加する。
https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_OB_pixel_adv_id-1024x506.png

Marketer IDはAmplifyの管理画面で確認することができます。管理画面を表示しているURLの中の/marketers/の後につづく英数字の文字列がMarketer IDです。

例)Marketer ID:00abc123defg4h5ij67klmn89op0
https://my.outbrain.com/amplify/site/marketers/00abc123defg4h5ij67klmn89op0/reports/campaigns

または、Pixelコードで確認することもできます。コンバージョンページに移動して、「Outbrain Pixel」ボタンをクリックします。表示されたコードスニペットからMarketer IDをコピーできます(「OB_ADV_ID」という名前の英数字の文字列です)。

https://www.outbrain.com/help/wp-content/uploads/2022/05/OB_pixel_adv_id-1024x226.png
  • タグの種類を選択する。

Page View PixelとEvent pixelのどちらかを選択します。

https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_page_view_event.png

Page View pixel:

Page View pixelを使用すると、特定のページビューイベントをトラッキングすることができます。

URLベースのコンバージョンを使用している場合、タグ設定タブから直接Custom Parametersを追加することもできるようになりました。 Custom Parametersには、Currency、Order IDOrder Valueが含まれます。 例えば、Order Value パラメータを追加すると、顧客が購入完了ページに到達するたびに、実際の注文金額の情報を渡すことができます。

https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_page_view_custom_params.png

Event pixel:

Event pixelを使用すると、GTMを使用してイベントベースのコンバージョンを設定し、トラッキングすることができます。

イベントタグを作成するには、Event pixelを選択し、ドロップダウンからトラッキングしたいイベントを選択します。

https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_event_pixel-1024x524.png

上記のドロップダウンリストに設定されているイベント名は、Amplify管理画面のコンバージョンセクションのデフォルトのイベント名と一致しています。もし、まだAmplifyの管理画面でコンバージョンを作成していない場合は、その方法についてこちらを参照してください。

リストにないカスタムイベントを作成したい場合は、「Custom event」を選択し、手動でその名前を入力してください。 この名前は、Amplifyの管理画面で設定したイベント名と一致させる必要があります。

Page View pixelと同様に、タグ設定タブから直接Event pixelにカスタムパラメータを追加することができるようになりました。

https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_custom_params-1024x627.png
  • トリガーを設定する

最後に、タグが正しく作動するように、トリガーを設定する必要があります。トリガーを定義するには、以下に示すボックスをクリックすると(「Learn More」のリンクではありません)オプションのメニューが表示されます。

https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_triggering-1024x666.png

この例では、特定のボタンがクリックされた後にコンバージョンを発生させたい場合のトリガーの設定方法について説明します。

トリガータイプとして 「All Elements 」を選択し、「Some Clicks 」でトリガーが作動するようにし、アクションが関連するClick IDまたはClick Classを入力します。

https://www.outbrain.com/help/wp-content/uploads/2017/09/Screen-Shot-2022-02-04-at-9.33.30-AM.png

例えば、以下のようなアクションの場合、「Click ID」をtargetlink1に設定ください

https://www.outbrain.com/help/wp-content/uploads/2017/09/Screen_Shot_2017-07-10_at_3.07.27_PM.png
https://www.outbrain.com/help/wp-content/uploads/2017/09/2017-06-23_18.41.29.png

「Variables」のドロップダウンで「Click ID」や「Click Class」が見つからない場合は、メインの管理画面の「Variables」で表示する変数を設定することができます。

コンバージョンポイントを作成し、保存したら、Outbrain Pixel Trackerを使用して、Pixelの発火と実装を確認します。

その際、あらかじめ定義された変数を値に使用するか、Google Tag manager内で新しい変数を作成する必要があります。変数の作成については、Outbrainのサポートチームではサポートできませんので、ウェブ開発者に相談されることをお勧めします。

重要な注意事項

  • GTMを使用してOutbrainのPixelをすでに実装している場合、既存のテンプレートを新しいものに更新することをお勧めします。そのためには、GTM管理画面に移動して、新たに利用可能なテンプレートについての通知をご確認ください。
https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_OB_pixel_template_update_step1-1024x270.png
  • 「View」をクリックし、「Available Template Updates」タブの中のOutbrain pixelを選択します。変更タブで「Accept update」を選択すると、既存のテンプレートが新しいものに置き換わります。
https://www.outbrain.com/help/wp-content/uploads/2022/05/GTM_new_template_update-1024x434.png

(2) Amplifyの管理画面内でGTMのアカウントを直接接続する方法(BETA)

GTMアカウントとAmplify管理画面を直接接続することで、GTM経由でOutbrain Pixelを簡単に設置することができるので、その方法をご紹介します。

1. 管理画面の右側にあるConversionsタブに移動し、「Install Pixel」をクリックします

2. 「Install via GTM」を選択し、「Continue」をクリックします。手動でPixelを実装する方法は、こちらでご紹介しています。

 3. Google Tag Managerのアカウントと接続するには、「Connect」をクリックします。

4. 使用するGoogleアカウントを選択し、規約に同意してください。これにより、OutbrainがPixelの設定を行うことが可能になります。

5. 次に、アカウント名、Container、Workspaceなど、GTMのアカウント情報を入力ください。

https://www.outbrain.com/help/wp-content/uploads/2022/09/Screenshot-2022-09-08-at-15.25.53.png

 6. 「Next」をクリックし、Pixelタグが生成されるまでしばらくお待ちください。

 7. 最後に「Publish」をクリックすると、接続が完了し、Outbrainタグが自動的に発行され有効化されます。

注意点:

  • タグを発行する前に手動で設定を確認したい場合は、GTMアカウントに移動して、GTMの管理画面から発行することを選択できます。
  • GTM workspaceに、確認が必要な追加の変更がある場合、GTMの管理画面に移動して手動で確認するか、Publish the tagを選択ください。Outbrainは、自動的に変更をしたタグを発行します。

Next Step

Pixelの実装が完了したら、コンバージョントラッキングを設定して、どのコンバージョンをトラッキングして最適化するかを定義することを忘れないようにしてください。
コンバージョントラッキングについては、こちらを参照してください。

注意点:

  • 現在の管理画面での実装は、URLベースのコンバージョンをサポートしています。
  • イベントベースのコンバージョンの作成と実装には、Google Tag Managerで対応するタグとトリガーを設定する必要があります。

もっと知りたい?

アウトブレイン担当者と話す

問い合わせ窓口