Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃5：アナリティクス・アドセンスの導入とサイトマップ作成

2024.08.26
プログラミング
Next.js

前回までの記事で動的ルーティングのページも作成できたので、ほとんどヘッドレスCMSのサイトは出来上がってきていますが、アクセス解析や広告など運用面でまだ足りない機能が残っています。今回はその辺りの導入方法についてまとめていきたいと思います。（過去の参考記事もどうぞ） Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃4：静的・動的ルーティングとページ作成 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃3：メタ情報設定・ファイル最適化・ステート管理 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃2：コーディング環境の構築 Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃1：インストール・導入

1. グーグルアナリティクスの設定（@next/third-parties）

グーグルアナリティクスの導入については、公式のライブラリ（@next/third-parties）があるのでそれを利用していきます。下記コマンドでモジュールをインストールしていきます。

npm install @next/third-parties@latest

あとは共通のレイアウトコンポーネントでインポートするだけでOKです。「gaId」のプロパティ値にはGA4のタグIDを指定します。【/src/app/layout.tsx】

import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
  return (
    <html>
      <body>{children}</body>
      <GoogleAnalytics gaId="G-******" />
    </html>
  )
}

設定完了後、実際にトラッキングができているかをチェックしてみます。

2. グーグルアドセンスの導入

グーグルアドセンスの導入も、グーグルアナリティクス同様に公式のサードバーティライブラリを使う形になります。同じライブラリになるのでアナリティクスの設定が完了している状況であれば特にインストール作業は不要です。まずは共通のレイアウトコンポーネントにスクリプトをインポートしていきます。【/src/app/layout.tsx】

import { GoogleAnalytics } from '@next/third-parties/google';
import Script from 'next/script';

export default function RootLayout({
    children,
  }: {
    children: React.ReactNode
  }) {
  return (
    <html>
      <body>{children}</body>
      <GoogleAnalytics gaId="G-******" />
      {process.env.NODE_ENV !== 'development' && (
        <Script
          async
          src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-*************"
          crossOrigin="anonymous"
          strategy="afterInteractive"
        />
      )}
    </html>
  )
}

この時、直接scriptタグで読み込むのではなく、Next.jsのScriptコンポーネントを使って読み込んでいく点に注意します。また、広告配信のコンソールエラーを回避するため、ローカルサーバーでの起動時にはスクリプトを読み込まないように分岐しておくと良いですね。これでアドセンスのスクリプト読み込みができるようになりました。あとは広告ユニットを広告表示箇所に埋め込んでいくのですが、いろんな箇所で使えるように広告ユニットのコンポーネントを作成しておきます。こうすることで、広告ユニット設置が容易になります。まずは下記のように広告ユニット用のコンポーネントを定義していきます。【/src/components/AdsenseUnit.tsx】

'use client';

import { useEffect, useRef } from 'react';
import { usePathname } from 'next/navigation';

type propsType = {
  slot: string;
  client: string;
  format: string;
};

declare global {
  interface Window {
    adsbygoogle: { [key: string]: unknown }[];
  }
}

const AdsenceUnit: React.FC<propsType> = (props) => {
  const didEffect = useRef(false);
  const currentPath = usePathname();
  useEffect(() => {
    if (!didEffect.current) {
      didEffect.current = true;
      try {
        if(process.env.NODE_ENV !== 'development') {
          (window.adsbygoogle = window.adsbygoogle || []).push({});
        }
      } catch (err) {
        console.error(err);
      }
    }
  }, [currentPath]);

  return (
    <>
      {process.env.NODE_ENV !== 'development' && (
        <div>
          <ins
            className="adsbygoogle"
            style={{ display: 'block' }}
            data-ad-client={props.client}
            data-ad-slot={props.slot}
            data-ad-format={props.format}
            data-full-width-responsive="true"
          />
        </div>
      )}
    </>
  );
};

export default AdsenceUnit;

ここでポイントになるのが、広告表示用の処理をuseEffectのフックを使って行う点です。またアドセンスのスクリプトが重複して読み込まれることでエラーが出る場合には上記のようにレンダリング時に1回だけビルドするようにします。あとは作成したアドセンス用広告ユニットのコンポーネントを表示させる箇所で呼び出すと表示されるようになります。コンポーネントには広告IDなどの情報を受け渡すようにします。

<AdsenceUnit client="ca-pub-*************" slot="***********" format="auto" />

3. サイトマップの作成

SEO対策の一環として、サイトマップも作成しておきます。Next.jsの場合ライブラリが用意されているので、それを使うことで簡単にサイトマップを作成することができます。まずは、サイトマップ用のライブラリをインストールしていきます。

npm install next-sitemap

そしてビルド時にサイトマップを生成するように、ビルドコマンドにサイトマップ生成のコマンドを追加します。【/package.json】

{
  ....
  "scripts": { 
    "build": "next build && next-sitemap",
    ....
  },
  ....
}

これでビルドをすると「sitemap.xml」が生成されます。ページ数が多い場合には自動で分割され、動的ルーティングのページも対応できるのでとても便利ですね。

今回はNext.jsのヘッドレスCMSのサイトにアナリティクスやアドセンスの導入、サイトマップの作成が出来るようにしてみました。メディアサイトなどページ数が多くなる場合には運用面も考慮してさまざまな施策を検討する必要が出てきますので、サイト構築以外にも押さえておきたいポイントですね。

import { GoogleAnalytics } from '@next/third-parties/google' export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html> <body>{children}</body> <GoogleAnalytics gaId="G-******" /> </html> ) }

import { GoogleAnalytics } from '@next/third-parties/google'; import Script from 'next/script'; export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html> <body>{children}</body> <GoogleAnalytics gaId="G-******" /> {process.env.NODE_ENV !== 'development' && ( <Script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-*************" crossOrigin="anonymous" strategy="afterInteractive" /> )} </html> ) }

'use client'; import { useEffect, useRef } from 'react'; import { usePathname } from 'next/navigation'; type propsType = { slot: string; client: string; format: string; }; declare global { interface Window { adsbygoogle: { [key: string]: unknown }[]; } } const AdsenceUnit: React.FC<propsType> = (props) => { const didEffect = useRef(false); const currentPath = usePathname(); useEffect(() => { if (!didEffect.current) { didEffect.current = true; try { if(process.env.NODE_ENV !== 'development') { (window.adsbygoogle = window.adsbygoogle || []).push({}); } } catch (err) { console.error(err); } } }, [currentPath]); return ( <> {process.env.NODE_ENV !== 'development' && ( <div> <ins className="adsbygoogle" style={{ display: 'block' }} data-ad-client={props.client} data-ad-slot={props.slot} data-ad-format={props.format} data-full-width-responsive="true" /> </div> )} </> ); }; export default AdsenceUnit;

media

Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃5：アナリティクス・アドセンスの導入とサイトマップ作成

1. グーグルアナリティクスの設定（@next/third-parties）

2. グーグルアドセンスの導入

3. サイトマップの作成

categories

media

Next.jsとWordPressでヘッドレスCMSのサイトを作成する＃5：アナリティクス・アドセンスの導入とサイトマップ作成

1. グーグルアナリティクスの設定（@next/third-parties）

2. グーグルアドセンスの導入

3. サイトマップの作成

categories