Takeover

This article will walk you through creating a Takeover Ad using Adventive’s Takeover template.

A Takeover format will load as a teaser with a wallpaper (two floating gutters on each side of the center content area) and on click, hover, or timed it pushes down the page content to reveal a large ad (per site specs).  The Wallpaper portion of this format can be either images or a video wall. 

Takeover units vary greatly depending on site, so be sure to contact support@adventive.com to test prior to your first campaign.  This also applies to site re-design or if different sections of your site are set up differently - please contact us to test before going live with a campaign.

Examples:

Example 1 Image 

Example 2 Video 

Fashion Example

Note:  A separate blank canvas will show on Screen 1 (collapsed teaser ad) and Screen 2 (expanded larger ad) when you begin to build your ad.  The Wallpaper portion will not show in the builder – you will need to Preview along the way. 

Default “Expand Ad” and “Collapse Ad” placeholders will
also show on each canvas – these can be deleted if you plan to apply an auto expand/collapse push action later.


Takeover Ad Unit
In the Builder, Create a New File, type in File Name, and select Takeover from the format dropdown. 

 

Set your dimensions for the pushdown portion of your build by selecting "custom" from the dropdown and putting in your Width and Height 1st and 2nd screen dimensions.

 

Backup Image – Any image asset that matches the dimensions you’ve entered will be displayed in the dropdown list. You can select one here or add a backup in the builder under general properties in the “Fallback Image” field.  This Backup Image will be displayed if the user’s browser is out of date and cannot support HTML5.

Click URL – The default click URL. The click URL is automatically applied to any area of the ad unit without an associated click or event action (i.e. buttons, hitboxes, expand actions etc.). Users that click on the fallback image will also be directed to this URL.

Click Submit.


Setting Up Your Canvas
A blank canvas will load on Screen 1 and Screen 2.  This is where you'll place your pushdown content (wallpaper content will be uploaded later).

Ad Properties (In the Properties panel to the right of the Builder)

Width and Height
The Width and Height of each canvas will be the sizes you chose from the Create New File template.

Screen 1:

 

Example Build

Add Assets to your canvas

While in Screen 1, Click on the Asset icon  and select your asset, or upload a new one by clicking the cloud icon at the bottom left of the window.

You will now have a layer at the bottom of the builder for your image, as well as the “Expand Ad” placeholder. 

 

If you want to delete the “Expand Ad” placeholder and set the action to an image or hitbox, select the Expand Ad layer and then delete by pressing Delete on your keyboard or clicking Delete.  If you want to keep it, you can move the layer so it sits above your image.

Now click on the image layer and use the Properties Panel to the right in the builder to add any Actions if needed (Actions will show at the bottom right of builder with asset/placeholder selected). 

In this example we will not put an action on the image and just select “Expand Ad” which as a default already has a Go to Screen 2 click push action on it (this is a default setting on the placeholder for this type of format/can be changed):

Example of timed/auto-expand push action:

 

Follow similar steps as above for Screen 2. Click on the Asset icon  and select your asset, or upload.

You will now have a layer at the bottom of the builder for your image, as well as the “Collapse Ad” placeholder. 

 

If you want to delete the “Collapse Ad” placeholder and set the action to an image or hitbox, select the Collapse Ad layer and then delete by pressing Delete on your keyboard or clicking Delete.  If you want to keep it, you can move the layer so it sits above your image.

Now click on the image layer and use the Properties Panel to the right in the builder to add any Actions if needed (Actions will show at the bottom right of builder with asset/placeholder selected). 

In this example we will not put an action on the image and just select “Collapse Ad” which as a default already has a Go to Screen 1 click push action on it (this is a default setting on the placeholder for this type of format/can be changed):

Example of timed/auto-collapse push action:

 

Example of placing the Hitbox tool over the Close button (if you have a close button already within the creative instead of using the “collapse ad” placeholder):

Select the Hitbox icon  .

A blue hitbox will appear in the top left corner of the ad.  You can move it over the area for action as well as resize it.  (Note:  You can have an unlimited amount of Hitboxes over areas).

Hitbox placed over Close Button:

 

With the Hitbox selected, apply a close action in the Properties panel.

 

Note, you can add additional screens to any ad format by clicking the + icon in the screens and layers panel as well as Rename.  * You can select a screen and drag it/reorder the screens - this will automatically update the ordering numbers listed on the Screen tabs.  (You should check any previous actions you have in case you need to update Go to Screen actions, etc.)  Also see Screens & Layers article here.

Next Step – Setting up the Wallpaper portion of ad.

Click off the Canvas and go to General Properties to the right and go to Takeover Settings (right hand bottom):

Page Width – by default, content width is set to 970px.  Click the arrows or into the field to change according to your site’s page content area width that is needed.  *Recommended if your Pushdown portion of the unit is smaller/not the full width of page content/doesn’t meet up with your wallpaper background.  By setting your page width, you will avoid a clickthrough happening in the area between your pushdown and your wallpaper background.

You will want to choose Right and Left Floating image options IF PROVIDED a right and left image (for both right and left gutter areas for the Wallpaper).

You will want to choose Image/Video Wall IF YOUR WERE PROVIDED one large image that will span across entire left, center, and right areas and/or a video (video wall).

Settings below:

Floating Image (Right) – select this to upload an image for the right gutter (if you have separate assets for right and left gutters):

           

  • Right Side Image - Click into this field to upload the right gutter asset
  • Right Image Click URL – can paste/type a url into this field (OR leave blank and this area will automatically go to the default url that was set in General Properties)

 

Floating Image (Left) – select this to upload an image for the left gutter (if you have separate assets for right and left gutters):

          

  • Left Side Image - Click into this field to upload the left gutter asset
  • Left Image Click URL – can paste/type a url into this field (OR leave blank and this area will automatically go to the default url that was set in General Properties)

 

Image/Video Wall – select this to upload a large image or video (video wall) (for this example ad, we will upload an image) and enter a click url:

  • Source - Click into this field to upload the image or video asset
  • Wall Clickthrough – can paste/type a url into this field (OR leave blank and this area will automatically go to the default url that was set in General Properties)

Save the ad.

Go to the Preview icon  to view the ad. 

Example Preview: