LaravelでAdSense広告を表示する｜Bladeの共通部品と配置を画面で解説

Laravelで作ったページにAdSense広告を載せるには、何をどこへ書けばよいのでしょうか。
今回のアプリでは、AdSenseの広告コードをBladeの部品にまとめ、広告を出したい位置から呼び出す方法を使いました。
広告用のPHPパッケージは追加していません。

私のサイトはブログでAdSenseを使っていますが、Laravelで公開したツール一覧には広告コードが入っていませんでした。
そこでCodexに実装を依頼し、ツール一覧や使い方のページへ手動広告を追加しました。
ここでは、PHPを使ったことがあり、Laravelの画面へ広告を追加したい方向けに、表示の仕組みと編集するファイルを説明します。

Laravelが作るのは広告コード入りのHTML

広告が表示されるまでの処理は、サーバー側とブラウザー側に分かれます。
LaravelはBladeを処理し、広告枠とJavaScriptを含むHTMLを返します。
そのHTMLを受け取ったブラウザーがAdSenseのスクリプトを実行し、Googleから広告を取得して枠内へ表示します。

つまり、LaravelのPHPで広告画像を選んだり、Googleから広告画像を取得してHTMLへ埋め込んだりする実装ではありません。
Bladeに書くコードはサーバーで処理されますが、出力した<script>のJavaScriptはブラウザーで動く、という違いを押さえておきます。

手動広告では、スクリプトだけでなく広告ユニットのコードも必要です。
管理画面から取得するコードについては、Googleの公式説明も参照してください。

完成画面で広告の位置を確認する

ツール一覧では、紹介文の後とカード一覧の後に広告を置きました。
次の画像はローカルの画面で、上部広告が入る位置を仮枠で示しています。
実際に配信された広告の画像ではありません。

スマホでは同じ順番で縦に並びます。
広告が入る分、カードは下へ移動するため、横はみ出しだけでなく目的のツールへ進みやすいかも確認する必要があります。

画面画像は配置確認用です。レスポンシブ広告の高さは、実際の配信内容や利用できる幅によって変わります。

ここからは、この配置をBladeで実装する手順を見ていきます。

1．広告IDと有効化の設定を用意する

事前に、自分のAdSense管理画面でサイトの状態を確認し、ディスプレイ広告ユニットのコードを取得します。
コード内のca-pub-…がパブリッシャーID、data-ad-slotが広告ユニットIDです。
以下では、Laravelアプリのルートを基準にファイルを編集します。

まず、.envへ設定を加えます。
次のIDは説明用のダミーです。
実際には自分の管理画面から取得した値へ置き換えてください。

ADSENSE_ENABLED=true
ADSENSE_PREVIEW=false
ADSENSE_CLIENT=ca-pub-0000000000000000
ADSENSE_SLOT=1234567890

この設定だけでどの環境にも実広告を出すわけではありません。
後述の部品は、Laravelの環境がproductionのときだけ実広告を出力します。
ローカルで確認するときはADSENSE_ENABLED=false、ADSENSE_PREVIEW=trueにして、実広告を取得しない仮枠を使います。

次に、config/advertising.phpを作ります。

<?php

return [
    'enabled' => env('ADSENSE_ENABLED', false),
    'preview' => env('ADSENSE_PREVIEW', false),
    'client' => env('ADSENSE_CLIENT', ''),
    'slot' => env('ADSENSE_SLOT', ''),
];

.envの値をこの設定ファイルで受け取り、Blade側はconfig('advertising.client')のように読みます。
設定キャッシュを使う本番環境では、変更後にphp artisan config:cacheで更新してください。
本物の.envを公開リポジトリへ含めず、サンプルの.env.exampleではIDを空欄にしています。

2．広告コードをBladeの共通部品にする

BladeはLaravelでHTMLを組み立てるテンプレートです。
resources/views/components/ad-slot.blade.phpへ部品を作ると、各ページから<x-ad-slot />で呼び出せます。
これはLaravelの匿名コンポーネントの仕組みです。

次が今回の部品です。
冒頭で表示条件を判定し、実広告ならGoogleのコード、ローカル確認なら仮枠を出力します。

@php
    $allowed = request()->routeIs('tools.index', 'password.guide', 'password.browser.guide', 'calendar');
    $client = (string) config('advertising.client');
    $slotId = (string) config('advertising.slot');
    $live = $allowed && app()->environment('production') && config('advertising.enabled')
        && preg_match('/\Aca-pub-[0-9]{16}\z/', $client) && preg_match('/\A[0-9]+\z/', $slotId);
    $preview = $allowed && ! app()->environment('production') && config('advertising.preview');
