Before You Begin!

This is a demo for developers whose main development focus is display ads. This is an uncommon topic for most of the front end developers. If you're not working for a digital publisher, I can't say there is much for you here, ... sadly. So here is a good place to decide leaving and finding something funnier to read for yourself!

Ad Blocker Users: You should always be using ad/tracker blockers. But just for this demo you must disable ad blockers temporarily. Because this demo is all about ads.

Users Without Ad Blocker: You should definitely use an ad/tracker blocker for personal browsing! See some starter links at page footer.

Event Timelines

GPT Events

From requesting ads to counting them as impressions, GPT Library triggers a set of events to inform page about current slot statuses. GPT options enableSingleRequest and enableLazyLoad change event triggering timing in various ways. Check this blog post for the details.

Customization Form

disabled
disabled
0
0

Customization Form Info & Definitions

Use the form above to change GPT options. Clicking submit button will reload the page with selected configuration. Follow timelines to observe what changes on selected GPT configuration. (Use pin button on the right corner of timeline panel to stick it to the top of the page.)

googletag.pubads().refresh() method doesn't update timelines to keep things simple. This demo only shows initial events for each slot.

Sample Setups

  • GPT "enableLazyLoad" (default lazyloading setup)

    This is the basic setup for GPT's built-in enableLazyLoad feature. Expected outcome is empty timelines until each slot enters into the viewport. Each timeline will be filled individually at this setup because enableSingleRequest option is not enabled.

    There will be 2 separate network requests for each ad which you can see at your devtool's network panel by filtering requests with ads? keyword.

  • GPT "enableLazyLoad" with "enableSingleRequest" enabled

    When enableSingleRequest is enabled along with enableLazyLoad option, individual behaviour above will be interrupted. With this setup ad requests will be merged by GPT.

    This time there will be a single network request for all ad slots at devtool's network panel. (Again, use ads? keyword as a filter.)

    A further note, lazy fetching with SRA (enableSingleRequest) will only work if all slots are out of viewport at initial page load. Otherwise both slots will be fetched initially at page load.

    Hint: Resize your browser window vertically to observe both. If both slots are out of the viewport, there will be 2 empty timelines initially. Else there will be a filled timelime for top slot and a slotRequested & slotResponseReceived couple for bottom slot.

  • Basic setup without "enableSingleRequest" and "enableLazyLoad"

    This is the initial setup for this demo page. Without single request and lazyloading.

Ad/Tracker Blockers I Use

The list is still the beginners stuff. Check privacytools.io/browsers to better adjust yourself with the details.