Google Adsenseの広告コードを遅延読み込みさせる方法|PWCN -WordPressのカスタマイズ情報ほか-

公開日：2022(令和4)年10月2日／最終更新日： 2022(令和4)年10月8日

今まで私がメインで使っていた自作テーマ【HABONE】では、テーマの機能として、以下の条件でGoogle Adsenseが発火（広告表示のためのスクリプトが読み込まれる）ようにしていました。

ページ表示後、マウスを動かしたとき
ページ表示後、キーボードの下キーを操作したとき
ページ表示後、画面をタップしたとき
ページ表示後、3.5秒間何も操作されなかったとき

これをスクリプトの遅延読み込みと言うのですが、導入したきっかけは、Google Adsenseの広告コードを入れたことで、PageSpeed Insightsでレンダリングをブロックするスクリプトを改善しなさいと指摘されたことでした。

遅延読み込み機能を使い始めてからしばらくになるので、そろそろ通常の広告コードでも大丈夫かと追加してみたところ、やはり同様の指摘が出てしまうので、このサイトでも使うことにしました。

本ページで紹介する方法を使えば、他のテーマでも同じことができるようになりますので、Twenty Twenty-Twoテーマの仕様有無に限らず、Google Adsenseの広告コードが原因で、PageSpeed Insightsで指摘を受けるのを回避したい方は、導入してみてもいいかも知れません。

数年使用していて問題とならないので多分大丈夫かと思いますが、この方法によってGoogle Adsenseの動作や広告配信等に支障が出ても補償できませんので、導入するかは自己判断でお願いします

Google Adsense広告スクリプトの遅延処理をする前に

Google Adsenseの広告コードは大きく2つの役割に分かれています。

ディスプレイ広告を例に挙げると以下のようなコードになっています。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-アドセンスのID"
     crossorigin="anonymous"></script>
<!-- 広告の名称 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-アドセンスのID"
     data-ad-slot="広告ID"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

コードの前半部分（以下の部分）は、Google Adsenseから広告を取得するもの

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-アドセンスのID"
     crossorigin="anonymous"></script>

で、その下のコードは、広告の表示方法の指示コードになっています。

今回のカスタマイズでは、広告を取得するためのコード（https://pagead2.googlesyndication.comから情報を取得する部分）を遅延して動作させることで、ページ表示と同時に読み込まれるのを防ぐというものになります。

そして、この広告を取得するためのコードは、ページ内のどこかに1つあると、すべての広告に適用されるようになっています。

したがって、今回の方法で遅延処理させる場合は、サイト内に貼っているすべてのGoogleアドセンス広告から以下のコード（広告を取得するためのコード）を削除する必要があります。

きちんと広告を取得するためのコードが削除されていれば、どのページを開いてもGoogle Adsense広告は表示されなくなります

広告を取得するためのコードが1つでもある場合には、このページのカスタマイズを行っても効果はゼロになりますのでご注意ください

Google Adsense広告スクリプトを遅延処理する方法

前項の広告を取得するためのコードをすべてのGoogle Adsense広告から削除した上で、以下の手順で機能を追加していきます。

こちらで配布しているTwenty Twenty-Twoテーマの子テーマを使用している前提での追加方法です

本ページのカスタマイズの概要

本ページのカスタマイズでは、主に以下のことを行います。

通常のGoogle Adsenseのスクリプトの代替として、遅延出力用のテンプレート（プログラム）を作る
1を全ページのフッターへ出力して機能させる

また、本ページのカスタマイズにより、以下の場合にGoogle Adsense広告が表示されるようになります

ページ表示後、マウスを動かしたとき
ページ表示後、キーボードの下キーを操作したとき
ページ表示後、画面をタップしたとき
ページ表示後、3.5秒間何も操作されなかったとき

アドセンススクリプト遅延出力用ファイルを作る

まず、最終的にページフッターへ出力して動作させるための遅延プログラムを作ります。

これは次項の出力プログラムに内包しても構わないのですが、コードが長くなってしまうため、別ファイルとして作成します。

まずパソコン上でテキストエディタ（EmEditorなどメモ帳ではないエディタ推奨）を開き、ファイル名を「adsense-script-delay」、拡張子を「php」として「adsense-script-delay.php」というファイルを作ります。

作成したファイルをFTPクライアントツールなどを使って子テーマ内へアップロードします。

サイトの管理画面から「ツール」→「テーマファイルエディター」を開きます。

画面右側の一覧から「adsense-script-delay.php」をクリックします。

以下のコードを追加します。

<?php if ( !defined( 'ABSPATH' ) ) exit;//このファイルへの直接アクセスを禁止 ?>
<!-- GoogleAdSenseスクリプトの遅延読み込み -->
<?php if( get_post_status( $post->ID ) == 'publish'): ?>
<?php $c_cnumber = 'アドセンスのID'; //adsenseのIDのうち、数字部分のみを入力?>
<script>
(function(window, document) {
function main() {
// GoogleAdSense読込み
	var ad = document.createElement('script');
	ad.type = 'text/javascript';
	ad.async = true;
	ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-<?php echo $c_cnumber ?>';
	ad.crossorigin = 'anonymous';
	var sc = document.getElementsByTagName('script')[0];
	sc.parentNode.insertBefore(ad, sc);
}

//遅延読込み
var lazyLoad = false;
function onLazyLoad() {
	if (lazyLoad === false) {
// 複数呼び出し回避 + イベント解除
		lazyLoad = true;
		window.removeEventListener('scroll', onLazyLoad);
		window.removeEventListener('mousemove', onLazyLoad);
		window.removeEventListener('mousedown', onLazyLoad);
		window.removeEventListener('touchstart', onLazyLoad);
		window.removeEventListener('keydown', onLazyLoad);
		main();
	}
}
		window.addEventListener('scroll', onLazyLoad);
		window.addEventListener('mousemove', onLazyLoad);
		window.addEventListener('mousedown', onLazyLoad);
		window.addEventListener('touchstart', onLazyLoad);
		window.addEventListener('keydown', onLazyLoad);
		window.addEventListener('load', function() {
// ドキュメント途中（更新時 or ページ内リンク）
	if (window.pageYOffset) {
		onLazyLoad();
	}
//何もアクションがないときは指定秒数後に読み込み開始（ミリ秒）
	window.setTimeout(onLazyLoad,3500)
});
})(window, document);
</script>
<?php endif; ?>

