# Google Publisher Tag 廣告問題

### 1. Script tag 的先後順序

智齡照顧網是用 Next.js 的框架架設的，它裡面有一條 lint rule 是不建議使用 synchornous script load 的 [詳情請參閱](https://nextjs.org/docs/messages/no-sync-scripts)。

因為目前所有關於廣告的第三方 JavaScript 或是關於廣告的操作都是在 `_app.tsx` 裡面使用 script tag import 進來的（包含原本的廣告以及後來來自聯合報的 Google Publisher Tag；以及擷取 cookie googleid 去雜湊，等等），而關於廣告的顯現例如 `googletag.display` 則是寫在廣告 component 裡面的。之前有問題是因為`_app.tsx` 裡面 script tag 的東西有時候會跑在 component 的後面。(導致有時候 `googletag.display` 會報出錯誤)；可以調整 eslint 的規則[詳情請參閱](https://stackoverflow.com/questions/69912278/nextjs-external-synchronous-scripts-are-forbidden)去允許 sync import，不過因為這個專案是承接前人的，不確定是否有任何歷史因素所以有這條規則；目前的做法是傾向不去更改，而是以一個 global flag 去確認有關廣告的第三方 JavaScript 已經跑過了 component 才去執行類似 `googletag.display` 的部分。

### 2. Google Publisher Tag 在 React 或是 Next.js 裡面的使用方法。
這部分主要是參考[這個範例](https://developers.google.com/publisher-tag/samples/integrations/react)、以及[這個範例](https://developers.google.com/publisher-tag/samples/refresh#javascript)。

後來在廣告沒有拉出來的情況下 console 裡面是沒有錯誤的，因此有另外加上一個 event listener 去聽 `"slotRenderEnded"` 這個 `event` 並且檢查 `event.isEmpty`。發現廣告沒有拉出來時這個值會是 `true` 。 `isEmpty` 可以參考[這個連結](https://developers.google.com/publisher-tag/reference#googletag.events.SlotRenderEndedEvent_isEmpty)，不過官方文件沒有說太多關於這個值的東西。也有其他人遇到過這個問題([stackoverflow連結](https://stackoverflow.com/questions/75036020/google-gpt-returns-empty-ads-under-which-conditions))。目前正在那篇 stackoverflow 問題下面的最佳答覆提供的連結去排查問題。最佳答覆裡面有好幾篇連結，目前正在看[這篇](https://support.google.com/admanager/answer/1739296?hl=en)。