https://partytown.builder.io/html
最近想要在 GTM 上面用 partytown，但是 yarn add 馬上就卡關
因為需要 node > 18 但我專案只有 14
本來想說能不能用 CDN，在他們 github 上看到兩個答案互相矛盾的 issue
Where is partydown.js file ? 和 How can I load partytown from a pure HTML/JS website?
第一個的回答是直接說沒有 CDN link，第二個的回答是說可以用 unpkg
不過其他網站看到的也是說不能用 CDN
Note that Partytown scripts must be self-hosted on the same server as the HTML documents. Since Partytown is using a service worker, these files must be served from the same origin as your site, and cannot be hosted from a CDN.
可是看他們在 html 的說明又寫
At the lowest level, Partytown is not tied to one specific framework or build tool. Because of this, Partytown can be used in any webpage as long as the HTML is updated, and the library scripts are hosted from the origin.
看起來只要檔案在我自己這邊就算啥 tool 都沒有應該也是可以用
可是我看不懂他的說明
<head>
<script>
/* Inlined Partytown Snippet */
</script>
<script type="text/partytown" src="https://example.com/analytics.js"></script>
</head>
我就是不知道 Inlined Partytown Snippet 要寫什麼啊（抱頭)
所以我可以理解為什麼會有這個 issue # How to implement partytown in vanilla js or HTML project ? Why partytown has most confusing documentation ?
還好最後我找到了這一篇有完整寫出到底該怎麼靠自己導入 partytown
因為其他很多教學雖然說自己是純靜態網站，但一開始也是用 npm 或 yarn 在裝 partytown
https://tanstaafl.0pt.jp/posts/2023/05/08/e6725aadb317/
他裡面也有寫到
導入については簡単で HTML ヘッダにスニペットとサードパーティスクリプトの呼び出しを書いておくだけである。
しかし公式での説明がちょっと不足していると感じたので簡単に手順を共有する。
對嘛對嘛不是只有一個人覺得官網說明不夠
其實步驟很簡單，只要知道該怎麼用的話 orz…
- 下載
@builder.io/partytown/lib到專案裡
npx @builder.io/partytown copylib --no-debug {看你想把partytown放在哪}
- 生成 snippet
node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'剛剛你選擇的路徑'})))"
比方我是像下面這樣
node -e "import('@builder.io/partytown/integration').then(({ partytownSnippet }) => console.log(partytownSnippet({forward:['dataLayer.push'],lib:'/public/partytown/'})))"
然後把生出來的東西貼到官網上顯示
Inlined Partytown Snippet 的地方就大功告成了
沒有留言:
張貼留言