lelelemon’s blog

カメの歩みでのんびり学んでいます。

Google Ad Manager でテスト広告を表示するーWeb編

React

はじめに

こんにちは。直近 Google Ad Manager を触ることがあり、そのファーストステップとして、GoogleAd Manager にて提供されているテスト用広告の表示実装を試したのでメモに残したいと思います。

本記事では、Node.js 環境下で Google Ad Manager のテスト広告を表示する実装についてご紹介します。

本記事のソースコードは以下に配置してあります。自由にご使用ください。

github.com

 

Google 社提供の広告統合管理プラットフォームで、広告配信枠の設定から入札・配信管理、ターゲティングや配信状況のレポーティングなど、広告に関するあらゆる機能を網羅しています。

省略して「GAM」と呼ばれたりもするようです。

admanager.google.com

 

開発環境構築

今回は以下の環境で構築していきます。

  • Node.js: v20.12.1
  • React: v19.0.0
  • TypeScript: v5.7.3
プロジェクト作成
npx create-next-app gam-sample

 

テスト用広告について

Google Ad Manager の広告を読み込むライブラリとして、Google Publisher Tag (GPT) が提供されています。

この GPT を使用することで、Google Ad Manager で作成した広告を簡単に読み込むことができます。

developers.google.com

 

今回は以下サンプルサイトにも掲載されている、「/6355419/Travel/Europe/France/Paris 」という広告ユニット名(Google Ad Manager 側で作成した広告枠（広告を表示するエリア）を示す一意の値) を使った実装を行なっていきます。

developers.google.com

 

テスト広告表示実装

・GPT ライブラリを導入する

npm install --save-dev @types/google-publisher-tag

・src/app/layout.tsx

import "./globals.css";
import Script from "next/script";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en">
      <Script async src="https://www.googletagservices.com/tag/js/gpt.js" />
      <body>{children}</body>
    </html>
  );
}

  • gpt.js を読み込んでいます。これを読み込むことで、window.googletag のグローバルオブジェクトの広告読み込みの各種メソッドにアクセスできるようになります 

・src/app/page.tsx

"use client";
import { initializeGpt } from "@/script/gpt";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    import("../script/gpt");
    initializeGpt();
  }, []);
  return (
    <div>
      <div>以下のGAMテスト広告を表示</div>
      <div id="gam-display"></div>
    </div>
  );
}

・src/script/gpt.ts

export function initializeGpt() {
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {
    googletag
      .defineSlot(
        "/6355419/Travel/Europe/France/Paris",
        [300, 250],
        "gam-display"
      )
      ?.addService(googletag.pubads());

    googletag.enableServices();

    googletag.display("gam-display");
  });
}
  • defineSlot メソッドの第一引数に Google Ad Manager の広告ユニットIDを指定します
  • 第二引数は広告ユニットで設定された広告の表示サイズを指定します
  • 第三引数に、広告を表示する対象の div 要素を指定します
  • googletag.display を呼び出すことで、広告の表示を行うことができます

 

動作確認

・アプリ起動

npm run dev

・http://localhost:3000/ にアクセス

 

以下のようにテスト広告の表示が確認できます。

 

終わりに

簡単にですが、Google Ad Manager のテスト広告を表示するサンプルを紹介しました。

Google Ad Manager の広告を読み込む簡単なサンプルをお探しの方のお役に立てれば幸いです。

Android や iOS 環境でも Google Ad Manager 広告を読み込むための SDK が提供されているので、それらも試せたら別記事にまとめたいと思います。