electerious/Ackee

Ackee counting unique page views on every page refresh

Open

#304 建立於 2021年12月24日

在 GitHub 查看
 (9 留言) (0 反應) (0 負責人)JavaScript (385 fork)github user discovery
bughelp wanted

倉庫指標

Star
 (4,667 star)
PR 合併指標
 (PR 指標待抓取)

描述

Ackee counting unique page on every page refresh. Using next.js with next following code in _app.tsx:

import { Box, ChakraProvider, useColorModeValue } from '@chakra-ui/react'
import type { AppProps } from 'next/app'
import Head from 'next/head'
import { DefaultSeo } from 'next-seo'
import { getSeo } from 'lib/getSeo'
import customTheme from 'configs/theme'
import { EmotionCache } from '@emotion/cache'
import { CacheProvider } from '@emotion/react'
import createEmotionCache from 'lib/createEmotionCache'
import { useRouter } from 'next/router'
import { ackeeConfig } from 'configs/ackee-config'
import { useEffect, useMemo } from 'react'
import * as ackeeTracker from 'ackee-tracker'

interface MyAppProps extends AppProps {
  emotionCache?: EmotionCache
}

const clientSideEmotionCache = createEmotionCache()
const { server, options, domainId } = ackeeConfig
function MyApp({
  Component,
  pageProps,
  emotionCache = clientSideEmotionCache,
}: MyAppProps) {
  const seo = getSeo()
  const mode = useColorModeValue('light', 'dark')
  const router = useRouter()

  let instance: any = useMemo(() => {
    if (typeof window !== 'undefined') {
      return ackeeTracker.create(server, options)
    }
  }, [])

  useEffect(() => {
    const attributes = ackeeTracker.attributes(options.detailed)
    const url = new URL(router.asPath, location as any)

    const { stop } = instance.record(domainId, {
      ...attributes,
      siteLocation: url.href,
    })
    return () => {
      stop()
    }
  }, [router.asPath])

  return (
    <CacheProvider value={emotionCache}>
      <ChakraProvider theme={customTheme}>
        <Head>
          <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
          <meta content="width=device-width, initial-scale=1" name="viewport" />
          <link rel="icon" type="image/png" sizes="96x96" href="/favicon.png" />
          <meta
            name="google-site-verification"
            content="aTbQBMj8oiDmPHyuWHqMoxuv3NGKzHWCLV3rzlIJawo"
          />
          <Box
            as="meta"
            name="theme-color"
            content={mode === 'light' ? 'white' : '#141922'}
          />
        </Head>
        <DefaultSeo {...seo} />

        <Component {...pageProps} />
      </ChakraProvider>
    </CacheProvider>
  )
}

export default MyApp

⚙️ Environment

  • Installation: Vercel both app and ackee
  • Ackee version: [e.g. v2.1.0]

貢獻者指南