下記のような広告を取得するためのコードの「アドセンスのID」部分（数字のみ）をコピーし、上のコードの「アドセンスのID」部分へ上書きし、保存します。

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-アドセンスのID"
     crossorigin="anonymous"></script>

アドセンススクリプト遅延出力用ファイルの内容をページ内へ出力する

画面右側のファイル一覧から「functions.php」をクリックします。

以下のコードを追加して保存します。

function pwcn_adsense_delay_script_footer_init(){
	$delay_script = get_template_part('adsense-script-delay');
	
	return $delay_script;
}
add_action('wp_footer','pwcn_adsense_delay_script_footer_init');

これで問題なく保存できれば、カスタマイズは完了です。

アドセンスの遅延表示が機能しているかを確認する

問題なく作業が終わったら、動作確認をしましょう。

広告ユニットのあるページ（自動広告がオンの場合はどのページでもOK）を開き、広告が表示されることを確認します。

また、ページ表示後、マウスを動かしたり、キー入力をしないようにして、2～3秒後に画面をスクロールして、広告が問題なく表示されるかを確認します。

広告が表示されないときは

広告が表示されない場合には、以下の2点を確認しましょう。

「adsense-script-delay.php」内の「アドセンスのID」欄の上書き

前述したコード中の「アドセンスのID」の部分の書き換えはきちんとできていますか？

通常、数字の部分のみコピーしますので、上書きした内容に「ca-pub-」が含まれていないかも確認しましょう。

きちんと出力されているかの確認をしましょう

アドセンス広告が有効になっているどれかの投稿や固定ページを開き、画面のどこかで右クリック→ソースの表示をクリックしてください。

ずらっと並んだHTMLコードの一番下の方に、「adsense-script-delay.php」に書かれているコードと同じようなものが出力されているかを確認してください。

プログラム用コードのファイル名に「adsense-script-delay.php」を使わなかった場合や、子テーマ内の別ディレクトリへファイルを転送した場合には、以下のコードの「adsense-script-delay」の部分を書き換える必要があります。

$delay_script = get_template_part('adsense-script-delay');

アドセンス広告をログインしていないユーザーにだけ表示させるには

私は経験がありませんし、あまりないことかも知れませんが、自身のサイトを自身で表示させることが多い場合や、意図的ではないにせよ。誤クリックを繰り返した場合、Google Adsenseのアカウントが一時的に凍結されることがあるそうです。

今回紹介したスクリプトをよく見ていただくと、「ページが公開状態の時」という条件を設け、下書きでプレビューなどをした時には広告が表示されない（スクリプトが発火しない）ようにはしてあるものの、ログインしているときには公開状態であっても広告を表示しないようにしておきたいという方も見えるかも知れません。

そこで最後に、いろいろな条件で今回の遅延出力を制御する方法を紹介しておきます。

カスタマイズするコード自体は、本ページの最後に紹介した、テーマのfunctions.phpへ追記する以下のコードの最終行に対して制限をかけます。

function pwcn_adsense_delay_script_footer_init(){
	$delay_script = get_template_part('adsense-script-delay');
	
	return $delay_script;
}
add_action('wp_footer','pwcn_adsense_delay_script_footer_init');

ログインユーザーにはアドセンス広告を出力しない

特に管理している方以外にユーザー登録をしないサイトで有効な手段です。

最終行の記述を以下のように変更します。

if(!is_user_logged_in()){
add_action('wp_footer','pwcn_adsense_delay_script_footer_init');
}

is_user_logged_inという組み込み関数を使い、逆接の「!」を付けて、ログインしているユーザーでなかったら．．という条件を追加しています。

参考：is_user_logged_in

特定権限を持つユーザーにはアドセンス広告を出力しない

多数の方がユーザー登録する、いわゆる会員制サイトなどで有効な手段です。以下は管理権限を持つユーザーにだけ広告表示しない場合のコードです。

if(!current_user_can('manage_options')){
add_action('wp_footer','pwcn_adsense_delay_script_footer_init');
}

current_user_canという組み込み関数を使い、逆接の「!」を付けて、「manage_options」というサイトの設定部分を操作できる権限がなかったら．．という条件を追加しています。

参考：current_user_can

本ページで掲載した内容や、紹介した参考コードなどがお役に立てたようでしたら、ページ末尾のコメント欄よりコメントを残す、SNS等で拡散するなどしていただけましたら幸いです。

本ページ掲載の方法やコード等はあくまでも最終更新日時点での私の環境において動作確認等を行ったものです。動作不良やカスタマイズの詳細な方法などをコメント欄よりいただきましても原則回答は致しませんのでご了承ください。

WordPressのカスタマイズに関するご要望はココナラにてお受けしております。お問い合わせ方法など詳しくはこちらをご覧ください。

最後までお読みいただきありがとうございました。

本ページで掲載している文章、画像、コード等すべてのコンテンツの著作権・所有権は当サイトにあり、転載を固く禁じます