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

嗨！今天的主题是加 analytics 到网站 (专案) 里～ 讲到 analytics，大家通常会想到 Google Analytics，所以今天会分享怎麽加到 Next.js 专案里。还有最近找到的 analytics 平台，叫做 Splitbee，今天会一起分享～

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 非常乾净，设定也很简单，然後他们网站写说我们的资料是我们的而不会把资料卖掉ＸＤ Splitbee 的 script 大小比 GA 小 (14次)。最後，Splitbee 提供 automation 功能，代表每次有使用者的 event，我们可以设定一些动作，例如寄信给使用者。

Next.js Script Optimization

Next.js 提供这个功能，所以需要加 <script> 的时候，可以用 next/script 的 Script component。它提供不同的 strategy：

• beforeInteractive，还没有办法跟 page 互动之前，Next.js 会先引入和执行 script
• afterInteractive (default)，可以跟 page 互动之後才去抓取和执行 script，像 analytics
• lazyOnload，等到 idle 时候抓取和执行 script，像 chat 或 feedback widget

Script 元件不该放在 next/head 的 Head 元件里，可是加在 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/script 的 Script，这样 Next.js 会自动做 scripts 的优化～

大家想要看看之前的网站可以看这里，或是直接到首页～ 有任何问题可以问我，或是也可以讨论未来要开发的 No-code 专案喔。

祝大家明天上班上课愉快！

晚安 <3