<commit_before>---
layout: page_v2
title: Send Top Bid to Adserver
head_title: Getting Started with Prebid.js for Header Bidding
description: An overview of Prebid.js, how it works, basic templates and examples, and more.
sidebarType: 3
---



# Step by step guide to DFP setup

<div id="youtube">
<h2>(Sorry, YouTube videos aren't available with your cookie privacy settings.)</h2>
<p><a class="optanon-show-settings">Cookie Settings</a></p><br/>
</div>

<script type="text/javascript">
Optanon.InsertHtml('<iframe width="853" height="480" src="https://www.youtube.com/embed/-bfI24_hwZ0?rel=0" frameborder="0" allowfullscreen="true"></iframe>', 'youtube', null, {deleteSelectorContent: true}, 3);
</script>

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Correction:</span>
  Correction: in your Line Item settings, 'Display Creative' should be set to 'One or More', not 'As Many as Possible' as described in the video.
</div>

* TOC
{:toc }

## Step 1. Add a line item

In DFP, create a new order with a $0.50 line item.

Enter all of the inventory sizes that your website has.


![Inventory Sizes]({{ site.github.url }}/assets/images/demo-setup/inventory-sizes.png){: .pb-md-img :}

Because header bidding partners return prices, set the Line Item **Type** to **Price priority** to enable them to compete on price.

![Price Priority]({{ site.github.url }}/assets/images/demo-setup/price-priority.png){: .pb-sm-img :}

<br>

Set the **Rate** to $0.50 so that this line item will compete with your other demand sources at $0.50 ECPM.


![Rate]({{ site.github.url }}/assets/images/demo-setup/rate.png){: .pb-sm-img :}

<br>

Set **Display Creatives** to *One or More* since we'll have one or more creatives attached to this line item.

Set **Rotate Creatives** to *Evenly*.


![Display and Rotation]({{ site.github.url }}/assets/images/demo-setup/display-and-rotation.png){: .pb-sm-img :}

Choose the inventory that you want to run header bidding on.

By default, `prebid.js` will send the highest bid price to DFP using the keyword `hb_pb`.

This line item will capture the bids in the range from $0.50 to $1 by targeting the keyword `hb_pb` set to `0.50` in the **Key-values** section.

**You must enter the value to two decimal places, e.g., `1.50`.  If you don't use two decimal places, header bidding will not work.**


![Key-values]({{ site.github.url }}/assets/images/demo-setup/key-values.png){: .pb-lg-img :}

<br>

## Step 2. Add a Creative

Next, add a creative to this $0.50 line item; we will duplicate the creative later.

Choose the same advertiser we've assigned the line item to.

Note that this has to be a **Third party** creative. The **"Serve into a Safeframe"** box can be **UNCHECKED** or **CHECKED** (Prebid universal creatve is SafeFrame compatible).

Copy this creative code snippet and paste it into the **Code snippet** box.

    <script src = "https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/creative.js"></script>
    <script>
      var ucTagData = {};
      ucTagData.adServerDomain = "";
      ucTagData.pubUrl = "%%PATTERN:url%%";
      ucTagData.targetingMap = %%PATTERN:TARGETINGMAP%%;

      try {
        ucTag.renderAd(document, ucTagData);
      } catch (e) {
        console.log(e);
      }
    </script>


![New creative]({{ site.github.url }}/assets/images/demo-setup/new-creative.png){: .pb-lg-img :}

Make sure the creative size is set to 1x1.  This allows us to set up size override, which allows this creative to serve on all inventory sizes.

## Step 3. Attach the Creative to the Line Item

Next, let's attach the creative to the $0.50 line item you just created.  Click into the Line Item, then the **Creatives** tab.

There will be yellow box showing each ad spot that you haven't uploaded creatives for yet.  Since you've already made the creatives, click **use existing creatives** next to each size.

![Use existing creatives list]({{ site.github.url }}/assets/images/demo-setup/use-existing-creatives-01.png){: .pb-lg-img :}

In the pop-up dialog that appears, click **Show All** to remove the default size filters and see the 1x1 creatives. Include the prebid creative and click **Save**.

![Use existing creatives dialog]({{ site.github.url }}/assets/images/demo-setup/use-existing-creatives-02.png){: .pb-lg-img :}
<commit_msg>added note about older versions of PBJS not working with safeframes and newer PUC (#1196)<commit_after>---
layout: page_v2
title: Send Top Bid to Adserver
head_title: Getting Started with Prebid.js for Header Bidding
description: An overview of Prebid.js, how it works, basic templates and examples, and more.
sidebarType: 3
---



# Step by step guide to DFP setup

<div id="youtube">
<h2>(Sorry, YouTube videos aren't available with your cookie privacy settings.)</h2>
<p><a class="optanon-show-settings">Cookie Settings</a></p><br/>
</div>

<script type="text/javascript">
Optanon.InsertHtml('<iframe width="853" height="480" src="https://www.youtube.com/embed/-bfI24_hwZ0?rel=0" frameborder="0" allowfullscreen="true"></iframe>', 'youtube', null, {deleteSelectorContent: true}, 3);
</script>

<div class="alert alert-danger" role="alert">
  <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
  <span class="sr-only">Correction:</span>
  Correction: in your Line Item settings, 'Display Creative' should be set to 'One or More', not 'As Many as Possible' as described in the video.
</div>

* TOC
{:toc }

## Step 1. Add a line item

In DFP, create a new order with a $0.50 line item.

Enter all of the inventory sizes that your website has.


![Inventory Sizes]({{ site.github.url }}/assets/images/demo-setup/inventory-sizes.png){: .pb-md-img :}

Because header bidding partners return prices, set the Line Item **Type** to **Price priority** to enable them to compete on price.

![Price Priority]({{ site.github.url }}/assets/images/demo-setup/price-priority.png){: .pb-sm-img :}

<br>

Set the **Rate** to $0.50 so that this line item will compete with your other demand sources at $0.50 ECPM.


![Rate]({{ site.github.url }}/assets/images/demo-setup/rate.png){: .pb-sm-img :}

<br>

Set **Display Creatives** to *One or More* since we'll have one or more creatives attached to this line item.

Set **Rotate Creatives** to *Evenly*.


![Display and Rotation]({{ site.github.url }}/assets/images/demo-setup/display-and-rotation.png){: .pb-sm-img :}

Choose the inventory that you want to run header bidding on.

By default, `prebid.js` will send the highest bid price to DFP using the keyword `hb_pb`.

This line item will capture the bids in the range from $0.50 to $1 by targeting the keyword `hb_pb` set to `0.50` in the **Key-values** section.

**You must enter the value to two decimal places, e.g., `1.50`.  If you don't use two decimal places, header bidding will not work.**


![Key-values]({{ site.github.url }}/assets/images/demo-setup/key-values.png){: .pb-lg-img :}

<br>

## Step 2. Add a Creative

Next, add a creative to this $0.50 line item; we will duplicate the creative later.

Choose the same advertiser we've assigned the line item to.

Note that this has to be a **Third party** creative. The **"Serve into a Safeframe"** box can be **UNCHECKED** or **CHECKED** (Prebid universal creatve is SafeFrame compatible).

Copy this creative code snippet and paste it into the **Code snippet** box.

    <script src = "https://cdn.jsdelivr.net/npm/prebid-universal-creative@latest/dist/creative.js"></script>
    <script>
      var ucTagData = {};
      ucTagData.adServerDomain = "";
      ucTagData.pubUrl = "%%PATTERN:url%%";
      ucTagData.targetingMap = %%PATTERN:TARGETINGMAP%%;

      try {
        ucTag.renderAd(document, ucTagData);
      } catch (e) {
        console.log(e);
      }
    </script>


![New creative]({{ site.github.url }}/assets/images/demo-setup/new-creative.png){: .pb-lg-img :}

Make sure the creative size is set to 1x1.  This allows us to set up size override, which allows this creative to serve on all inventory sizes.

{: .alert.alert-warning :}
Note that safeframes don't work with older versions of Prebid.js (v1.23 and before) in combination with recent versions of [Prebid Universal Creative](https://github.com/prebid/prebid-universal-creative).

## Step 3. Attach the Creative to the Line Item

Next, let's attach the creative to the $0.50 line item you just created.  Click into the Line Item, then the **Creatives** tab.

There will be yellow box showing each ad spot that you haven't uploaded creatives for yet.  Since you've already made the creatives, click **use existing creatives** next to each size.

![Use existing creatives list]({{ site.github.url }}/assets/images/demo-setup/use-existing-creatives-01.png){: .pb-lg-img :}

In the pop-up dialog that appears, click **Show All** to remove the default size filters and see the 1x1 creatives. Include the prebid creative and click **Save**.

![Use existing creatives dialog]({{ site.github.url }}/assets/images/demo-setup/use-existing-creatives-02.png){: .pb-lg-img :}

{'fraction_non_alphanumeric': 0.133318715053174, 'fraction_numerical': 0.012169718232649928, 'mean_word_length': 4.073414905450501, 'pattern_counts': {'":': 0, '<': 55, '<?xml version=': 0, '>': 55, 'https://': 5, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5071110', 'n_tokens_mistral': 2981, 'n_tokens_neox': 2806, 'n_words': 1085}