TikTok広告のイベントAPIをサーバサイドGTMで実装する

# これは何？

TikTok広告のイベントAPI実装を社内で担当した際のメモです。

ちなみに、イベントAPIとMetaのコンバージョンAPI（CAPI）は仕様が酷似しているので、もし一から実装される場合は下記記事も併せてご覧になることをオススメします。

https://qiita.com/Shuni/items/63cb87f6b2673c10f2e1

## TikTok イベントAPIとは？

> TikTokのイベントAPIは、TikTokおよび広告主のマーケティングデータ（サーバー・ウェブサイト・アプリ・CRM）間のより信頼性の高いデータ連携を広告主に提供し、さらに広告主がTikTokで共有する情報を柔軟にカスタマイズできるよう設計されています。このようなイベントをTikTokと共有することにより、マーケティングチームによるTikTok上の広告パフォーマンスの測定・広告配信の最適化・ターゲットオーディエンスの作成に役立ちます。

[TikTokのイベントAPI](https://ads.tiktok.com/help/article/events-api?lang=ja)とは、MetaのコンバージョンAPIのようなもので、サーバサイドGTMでイベントAPIタグを発火させます。ハッシュ化した顧客情報を持たせることでさらに精緻に計測をすることができます（アドバンスドマッチング）。

## いざ実装

今回の実装の全体図です。

サーバ側のイベントは、全てウェブコンテナの`Googleタグ`をフックに発火しますので、使いたいパラメータなどは全てGoogleタグ（もしくはGA4イベントタグ）に持たせることで、サーバサイドGTMで活用できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/45e2362e-e99e-3961-5fb9-51d50f0c9e2b.png)

また、TikTokのイベントAPIは、仕様がMetaのCAPIととても似ています。

コンバージョンイベントが発生した際に、ウェブコンテナ（＝Pixelタグ）から送信されたイベントと、サーバコンテナ（=イベントAPIタグ）で発火させたイベントを二重で発火させ、`event_id`を用いて重複排除をします。

さらに、イベントAPIタグにはハッシュ化した個人情報をパラメータとして持たせることで、より精度の高い計測ができます。`event_id`も個人情報パラメータも、もし[CAPIの実装](https://qiita.com/Shuni/items/63cb87f6b2673c10f2e1
)が済んでいればそのまま流用できるので手間いらずです。

### Pixelタグ（ウェブコンテナ）の設定

#### 重複排除用のevent_idの実装

もしウェブコンテナにあるPixelタグがベースタグのみの場合、イベントタグを設置しましょう。ベースタグ＋イベントビルダーでコンバージョンイベントを設定していると、おそらくイベントAPIタグは実装できないはずです。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/fdb3347f-9921-6afe-aa73-119f3621d591.png)

こだわりがなければTikTok公式のタグテンプレートを利用すると良いと思います。
その際、重複除外用の`event_id`は De-duplication Configurations に入力します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/9c678619-183a-12a5-420d-2cf986a7eb7a.png)

:::note info　
この`event_id`の仕様が結構厄介で、JavaScriptで書いた単純な乱数生成だとうまく実装できませんでした。ウェブコンテナとサーバコンテナから同じIDを送信しなければなりませんが、それぞれのタグでJSが呼び出されるたびに異なる値がセットされてしまうためです。

そのため、サードパーティの変数テンプレートを使っても良いと思います。ページがロードされる度にユニークなIDが変数として生成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/a35eb050-74e2-0c6f-a602-eec60960ca12.png)

:::

重複排除の仕様については、[TikTok公式のドキュメント](https://ads.tiktok.com/help/article/events-api?lang=ja)や[こちらの記事](https://qiita.com/Shuni/items/63cb87f6b2673c10f2e1#%E9%87%8D%E8%A4%87%E6%A7%8B%E9%80%A0%E3%81%A8%E9%83%A8%E5%88%86%E9%87%8D%E8%A4%87%E6%A7%8B%E9%80%A0)が詳しいです。

#### その他の設定項目の入力

`Trigger Event`は、基本的には選択肢の中から選ぶのが良いでしょう。`標準イベント`といって、TikTok側で推奨されているイベントのため、コンバージョン計測やレポーティングするのに最適です。一部、標準イベントではないものの、自動的に標準イベントに読み替えられるカスタムイベントがあります（例： Purchase → CompletePayment）。

また、タグのトリガーはコンバージョン時に発火するように設定します。

`Object Properties`などの項目は、設定できる内容があれば設定しましょう。レポーティングやオーディエンスの構築などで活用ができます。`Pixel ID`は、TikTokの広告管理画面から控えたものを入力します。

### イベントAPIタグ（サーバコンテナ）の設定

次にサーバコンテナ側の設定を進めます。

#### ウェブコンテナのGA4タグの設定

全体図で示した通り、サーバサイドGTMに入稿されているタグは、基本的にウェブコンテナにあるGoogleタグをフックに発火します。すなわち、TikTokのイベントAPIタグも、Googleタグから送られるイベントをトリガーにして発火させます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/eaf75e6a-723e-829b-9a1c-83fbf4f4f630.png)

