iT邦幫忙

2021 iThome 鐵人賽

DAY 20
0
Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~系列 第 20

#20 No-code 之旅 — Analytics ft. Google Analytics & Splitbee

嗨!今天的主題是加 analytics 到網站 (專案) 裡~ 講到 analytics,大家通常會想到 Google Analytics,所以今天會分享怎麼加到 Next.js 專案裡。還有最近找到的 analytics 平台,叫做 Splitbee,今天會一起分享~

Analytics

Google Analytics

想要用 Google Analytics 之前,需要登入到 Google 帳號,然後新增完 property 之後,輸入網站的網址,最後會拿到我們的 Measurement ID 和一段 script:

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id={GA_TAG}"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', {GA_TAG});
</script>

Splitbee

首先,需要辦 Splitbee 的帳號,然後新增 project,輸入網站的網址,最後跟 Google Analytics 一樣,會拿到一段 script,可是它沒有任何 ID。代表每一個專案會用到一樣的 script:

<!-- 記得要用 async 或 defer 喔~ -->
<script async src="https://cdn.splitbee.io/sb.js"></script>

不過如果需要更多的功能,也可以裝 Splitbee 的 JS library @splitbee/web

優點

UI 非常乾淨,設定也很簡單,然後他們網站寫說我們的資料是我們的而不會把資料賣掉XD Splitbee 的 script 大小比 GA 小 (14次)。最後,Splitbee 提供 automation 功能,代表每次有使用者的 event,我們可以設定一些動作,例如寄信給使用者。

Next.js Script Optimization

Next.js 提供這個功能,所以需要加 <script> 的時候,可以用 next/scriptScript component。它提供不同的 strategy

  • beforeInteractive,還沒有辦法跟 page 互動之前,Next.js 會先引入和執行 script
  • afterInteractive (default),可以跟 page 互動之後才去抓取和執行 script,像 analytics
  • lazyOnload,等到 idle 時候抓取和執行 script,像 chat 或 feedback widget

Script 元件不該放在 next/headHead 元件裡,可是加在 page 的 body 裡~

加 Analytics

因為 Script 元件不該放在 Head 元件裡,而且這些 script 需要用在所有的 page 裡,所以我把下面這些 scripts 放在 pages/_app.js 裡:

<Script
  strategy="afterInteractive"
  src="https://cdn.splitbee.io/sb.js"
/>
<Script
  strategy="afterInteractive"
  src="https://www.googletagmanager.com/gtag/js?id={GA_TAG}"
/>
<Script id="analytics" strategy="afterInteractive">
  <!-- Inline scripts -->
  {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', {GA_TAG});
  `}
</Script>

Script 元件也可以放 inline scripts,不過需要放 id attribute,像上面的 Google Analytics scripts 加了 id="analytics"

小結

今天講的不詳細,不過希望大家如果有 analytics 的需求,可以看看 Splitbee 或是當然用最常用的 Google Analytics。要加任何 scripts 的時候也記得用 next/scriptScript,這樣 Next.js 會自動做 scripts 的優化~

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家明天上班上課愉快!

晚安 <3


上一篇
#19 No-code 之旅 — Avatars Libraries
下一篇
#21 No-code 之旅 — 如何讓網站在分享時看起來漂亮和有吸引力?Open Graph (OG) 簡介
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言