FANDOM


Step 1. Make sure your page meets the requirements.Edit

To add the AdFrames ad unit to a particular page, it must meet the following requirement:

  • The page may not have any CSS layers whose z-index is greater than 9999. Our ad has to display on top of everything else and it displays at a z-index of 9999. If you don't know what a z-index is, you're probably fine and don't have to worry about it.
  • The ad unit itself must not be served through an iframe. Many Ad Servers like DoubleClick have the option of serving an ad through JavaScript or by placing a small iframe on the page containing the ad. AdFrames are designed to take over the entire page when you roll over the unit. If the AdFrames unit is placed in an iframe it cannot properly expand over the page.

Step 2. Create a test environment.Edit

You will need to integrate the ad into a test page that we can see to verify that everything is working correctly. This should be an exact copy of the page that the production ad will be embedded in but in a private testing environment. If you have a dev version of your page that will work perfectly. If not, copy the page in your production site to a private URL.  For example, if the ad is going to end up on index.php, create index_test.php that you can use for development and embed the ad there.

Step 3. Pick a size.Edit

What size ad formats do you offer?

Select an ad unit from the list, note the width and height, and follow the steps below to add the AdFrame into a page.

Step 4. Embed the AdFrame in your page.Edit

For web sites, VideoEgg will issue a Publisher ID, a Site ID, and an Area ID.  The Publisher ID identifies the publisher of the site, the Site ID identifies the web site or platform, and the Area ID identifies the web page. If you have multiple sites, they will all have the same Publisher ID, but different Site IDs.

For development, use "testPublisher" as the Publisher ID, "testSite" as the Site ID and "testArea" as the Area ID. This is an example of what the most basic integration code (or "ad tag") looks like:

<script>
var ve_publisher = "testPublisher";
var ve_site = "testSite";
var ve_area = "testArea";
var ve_width = 728;
var ve_height = 90;
document.write("<script src='http://core.videoegg.com/eap/html/js/init.js?" + Math.random() + "'><\/script>");
</script>


Possible variables include:

Parameter Value Required? Example Description !
ve_publisher string yes "pubname" Name of publisher. This is used for targeting and reporting.
ve_site string yes "facebook" Name of site where this ad is displaying. This is used for targeting and reporting.
ve_area string yes "appname" This will be the application name. This is used for targeting and reporting.
ve_width positive integer yes 616 Width of the invitation to display.
ve_height positive integer yes 70 Height of the invitation to display.
ve_a integer No 30 Age of the user viewing this ad in years.
ve_g string No "f" Gender of the user. Lowercase letter m or f.
ve_parentElement string no "my_ad_container" The id of the DOM div object into which the ad should be placed.
ve_alternate string or js function no "http://somesite.com/myalternatead.html" Alternate content to display if AdManager is unable to obtain an ad from the ad server. Further describe in Step 7.

For the "width" and "height" parameters, use the width and height values that correlate to the ad unit chosen from the table at the top of the guide. The channel will be one of the following values: automotive, business, entertainment, family, gaming, health, music, news, shopping, sports, technology, travel. Age and gender are optional, but highly recommended if they're available.

Step 5. (Optional) Specify where on the page the ad should be placed.Edit

The JavaScript examples given so far will place the ad wherever the code appears on your page. For added flexibility, you can specify a div element elsewhere on the page to contain the ad. To do this, set ve_parentElement to the id of the div:

<div id="ve_ad" [...]></div>
[...]
<script>
[...]
var ve_parentElement = "ve_ad";
[...]
</script>

You must make sure the div element exists at the time the integration code executes.

Step 6. (Optional But Highly Recommended) Specify an alternate behavior when no ad is available.Edit

We do our best to fill as much of your inventory with high-quality, high performance ads as possible, but in cases where we don't have an appropriate ad to fill the spot, you have a couple of options. By default, the space will remain empty when no ad is available. You can override this behavior by defining an alternate behavior in your ad call. To do this, you can set the 've_alternate' variable. For example:

<div id="ve_ad" [...]></div>

[...]

<script>
var ve_publisher = "testPublisher";
var ve_site = "testSite";
var ve_area = "testArea";
var ve_width = 300;
var ve_height = 250;
var ve_parentElement = "ve_ad";

var ve_alternate = "http://www.yourserver.com/alternate.html";

document.write("<script src='http://core.videoegg.com/eap/html/js/init.js?" + Math.random() + "'><\/script>");
</script>


The alternate behavior can be one of the following:

  • An absolute URL (string)

The URL will get loaded in an iframe where the ad would normally appear. You can use this area to run your own ads, run a cross-promotion for your other applications, or display any other content. The iframe will be sized with a height that matches the ad frame's width. For example:

var ve_alternate = "http://www.yourserver.com/alternate.html";

  • JavaScript function: Your function will be called when no ad is available with a single argument containing the DOM div object where the ad would normally appear. This allows you to collapse the div or fill it with alternate content. For example, you could collapse the ad unit div and dynamically fill another div at another location on your page:

function myNoAdCallback(div)
{ 
    div.style.display = "none"; 

    insertMyAd(); 
}

var ve_alternate = myNoAdCallback;

NOTE:Do not surround the javascript function with quotes. The function will not be called.

  • collapse: This collapses the div containing the ad unit.

var ve_alternate = "collapse";

To test the alternate functionality, set ve_publisher to "testpublisher123", ve_site to "testsite123", and ve_area to"testapplication123".

Step 7. Request verification.Edit

Load your page and make sure that that ads work. Things you will want to verify:

  • The ad displays in the location you intended.
  • The ad transitions into show a full page takeover when the invitation is clicked. The takeover should display a rich media ad with a video that plays.
  • Other elements on your page do not conflict with the rendering of the ad invitation or ad takeover. If any of your page elements display on top of the takeover, they are probably using a z-index greater than 9999. You will need to adjust your page layout to use a z-index less than 9999.
  • Clicking close on the ad takeover closes the ad and returns the user to your page.

Note that during development, you'll always see the same test ads running. Once you start using your production Publisher ID, Site ID, and Area ID, you'll start seeing real ads. Also note that if you are opening files containing the ad tag locally you will NOT see an ad if you’re on Windows. Windows considers it a security risk and won’t render anything. You need to host them to see an ad.

Once you've got it working, login to the VideoEgg Portal. After you've logged in, click the "Request Verification" button next to your application under the "Setup" tab. We'll review your test page to make sure everything is working, and then will send you a verification email once you've been approved.  It usually takes a day or two to approve new pages, so please be patient.  You can also periodically check the "Status" field in the application list; it will be set to an "Approved" state once approval is complete.  The production publisher and application IDs are auto-generated and are listed with your application in the setup list.

Step 8. Enable live ads.Edit

Replace the test values in your code with the IDs described in the previous step, once you receive formal approval.  After this step is complete, you can begin serving live ad campaigns! Please keep in mind: if live ads are not appearing, it may be because there are no campaigns targeted to your users at that time. We recommend that you implement the "alternate" parameter to provide an alternate display when an ad isn't available. The "alternate" parameter is described in Step 6.

ExamplesEdit

Here is a sample ad: link.

Here is an example of the alternate set to "collapse": link.

Here is an example of the alternate that uses custom javascript: link.

Here is an example of the alternate that URL: link.

You can find the source code or all these pages here.

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.