Merge pull request #153 from timlrx/feat/analytics

Feat/analytics

README.md

@@ -34,6 +34,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Lightweight, 38kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
+- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics
 - [MDX - write JSX in markdown documents!](https://mdxjs.com/)
 - Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
 - Math display supported via [KaTeX](https://katex.org/)

components/analytics/GoogleAnalytics.js

@@ -0,0 +1,36 @@
+import Script from 'next/script'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const GAScript = () => {
+  return (
+    <>
+      <Script
+        strategy="lazyOnload"
+        src={`https://www.googletagmanager.com/gtag/js?id=${siteMetadata.analytics.googleAnalyticsId}`}
+      />
+
+      <Script strategy="lazyOnload">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${siteMetadata.analytics.googleAnalyticsId}', {
+              page_path: window.location.pathname,
+            });
+        `}
+      </Script>
+    </>
+  )
+}
+
+export default GAScript
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const logEvent = (action, category, label, value) => {
+  window.gtag?.('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

components/analytics/Plausible.js

@@ -0,0 +1,27 @@
+import Script from 'next/script'
+
+import siteMetadata from '@/data/siteMetadata'
+
+const PlausibleScript = () => {
+  return (
+    <>
+      <Script
+        strategy="lazyOnload"
+        data-domain={siteMetadata.analytics.plausibleDataDomain}
+        src="https://plausible.io/js/plausible.js"
+      />
+      <Script strategy="lazyOnload">
+        {`
+            window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }
+        `}
+      </Script>
+    </>
+  )
+}
+
+export default PlausibleScript
+
+// https://plausible.io/docs/custom-event-goals
+export const logEvent = (eventName, ...rest) => {
+  return window.plausible?.(eventName, ...rest)
+}

components/analytics/SimpleAnalytics.js

@@ -0,0 +1,25 @@
+import Script from 'next/script'
+
+const SimpleAnalyticsScript = () => {
+  return (
+    <>
+      <Script strategy="lazyOnload">
+        {`
+            window.sa_event=window.sa_event||function(){var a=[].slice.call(arguments);window.sa_event.q?window.sa_event.q.push(a):window.sa_event.q=[a]};
+        `}
+      </Script>
+      <Script strategy="lazyOnload" src="https://scripts.simpleanalyticscdn.com/latest.js" />
+    </>
+  )
+}
+
+// https://docs.simpleanalytics.com/events
+export const logEvent = (eventName, callback) => {
+  if (callback) {
+    return window.sa_event?.(eventName, callback)
+  } else {
+    return window.sa_event?.(eventName)
+  }
+}
+
+export default SimpleAnalyticsScript

components/analytics/index.js

@@ -0,0 +1,18 @@
+import GA from './GoogleAnalytics'
+import Plausible from './Plausible'
+import SimpleAnalytics from './SimpleAnalytics'
+import siteMetadata from '@/data/siteMetadata'
+
+const isProduction = process.env.NODE_ENV === 'production'
+
+const Analytics = () => {
+  return (
+    <>
+      {isProduction && siteMetadata.analytics.plausibleDataDomain && <Plausible />}
+      {isProduction && siteMetadata.analytics.simpleAnalytics && <SimpleAnalytics />}
+      {isProduction && siteMetadata.analytics.googleAnalyticsId && <GA />}
+    </>
+  )
+}
+
+export default Analytics

data/blog/introducing-tailwind-nextjs-starter-blog.mdx

@@ -1,7 +1,7 @@
 ---
 title: 'Introducing Tailwind Nexjs Starter Blog'
 date: '2021-01-12'
-lastmod: '2021-07-18'
+lastmod: '2021-07-28'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'Looking for a performant, out of the box template, with all the best in web technology to support your blogging needs? Checkout the Tailwind Nextjs Starter Blog template.'
@@ -39,6 +39,7 @@ I wanted it to be nearly as feature-rich as popular blogging templates like [bea
 - Lightweight, 38kB first load JS, uses Preact in production build
 - Mobile-friendly view
 - Light and dark theme
+- Supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics
 - [MDX - write JSX in markdown documents!](https://mdxjs.com/)
 - Server-side syntax highlighting with line numbers and line highlighting via [rehype-prism-plus](https://github.com/timlrx/rehype-prism-plus)
 - Math display supported via [KaTeX](https://katex.org/)

data/blog/new-features-in-v1.mdx

@@ -1,6 +1,6 @@
 ---
 title: 'New features in v1'
-date: '2021-07-21'
+date: '2021-07-28'
 tags: ['next-js', 'tailwind', 'guide']
 draft: false
 summary: 'An overview of the new features released in v1 - code block copy, multiple authors, frontmatter layout and more'
@@ -15,6 +15,7 @@ A post on the new features introduced in v1.0. New features:
 - [Xdm MDX compiler](#xdm-mdx-compiler)
 - [Layouts](#layouts)
 - [Multiple authors](#multiple-authors)
+- [Analytics](#analytics)
 - [Blog comments system](#blog-comments-system)
 - [Copy button for code blocks](#copy-button-for-code-blocks)
 - [Line highlighting and line numbers](#line-highlighting-and-line-numbers)
@@ -146,9 +147,27 @@ export const MDXLayoutRenderer = ({ layout, mdxSource, ...rest }) => {
 Use the `MDXLayoutRenderer` component in a page where you want to accept a layout name to map to the desired layout.
 You need to pass the layout name from the layout folder (it has to be an exact match).
 
+## Analytics
+
+The template now supports [plausible](https://plausible.io/), [simple analytics](https://simpleanalytics.com/) and google analytics.
+Configure `siteMetadata.js` with the settings that correpond with the desired analytics provider.
+
+```js
+analytics: {
+    // supports plausible, simpleAnalytics or googleAnalytics
+    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    simpleAnalytics: false, // true or false
+    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+  },
+```
+
+Custom events are also supported. You can import the `logEvent` function from `@components/analytics/[ANALYTICS-PROVIDER]` file and call it when
+triggering certain events of interest. _Note_: Additional configuration might be required depending on the analytics provider, please check their official
+documentation for more information.
+
 ## Blog comments system
 
-We added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.
+We have also added support for [giscus](https://github.com/laymonage/giscus), [utterances](https://github.com/utterance/utterances) or disqus.
 To enable, simply configure `siteMetadata.js` comments property with the desired provider and settings as specified in the config file.
 
 ```js

data/siteMetadata.js

@@ -16,6 +16,12 @@ const siteMetadata = {
   youtube: 'https://youtube.com',
   linkedin: 'https://www.linkedin.com',
   locale: 'en-US',
+  analytics: {
+    // supports plausible, simpleAnalytics or googleAnalytics
+    plausibleDataDomain: '', // e.g. tailwind-nextjs-starter-blog.vercel.app
+    simpleAnalytics: false, // true or false
+    googleAnalyticsId: '', // e.g. UA-000000-2 or G-XXXXXXX
+  },
   comment: {
     // Select a provider and use the environment variables associated to it
     // https://vercel.com/docs/environment-variables

pages/_app.js

@@ -3,6 +3,7 @@ import '@/css/tailwind.css'
 import { ThemeProvider } from 'next-themes'
 import Head from 'next/head'
 
+import Analytics from '@/components/analytics'
 import LayoutWrapper from '@/components/LayoutWrapper'
 
 export default function App({ Component, pageProps }) {
@@ -11,6 +12,7 @@ export default function App({ Component, pageProps }) {
       <Head>
         <meta content="width=device-width, initial-scale=1" name="viewport" />
       </Head>
+      <Analytics />
       <LayoutWrapper>
         <Component {...pageProps} />
       </LayoutWrapper>