Next.jsにGoogleアナリティクスを適用するプログラム(ソースコード有)

自作Next.jsアプリにGoogleアナリティクスを適用する

私は個人的にNext.jsを使ったWEBアプリを作ってFirebaseのHosting機能のもと公開しています。

しかし、FirebaseにはデフォルトでGoogleアナリティクスを適用する事が出来るのですがアクセス者がいてもアクセス数にカウントされていない事が分かっていました。

この辺は画像を取ってサイトに乗せるとBANされてしまうので画像を付けられません。ご容赦願います。

ただソースコードは問題ないと思うので公開します！！

まず、私が作成したこのYoutuberの生放送データを確認できるWEBアプリにGoogleアナリティクスを適用していきます。

URLはこちらになるので是非皆さんには使って頂きたく・・・。

Youtube生放送プラットフォーム

このサイトはNext.jsでTypescriptで作っていますのでTypescriptを使っている方はほぼ完全コピーできると思います。

Javascriptを使っている方もちょっとした修正だけで適用できます。

ソースコードの改修

ソースコードを改修していきます。

まず、Next.jsの場合は_app.tsを変更していく事になります。

もし_app.tsが既にごちゃごちゃしている人は他のtsファイルに定義してimportしてくるのが良いと思います。

_app.ts

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

はい、分かると思いますがHeadすらありません！！収益化も出来ていないのでどうでもいいかぁと思って何もしてないですね。

ただまぁこれだと当然ダメなのでこの_app.tsを改修していきます。

_app.ts

import '../styles/globals.css'
import Head from "next/head";
import {useEffect} from "react";
import { useRouter } from 'next/router'

const GoogleAnalyticsId = "G-自分のID";

const pageview = (url: string) => {
    (window as any).gtag('config', GoogleAnalyticsId , {
        page_path: url,
    });
}

function MyApp({ Component, pageProps }) {
  // Google アナリティクスへページ遷移を通知
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = (url: string) => {
      pageview(url)
    };

    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    }
  }, [router.events]);

  return (
  <>
    <Component {...pageProps} />
      <Head>
      <script async src={`https://www.googletagmanager.com/gtag/js?id=${GoogleAnalyticsId }`}></script>
      <script dangerouslySetInnerHTML={{
          __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', '${GoogleAnalyticsId }');
          `}}
      />
    </Head>
  </>
  )
}

export default MyApp

Linterくらい適用しろよと怒られそうですがこんな感じで動きます。実際に自分でサイトにアクセスしても反応してくれました。

正直私もWEBエンジニアに転職してから1年程度で最近はインフラ構築系の仕事をしていたのでそこまでレベル高くないのでコードに無駄が多いです。

ただ個人運営のサイトだし、まぁいっか♪の精神でやっていますので皆さんは綺麗に書いた方が良いと思います。

それでは今回の記事はここまでにします。私のブログでは他にもWEB関連の記事を書いたりしていますので是非こちらのリンクから見て行ってくれると嬉しいです。

フォローしてくれると嬉しいです

@ToA29076493