How Do I Create a Full Page Ad Unit in Google Ad Manager and Add It to My SoCast Website?

Step 1: Create a Full Page (Native) Ad Unit in Google Ad Manager

Note: The following steps only need to be performed once.

1. Log into Google Ad Manager.
2. Navigate to Delivery > Native and click New native ad.
3. Select Single ad.
4. Select HTML & CSS editor.
5. For the Ad Style Name, enter SoCast Full Page Ad Style. For Ad Size, choose Fluid. For Custom Format, select New format and name it SoCast Full Page Ad Format.
6. Click Add variable. Set the Type to File, select Require entry when trafficking, name the variable Background Image Desktop, and set the help text to 1024 px width by 768 px height. Ensure all image file types are allowed.
7. Click Add variable again. Set the Type to File, select Require entry when trafficking, name the variable Background Image Mobile, and set the help text to 768 px width by 1024 px height. Ensure all image file types are allowed.
8. Click Continue.
9. Go to the HTML tab.
10. Enter the following code in the HTML tab:

<a href="%%DEST_URL%%" target="_blank" class="socast_full_page_ad">
  <img src="[%BackgroundImageDesktop%]" alt="" class="desktop" />
  <img src="[%BackgroundImageMobile%]" alt="" class="mobile" />
</a>

11. Go to the CSS tab.
12. Enter the following code in the CSS tab:

.socast_full_page_ad {
  display: block;
}
.socast_full_page_ad img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
  object-position: 50% 47px;
}
.socast_full_page_ad img.desktop {
  display: block;
}
.socast_full_page_ad img.mobile {
  display: none;
}
@media only screen and (max-width: 768px), (orientation: portrait) {
  .socast_full_page_ad img.desktop {
    display: none;
  }
  .socast_full_page_ad img.mobile {
    display: block;
  }
}

13. Click Continue.
14. Click Save and activate.
15. Go to Inventory > Ad Units and click New ad unit.
16. For Name, enter SoCast Full Page Ad Unit. For Code, enter socast_full_page_ad_unit. For Size Mode, choose Fixed Size. For Sizes, select Fluid. Click Save.
17. Return to Inventory > Ad Units and open SoCast Full Page Ad Unit.
18. Go to Tags, select Google Publisher Tag, then click Continue.
19. Copy the Document Header and Document Body ad codes for later use.

Step 2: Set Up Ad Codes in SoCast

Note: The following steps only need to be performed once.

1. Log into the SoCast Admin Panel.
2. Go to Website > Website Settings and click the Advertising tab.
3. For the Ad Setup Code, check if Google ad code already exists (look for https://securepubads.g.doubleclick.net/tag/js/gpt.js). If it does not exist, paste the Document Header code here. If it does exist, extract the line starting with googletag.defineSlot from the Document Header code and insert it below the last googletag.defineSlot line in the Ad Setup Code field.
4. Scroll down to Ad Units and edit the Full Page Ad unit. Paste the Document Body ad code from Google into the field and click Save.

Step 3: Add a Full Page Ad Unit to a Page in SoCast

Note: The following steps only need to be performed once.

1. Go to Website > Pages and click Add Page.
2. Add a Full Page Ad Slot widget to the page.
3. If the page does not contain a sidebar, select No for the "Page Contains Side Bar" option.
4. If the page contains a sidebar below the ad unit, select Yes for "Page Contains Side Bar". Then, enable the sidebar for the page and select which sidebar to use.
5. If the page contains a sidebar above the ad unit, select Yes for "Page Contains Side Bar". Disable the sidebar on the page if you do not want a sidebar below the ad unit. Then, go to Website > Website Settings > Theme and click Launch Theme Editor.
6. Go to Advertising and choose a Side Bar Above Full Page Ad. Save the theme.

Step 4: Create a Full Page Ad Line Item in Google Ad Manager

Note: The following steps need to be performed every time you sell a new full page ad to an advertiser.

1. Log into Google Ad Manager.
2. Open an existing Order or create a new Order by going to Orders and clicking New order.
3. Fill in the Order information and click Add line item.
4. For Ad Type, select Display.
5. Provide a name for your line item. For Line Item Type, choose a priority that ensures ad delivery (lower number = higher priority). For Expected Creatives, select SoCast Full Page Ad Format. Choose a delivery start and end time. Click Save.
6. Go to the Creatives tab and click Add Creative.
7. Select New creative and choose SoCast Full Page Ad Format.
8. Provide a name and destination click-through URL for the creative. Under User-Defined Variables, upload a file for Background Image Desktop (recommended: 1024 px width by 768 px height) and Background Image Mobile (recommended: 768 px width by 1024 px height). Click Save and Preview.
9. Approve your Order by returning to the Order page and clicking Approve.

Tip: Your ad may take up to 10 minutes to appear. To diagnose issues, add ?google_console=1 to the end of your website URL in Google Chrome (e.g., https://d349.cms.socastsrm.com/full-page-ad-unit-test/?google_console=1).

By following these steps, you can successfully create, configure, and display a full page ad unit on your SoCast website using Google Ad Manager.