How Do I Create A Full Page Ad Unit?

How Do I Create A Full Page Ad Unit?

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

The following steps only need to be performed once

1. Log into Google Ad Manager
2. Go to Delivery > Native and click "New native ad"



3. Select "Single ad"



4. Select "HTML & CSS editor"



5. For the Ad Style Name, type "SoCast Full Page Ad Style". For the Ad Size, choose "Fluid". For the "Custom format", choose "New format". For the format name, type "SoCast Full Page Ad Format".


6. Click the "Add variable" button. For the Type, select "File". Select "Require entry when trafficking". For the Variable name, type "Background Image Desktop". For the help text, type "1024 px width by 768 px height". Select "Only allow certain file types when trafficking" and make sure all image types are selected.



7. Click the "Add variable" button again. For the Type, select "File". Select "Require entry when trafficking". For the Variable name, type "Background Image Mobile". For the help text, type "768 px width by 1024 px height". Select "Only allow certain file types when trafficking" and make sure all image types are selected.



8. Click "Continue"



9. Click on the HTML tab



10. Type the following code into 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. Type the following code into 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 the "Continue" button




14. Click the "Save and activate" button





15.Go to Inventory > Ad Units and click "New ad unit"




16. For the Name, type "SoCast Full Page Ad Unit". For the Code, type "socast_full_page_ad_unit". For the Size Mode, choose "Fixed Size". For the Sizes, choose "Fluid". Then, click "Save".




17. Go back 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 into Notepad to use later




How To Set Up Ad Codes In SoCast

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 (e.g. should contain "https://securepubads.g.doubleclick.net/tag/js/gpt.js"). If it doesn't exist, paste the Document Header code into this field.
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".



How To Add A Full Page Ad Unit To A Page In SoCast

The following steps only need to be performed once

Notes:
  1. If you set up the Full Page Ad code in the Website Advertising Settings it will also appear on all blog pages.
  2. If you only want the ad on pages (and not blogs) you need to insert the Full Page Ad widget manually onto each page
  3. Then you need to include the ad code in the widget on each page and NOT put it in advertising settings slot for the Full Page Ad.

1. Go to Website > Pages and click Add Page
2. Add a "Full Page Ad Slot" widget to the page



3. If the page doesn't contain a side bar, for the "Page Contains Side Bar" option select "No".



4. If the page contains a side bar below the the ad unit, select "Yes" for "Page Contains Side Bar". Then, enable the Side Bar for the page and select which side bar to use. 



5. If the page contains a side bar above the the ad unit, select "Yes" for "Page Contains Side Bar". Disable the side bar on the page if you don't want a side bar 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". Then, Save the theme. 


How To Create A Full Page Ad Line Item in Google Ad Manager

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 the Ad Type, select "Display"




5. Provide a name for your line item. For the Line Item Type, choose a priority that will ensure ad delivery (lower number ensures higher priority of delivery). For Expected Creatives, choose "SoCast Full Page Ad Format". Choose a delivery start and end time. Then, 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 the Background Image Desktop (recommended: 1024 px width by 768 px height) and Background Image Mobile (recommended: 768 px width by 1024 px height). Then, click "Save and Preview".




9. Make sure to Approve your Order by going back to the Order page and clicking "Approve"


Your ad may take 10 minutes to appear. To diagnose, try adding ?google_console=1 to the end of your website URL using Google Chrome to see why your ad isn't loading, e.g. https://d349.cms.socastsrm.com/full-page-ad-unit-test/?google_console=1

    • Related Articles

    • How Do I Add A Clickable PDF To A Page?

      This Article Is For: All users who have access to: Pages This is applicable to: All themes These are the instructions for adding a clickable PDF to a page, blog etc Step-by-step guide Upload your PDF to the SoCast media library After it has been ...

    • Full Page Ad Slot Element

      This Article Is For: All users who have access to one/all of the following: pages, contests, and sidebars This is applicable to: SoCast 3.0 Theme Requirements: Must already have a Google Ad Manager account (or a similar ad manager, approved by ...

    • Page FAQs

      Learn More: How Do I Add A Blog Grid List Layout To A Page? How Do I Add A Clickable PDF To A Page? How Do I Add A Header Image To A Page? How Do I Add A Page To My Website's Navigation? How Do I Build A Page For My Website? How Do I Change ...

    • How Do I Create A Page Template?

      This Article Is For: All users who have: Manage All Pages or Manage Selected Pages Permissions This is applicable to: All themes Follow these simple steps to create and reuse content by using the built-in template tool Step-by-step guide Click on the ...

    • How Do I Center An Ad Unit On A Page?

      This article relates to Google Ad Manager HTML Ad Tag Code When implementing Ad Unit code to your website, the default is to left align that ad unit. You can center your ad unit by wrapping your ad code with the following code: <div ...