@endphp
@if($live || $preview)
    <aside class="ad-slot" aria-label="広告">
        <p class="ad-label">広告</p>
        @if($live)
            @once
                <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client={{ $client }}" crossorigin="anonymous"></script>
            @endonce
            <ins class="adsbygoogle" style="display:block" data-ad-client="{{ $client }}" data-ad-slot="{{ $slotId }}" data-ad-format="auto" data-full-width-responsive="true"></ins>
            <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
        @else
            <div class="ad-preview">広告の配置確認用スペース</div>
        @endif
    </aside>
@endif

$allowedに並べているのはURLではなく、今回のアプリで設定したルート名です。
自分のアプリへ使うときは、routes/web.phpの名前付きルートに合わせて変更してください。
表示条件は次のように分かれます。

@onceで囲んだローダーは、一覧のように部品を2回呼んでも、1回だけHTMLへ出力されます。
一方、<ins>と.push({})は広告枠ごとに必要です。
IDの形式確認は設定ミスを減らすためのもので、審査状態や広告の配信を保証するものではありません。

3．広告を置きたい位置で部品を呼ぶ

ツール一覧のresources/views/tools/index.blade.phpでは、既存の紹介文とカード一覧の間、そしてカード一覧の後へ部品を入れます。
次は位置を示す抜粋です。
コメント部分には既存の画面内容が入ります。

<x-layout title="ツール一覧">
    <section class="hero">
        {{-- タイトルと紹介文 --}}
    </section>

    <x-ad-slot />

    <section aria-labelledby="tools-heading">
        {{-- ツールのカード一覧 --}}
    </section>

    <x-ad-slot />
</x-layout>

これで、部品の呼び出し位置が広告を出す位置になります。
共通レイアウトへ無条件にローダーを加える方式にはせず、掲載するページだけで部品を呼び、部品内でも対象ルートを確認しています。

ローカルで仮枠を見せるには、アプリのルートで次を実行します。
既に開発サーバーが動いている場合は、二重起動せず環境設定を反映して確認してください。

ADSENSE_PREVIEW=true php artisan serve --host=127.0.0.1 --port=8000

仮枠の見た目も確認したい場合は、resources/css/app.cssへ次のようなスタイルを加え、npm run buildで資材を更新します。
以下は仮枠と印刷時の非表示に絞った例で、掲載画面ではこのほかに余白や広告ラベルも調整しています。

.ad-preview {
    min-height: 120px;
    display: grid;
    place-items: center;
    background: #f1f4f6;
    border: 1px dashed #98a6b0;
}

@media print {
    .ad-slot { display: none !important; }
}

仮枠の高さや周囲の余白を、すべてのサイト共通の適合基準として扱うことはできません。
Googleは操作ボタンなどの近くでの誤クリックに注意を求めているため、実際の画面で確認してください。
参考：広告のプレースメントに関するポリシー。

生成画面へは広告コードを持ち込まない

ブラウザー版のパスワード生成ツールは、生成とコピーを端末内で行い、操作中に通信せず、生成値を保存しない設計です。
この性質を維持するため、広告を載せる説明ページと、広告を読み込まない生成画面を分けました。

説明ページから開始ボタンを押すと、別のページへ移動します。
生成画面には広告部品を呼び出さず、条件入力と結果表示は引き続き1画面で行います。
広告を結果欄から遠ざけるだけでは同じページ内の第三者コードをなくせないため、ページを分けることに意味があります。

これはAdSenseが生成値を収集しているという説明ではなく、生成値を扱う画面へ不要な外部コードを追加しない設計です。
他のアプリでも、広告を載せるかどうかは画面の役割と扱う情報に合わせて判断できます。

コードがあっても広告が出ないときは

2026年11月時点で、この構成は公開アプリへ反映済みで、公開後に広告の表示も確認しています。
一方、ブラウザーで検証した際には、広告枠の初期化が完了しても配信結果がunfilledとなる場合がありました。
同じコードでも、常に広告が配信されるとは限りません。

今回は自動広告をOFFにして、手動の広告枠を配置しています。
自動広告を使っているサイトでは、上記の部品だけで表示位置をすべて決められるとは限らないため、管理画面の自動広告設定も確認してください。
公開時はads.txtとプライバシー表示も実際のサイト設定に照らして確認します。

まとめ

LaravelでAdSense広告を表示する基本は、Bladeで広告コードを含むHTMLを作り、ブラウザーに広告表示の処理を渡すことです。
広告コードを共通部品へまとめれば、ページ側は<x-ad-slot />を置くことで掲載位置を指定できます。
まずローカルの仮枠で配置を確認し、本番ではコードの出力と実際の広告配信を分けて確認してください。