Prebid Example Does Not Work When Running on Local Dev Server

Question

TL;DR: Is it possible to test Prebid header bidding with Prebid.js v1.6.0 with a locally running web server?

I have created a library for integrating Prebid header bidding into web applications built with React. It works fine using Prebid 0.34.6 and I use it successfully in production.

I'm now migrating my library to use the latest version of Prebid, 1.6.0. I've followed the migration guide carefully and implemented all the changes outlined there.

To test my code, I've set up a demo application that runs on a local dev server.

In the debug output of the application, I can see that bids are received (log says INFO: Bids Received for Auction with id: aa5d34f4-3eb7-4cb0-a756-6f7cc4a18568).

However, no creatives are shown in the ad slots. My bidsBackHandler callback function receives an empty object as argument. When I call pbjs.getAdserverTargeting() on the browser's developer console, I also get an empty object.

On the Prebid example pages, there is a basic Prebid.js example shown for integrating Prebid into a web page, along with a JSFiddle.

I use the exact same and units and GPT configuration as used in the fiddle in my demo application, to no avail – no creative in the ad slots, only the “house ad” fallback, empty response to the bids back handler, empty ad server targeting.

Then I discovered if I copy the code from the basic Prebid.js example fiddle to an HTML page on my local dev server, it also fails the same way – no creative in the ad slots, only the “house ad” fallback, empty response to the bids back handler, empty ad server targeting.

I then created a sandbox with my demo (→ https://codesandbox.io/s/k5w8mr9o23), and there, I do get the desired result, the demo creative is shown.

It seems that with Prebid 1.x, you cannot get ad slots filled when running on localhost.

Can anyone confirm this? Is there a way to make this work?

Susurrous

Your sandbox seems to have an error? Can you instead provide a git repo I can try locally – Collete

Oh, sorry, I must have accidentally broken the sandbox when I was trying out stuff. It works now, please try again. You can download the code using the download button on the sandbox – Susurrous

What should I expect to see? It works for me locally as well on mac? – Collete

When I run it locally, in both slots, a house ad is displayed. Expected is to have a prebid ad in the upper slot and house ad only in the lower one. Do you have a prebid ad in the upper slot when running it Locally? – Susurrous

This is what I see in Sandbox i.sstatic.net/0Brqc.png and same in local – Collete

Do you have an ad blocker installed? It obviously does not work with an ad blocker – Susurrous

Let us continue this discussion in chat. – Collete

Answer 1

What's happening

The Prebid library needs cookies to work. It fails on your local dev server because cookies are problematic when running the web server on localhost.
You can verify this by typing document.cookie in your JavaScript console on the codesandbox demo and on your local server: a __gads cookie will be set where the demo works, but not on localhost.

__gads is a cookie set on your domain by Google ads. This is probably an issue on their side, not Prebid's.

How to fix it

The easiest way to fix this, is to avoid pointing your browser to localhost (or to 127.0.0.1 or other local IP addresses).
Instead set a different hostname for 127.0.0.1 (preferably containing at least two dots), and use such one. You can do this by adding an entry to your hosts file. Here instructions for Windows, Mac, Linux).

In my case (Linux system; should also work on Mac) I added the following line to /etc/hosts: 127.0.0.1 www.localhost.localdomain

Then directed my browser to www.localhost.localdomain:3000 and everything was working.
I can see that the __gads cookie is set at this address, while it's not set on localhost:3000.

Nannienanning

Great answer, we should probably add this info to the github page – Incorporeity