Googleタグには、`server_container_url`でサーバサイドGTMの置かれたサーバのURLを指定します。また、GA4にページビューのデータを送りたい場合は`send_page_view` = `true`を指定します。

この時点で、全てのイベントに共通して持たせたいパラメータがあれば、Googleタグの構成パラメータに指定しましょう。例えば、Meta広告用で重複構造を作っている場合の`event_id`はここで指定します。

Googleタグではなく、GA4のイベントタグにパラメータをセットしてもサーバコンテナに送信することができます。コンバージョンした際にしか取得できないようなパラメータはこちらでセットした方が良いでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/9622aec1-a17b-8f81-3349-149491ba4069.png)

なお、ウェブコンテナから受け取ってサーバコンテナ、TikTokのサーバに送信できる個人情報と細かい仕様は[こちらの記事](https://business-api.tiktok.com/portal/docs?id=1739585700402178)をご覧ください。また、必ずしもサイト側でハッシュ化しておく必要はなく、サーバコンテナ側でハッシュ化済みか否かを選ぶことができます。

#### サーバコンテナのGA4タグの設定

基本的なサーバサイドGTMの構築などは済んでいる前提で進みます。GCP周りの設定は[この記事](https://qiita.com/takaHAL/items/38781b4f7d3f022508f1)が詳しいです。

サーバコンテナ側では、クライアント名が`GA4`だった際にGA4タグが発火するように設定してあります。ウェブコンテナ側で送られてくる`event_id`や`phone_number`は広告のために使うもので、GA4には送信する必要がなければ除外しても良いでしょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/2db684bb-eadb-d492-a9f1-bdf93ea1fa74.png)


#### サーバコンテナのイベントAPIタグの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/c9a2df92-ad57-19b3-12e5-4229db7ec850.png)

ウェブコンテナ側と同じ項目を埋めていきます。`TriggerEvent`や`Event ID`は、ウェブコンテナのPixelタグと同じ値がセットされる様に注意してください。アクセストークンはTikTok広告の管理画面（ツール>イベント）　から発行することができます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/c400bac5-7936-77fe-2852-d7f9853de28c.png)

トリガーは、ウェブコンテナでPixelタグを発火させるのと同じトリガーにすることをオススメします。発火タイミングが異なると、`Event_id`の値に不整合が生じてしまい、うまく重複排除ができない恐れがあります。つまり、GA4のイベントタグが、Pixelタグと同じトリガーになっている必要があります。

また、ウェブコンテナから送られてきたパラメータは、イベントデータとしてサーバコンテナ側で変数を定義すれば利用可能です。これでサーバサイドGTMの設定は完了です。

### 検証

実装が完了したらテスト発火をします。
まずはTikTokの管理画面からテストコードをコピーします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/3c32536c-f77b-1987-986c-3b61d1795a7e.png)

サーバコンテナの下記部分にテストコードを貼り付けます。このテストコードは、検証完了後、本番環境で公開する際に外すのをお忘れなく。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/141f9382-25a6-fc21-86da-007218e61736.png)


サーバサイドGTMのタグ発火テストは、ウェブコンテナと同時に立ち上げて利用します。いつものようにウェブコンテナ側でプレビューモードを立ち上げてコンバージョンアクションを行うことで、自動的にサーバサイドGTM側に必要なデータが送られてきて、イベントAPIタグが発火することを確認しましょう。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/1096e0e0-ecbe-74fe-f450-a42296197874.png)

うまく設定ができていれば、下記のようにイベントアクティビティが表示されます。パラメータも意図通りのものが送信されているか確認します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/9f1c7296-e775-a651-cfd2-923d1ec8bc89.png)

数日間送信してみて、Pixelから送っているイベント数との差異や、重複排除が機能しているかを確認します。管理画面の「イベントの健全性」から確認できます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/319121/24f520b2-2c51-46c4-7344-51971cb1438f.png)

以上で必要な実装は終了です。