【GoogleAdManager】slotRenderEndedとは？使い方とクリエイティブの表示調整を分かりやすく解説！

GoogleAdManager(以下GAM)の自分のアカウントで設定したクリエイティブがサイト上に読み込まれた時に、表示の仕方を調整したい場合がありますよね。

今回はそんな時に最適な、GAMで用意された機能のslotRenderEndedについて解説していきます。

弊社では、GAMを大型メディアで導入した実績がありますので参考になると思います。弊社の検証用アカウントでの説明画像もありますので、ぜひ最後までご覧ください。

【前提1】GoogleAdManager(GAM)の処理の流れ

まず、前提としてサイト上のGAMのコードがどのように機能し、最終的にどのようにGAMクリエイティブが表示されるのかを解説します。

まず、GAMの処理は非同期で行われます。

これは大雑把に言うと、サイト上の表示や挙動とは独立してGAMの処理が行われていくことです。

逆に同期で行われるサービスは、その処理が行われる際にサイト上の表示や挙動をブロックするので、サイトの読み込みが遅くなります。

GAMの処理について、実際のコードを用いてもう少し具体的に解説します。

まず以下のコードで、GAMの処理を行うためのgpt.jsをgoogletagservices.comからロードします。

プログラム中の”async”は、asynchronous（非同期）の略です。

その後に、概ね以下のような記述を書きます。

こちら簡単に解説しますと、GAMの命令文(googletag.defineSlotで始まる)がgoogletag.cmdにpushされていき、gpt.jsが読み込みが完了された時点でpushされた命令文が実行されていきます。

googletag.enableServices();は、大雑把に言うと「ここまでに書かれた記述に基づいてGAMの処理を行っていきます。」という宣言になります。

この宣言をもって、GAMのサーバーへサイト上のGAMの処理情報が送られます（defineされているスロットやkey-valueによるターゲティングなど）。

googletag.enableServices();の前に、googletag.enableSingleRequest();やgoogletag.collapseEmptyDivs();などを記述してオプションを付けることが可能ですが、今回は割愛します。

そして最後に、クリエイティブ表示するそれぞれの箇所に以下のような記述を書きます。

<div id=’div-gpt～～～’ >～～～</div>はクリエイティブを表示するための、GAM用の目印と考えると分かりやすいでしょう。

googletag.display(‘div-gpt～～～’);が呼び出されるごとに、GAMのサーバーへリクエストが飛び、GAMで処理が行われて適切なクリエイティブがサイトに送られ、このdiv内に表示されます。

なお、これはシングルリクエストモードじゃない場合の流れです。

シングルリクエストモードの場合は、サイト上で一番最初にあるgoogletag.display(‘div-gpt～～～’);が呼ばれたら、それによるGAMのサーバーへのリクエストで、defineSlotされている全ての広告ユニットに対するクリエイティブがGAMのサーバーで決定され、サイトに送られます。

以上がGAMの処理の流れの概要となります。

【前提2】サイトで読み込みが完了した時に行える処理

それでは、slotRenderEndedの解説と行きたいところですが、その前にslotRenderEndedとは別に、javascriptで元々用意されているDOMContentLoadedとonloadを簡単に解説します。

この2つを簡単に解説すると以下のようになります。

• DOMContentLoaded:ブラウザのhtmlパーサーがDOM構築を終了した時に発火する
• onload:画像・動画やjavascriptなど全てのコンテンツのロードが完全に終了した時に発火する

まず、DOMContentLoadedに関して、htmlパーサーによるDOM構築は、外部リソースにアクセスしたりしないので非常に高速に行われます。

具体的には、パースしている中で<img src=”～～～.jpg”>などの外部コンテンツに遭遇しても、それらの読み込みの完了を待たずにhtmlを解析していくので、速く完了します。

一方、皆さんご存知のように、画像・動画などのダウンロードは時として非常に時間がかかります。

したがって、処理される順番はDOMContentLoaded⇒onloadという流れになります。

これらの2つ処理と、上で説明したGAMの処理を結びつけて見ていきましょう。

GAMは非同期で処理を行うため、1つ前の見出しで説明したGAMのそれぞれの処理が行われる段階と、DOMConntentLoadedが発火するタイミングの時間の関係は定まってはいません。

ただ実務上では、DOMContentLoadedの処理の方が、GAMからクリエイティブが帰ってくるタイミングより圧倒的に速く完了します。

GAMからクリエイティブが帰ってくるには、GAMのサーバーとの何度も通信をする必要がありますから。

一方、onloadに関しては外部からのリソースのダウンロードが完全に完了しての発火となるので、もちろんGAMの処理の方が速く完了します。

したがって、DOMContentLoaded⇒GAMからのクリエイティブが表示⇒onloadという流れになります。

slotRenderEndedについて

はい、ようやくslotRenderEndedの説明の段階になりました。

そもそもやりたかったことは、”GAMから送られてきたクリエイティブがサイト上に読み込まれた時の表示”の仕方を調整したいということでした。

しかし、DOMContentLoadedで調整しようとすると「まだGAMのクリエイティブが読み込まれてない」、onloadで調整しようとすると「発火するまでの時間が長すぎる」という問題にぶつかります。

そこで、slotRenderEndedが活躍するわけです。

slotRenderEndedは、GAMからクリエイティブが帰ってきてレンダー（表示）されるごとに発火するイベントです。

このイベントでは、そのクリエイティブを表示するスロットやそのクリエイティブのオーダー、広告主などを参照することができます。

具体的なコードは以下のよう記述します。

event.slotでスロット情報、event.sizeでそのクリエイティブのGAMで設定されたサイズを参照することができます。

また、GAMから帰ってきたクリエイティブは<div id=”div-gpt～～～”></div>内にiframeとして表示されます。

ですので、event.slot.getSlotElementId()でこのid(div-gpt～～～～)を取得して、仮にdiv-gpt-1111111111だとすると、

document.querySelector(“#div-gpt-1111111111 iframe”).style.widthや.heightを望ましい値に変更すれば、クリエイティブの表示の調整ができるということになります。

まとめ

GoogleAdManager(GAM)のクリエイティブ表示を調整するためのslotRenderEndedについて解説してきました。

実務上で役に立つことがきっとあると思うので、ぜひ参考にして下さい。