Invocation Codes

The Invocation Codes pane of the Placement page includes various codes which should be inserted to your website or application.
Its key purpose is to request and serve ads and to transmit analytical information to the Epom Ad Server.

808

The Invocation Codes pane includes all the code types available for the current Placement Type:

  • Standard Site Placement: Universal JS, Iframe (Sync and Async), Simple Iframe, JS (Sync and Async), Direct URL, API
  • Non-Standard Site Placement: Universal JS, JS (Sync and Async), Direct URL, API
  • Mobile Site Placement: Universal JS, Iframe (Sync and Async), JS (Sync and Async), PHP, Direct URL, API
  • Video Placement: Vast 2.0; Vast 3.0 tags and OVA configs
  • It also contains the Settings section, where you can save the Channel, Custom Parameter and/or 3rd Party Click Tracking Url values for further usage. This will allow you to apply the frequently used Channels, Custom Parameters and/or 3rd Party Click Tracking Urls to the Invocation Codes of any Placements in your network in a matter of seconds instead of manually inserting those for each and every Placement.

719

Invocation Codes Specifics

  • For Universal JS code there are two additional options: Domain which allows to select ad serving domain from the list, and Ad Wrapper (for Standard Site Placement invocation codes only). The values are: Without Wrapper, Friendly Frame (default), Sandboxed Frame, No-redirect Frame.
  • A Fit container option is used for Universal JS invocation codes at Non-standard and Mobile placements. For outstream ad formats (interstitial, footerbar, etc.) Friendly Frame Ad Wrapper should be used with Fit container inactive. For banner ad formats Friendly Frame Ad Wrapper should be used with activated Fit container option. It allows banner to "fit" 100% of the container in which the code is executed.
  • Typically, elements of the web-pages are executed sequentially. If the Sync (synchronous) code - either iframe or JS - is used, it won't be requested until all the preceding elements have been loaded.
  • Asynchronous (Async) Codes provide an option to load elements in an order that is different from the way it has been organized in the web-page markup.
  • It is not recommended to use Sync and Async codes on the same web-page in order to avoid conflicts.
  • Async codes consists of two parts - HEAD and BODY. The HEAD tag can be placed anywhere on the page. BODY is a placeholder for the ad and should be placed at the spot where you would like your ad to be displayed.
  • The default size of the iframe Invocation Codes for Mobile Placements is 320x50. If the Ad Unit has a different size, the corresponding values should be inserted to the supp_width and supp_height parameters of the Invocation Codes.
  • All the Invocation Codes support the Cache Buster mechanism which prevents browsers from reusing an ad that has already been seen and cached previously.

Below you can find examples of different Invocation Codes along with the explanations of their structure.

Universal JS

<ins class="8116ce48" data-key="09f6b62a47c0f7e98aeb36130d4cc320" 
data-channel="channel" data-cp-param="value"></ins>

<script async defer src="//adserving-domain.com/ee7f0787.js"></script>
  • data-key - unique Placement Key
  • data-channel - parameter for Channel Targeting.
  • data-click - parameter for Third Party Ad Server Click Tracking
  • data-cp-* - section for Custom Parameters (Sample: data-cp-pubId="PUB_ID_VALUE")
  • data-width - Placement width
  • data-height - Placement height

Iframe Sync

<!-- BEGIN TAG - DO NOT MODIFY -->
 
 <script type="text/javascript">
 
 /*<![CDATA[*/
 
 supp_key = "90753ccb2860340d85e7ed09cda4c4f8";

 supp_channel = "";
 
 supp_code_format = "ads";

 supp_click = "";

 supp_custom_params = {};

 supp_width = "300";

 supp_height = "250";

 /*]]>*/

 </script>
 
 <!-- END TAG -->
  • supp_key = "XXXXX" - unique Placement Key.
  • supp_channel = "CHANNEL_VALUE" - parameter for Channel Targeting.
  • supp_code_format = "XXXXX" - code format (JS, iframe, etc.)
  • supp_click = "3RD_PARTY_CLICK_MACRO" - parameter for Third Party Ad Server Click Tracking.
  • supp_custom_params = {} - section for Custom Parameters.
  • supp_width = "XXX" - Placement width.
  • supp_height = "XXX" - Placement height.

Iframe Async

<!-- BEGIN TAG - HEAD -->
 
 <script type="text/javascript">
 
  /*<![CDATA[*/
 
  var EpomConfig = EpomConfig || {ads:[]};
 
  EpomConfig.ads.push({
 
  supp_key:"90753ccb2860340d85e7ed09cda4c4f8",

  supp_channel: "",
 
  supp_code_format:"ads",

  supp_click:"",

  supp_custom_params:{},

  supp_width:"300",

  supp_height:"250",

  supp_target_id:"epom-90753ccb2860340d85e7ed09cda4c4f8-300x250"

  });
 
  (function () {
 
  var sc = document.createElement("script");
 
  sc.type = "text/javascript";
 
  sc.async = true;
 
  sc.src = (location.protocol == "https:" ? 

  "https:" : "http:") + "//adserving-domain.com\/js\/show_ads.js?pubId=2";

  var s = document.getElementsByTagName("script")[0];
 
  s.parentNode.insertBefore(sc, s);
 
  })();
 
  /*]]>*/
 
 </script>
 
 <!-- END TAG - HEAD -->
 
 <!-- BEGIN TAG - BODY -->
 
 <div id="epom-90753ccb2860340d85e7ed09cda4c4f8-300x250"></div>
 
 <!-- END TAG - BODY -->
  • supp_key = "XXXXX" - unique Placement Key.
  • supp_channel = "CHANNEL_VALUE" - parameter for Channel Targeting.
  • supp_code_format = "XXXXX" - code format (JS, iframe, etc.)
  • supp_click = "3RD_PARTY_CLICK_MACRO" - parameter for Third Party Ad Server Click Tracking.
  • supp_custom_params = {} - section for Custom Parameters.
  • supp_width = "XXX" - Placement width.
  • supp_height = "XXX" - Placement height.
  • supp_target_id:"epom-90753ccb2860340d85e7ed09cda4c4f8-300x250" - HTML <div> tag ID of the banner.

JS Sync

<!-- BEGIN TAG - DO NOT MODIFY -->
 
 <script type="text/javascript">
 
 /*<![CDATA[*/
 
 supp_key = "90753ccb2860340d85e7ed09cda4c4f8";

 supp_channel = "";
 
 supp_code_format = "ads-sync.js";

 supp_click = "";

 supp_custom_params = {};

 /*]]>*/

 </script>
 
 <!-- END TAG -->
  • supp_key = "XXXXX" - unique Placement Key.
  • supp_channel = "CHANNEL_VALUE" - parameter for Channel Targeting.
  • supp_code_format = "XXXXX" - code format (JS, iframe, etc.)
  • supp_click = "3RD_PARTY_CLICK_MACRO" - parameter for Third Party Ad Server Click Tracking.
  • supp_custom_params = {} - section for Custom Parameters.

JS Async

<!-- BEGIN TAG - HEAD -->

  <script type="text/javascript">

  /*<![CDATA[*/

  var EpomConfig = EpomConfig || {ads:[]};

  EpomConfig.ads.push({

  supp_key:"90753ccb2860340d85e7ed09cda4c4f8",

  supp_channel: "",

  supp_code_format:"ads-async.js",

  supp_click:"",

  supp_custom_params:{},

  supp_target_id:"epom-90753ccb2860340d85e7ed09cda4c4f8-300x250"

  });
 
  (function () {
 
  var sc = document.createElement("script");
 
  sc.type = "text/javascript";
 
  sc.async = true;
 
  sc.src = (location.protocol == "https:" ? "https:" : "http:")

  + "//adserving-domain.com\/js\/show_ads.js?pubId=2";

  var s = document.getElementsByTagName("script")[0];
 
  s.parentNode.insertBefore(sc, s);
 
  })();
 
  /*]]>*/
 
 </script>
 
 <!-- END TAG - HEAD -->
 
 <!-- BEGIN TAG - BODY -->
 
 <div id="epom-90753ccb2860340d85e7ed09cda4c4f8-300x250"></div>
 
 <!-- END TAG - BODY -->
  • supp_key = "XXXXX" - unique Placement Key.
  • supp_channel = "CHANNEL_VALUE" - parameter for Channel Targeting.
  • supp_code_format = "XXXXX" - code format (JS, iframe, etc.)
  • supp_click = "3RD_PARTY_CLICK_MACRO" - parameter for Third Party Ad Server Click Tracking.
  • supp_custom_params = {} - section for Custom Parameters.
  • supp_target_id:"epom-90753ccb2860340d85e7ed09cda4c4f8-300x250" - HTML <div> tag ID of the banner.

Simple iframe

<iframe src="http://adserving-domain.com/ads?key=90753ccb2860340d85e7ed09cda4c4f8"

  width="300" height="250" frameborder="0" scrolling="no"></iframe>
  • key=XXXXX - unique Placement Key.
  • width="XXX" - Placement width.
  • height="XXX" - Placement height.
  • frameborder = "0" - Border of the iframe.
  • scrolling="yes/no" - Specifies whether or not to display scrollbars in the iframe.

Direct URL

http://adserving-domain.com/zisNuRpgaG_ruGPLuuzi4b3EKpjVgnISDITPTyhtzTxB1jdIFsiMAZ_l_FaM-_wgAHxu6XMGvQZL7v6MJ

API

http://adserving-domain.com/ads-api?key=b123f854b8dc6377db94e9523ecedc3b
&clientIp=112.12.23.33&requestUrl=http://epom.com&format=html

You can serve any types of ads by forming HTTP requests and sending them. The API response can have an HTML, JSONP, JSON or XML format.

Using Multiple JS Async Invocation Codes on one page

To place two Async Invocation Codes on the same page they must be combined together:

  • Copy the Configuration section from the HEAD of the Invocation Code.:
  • Paste this section to the HEAD of the second Invocation Code.
  • Insert the Division Units (<div> tags) from the BODY sections of Invocation Codes in the body of the web-page at the spots where you'd like your ads to be displayed.
  • ❗️

    Warning!

    The Division Unit Identifiers should be different in order for both the ads to be displayed. Therefore, when using the same tag on the page multiple times, add any symbol to the supp_target_id and the corresponding Div IDs, i.e.:

    <supp_target_id:"epom-90753ccb2860340d85e7ed09cda4c4f8X-300x250">
    <div id="epom-90753ccb2860340d85e7ed09cda4c4f8X-300x250">

    As a result, your Web page will be structured in the following way:

    &lt;!DOCTYPE html&gt;<br />
    &lt;html&gt;<br />
    &lt;head&gt;<br />
    &lt;title&gt;Test page&lt;/title&gt;<br />
    <br />
    &lt;script type=&quot;text/javascript&quot;&gt;<br />
    /*&lt;![CDATA[*/<br />
    <strong>/*First Invocation Code part*/</strong><br />
    var EpomConfig = EpomConfig || {ads:[]};<br />
    EpomConfig.ads.push({<br />
    supp_key:&quot;90753ccb2860340d85e7ed09cda4c4f8&quot;,<br />
    supp_channel: &quot;&quot;,<br />
    supp_code_format:&quot;ads-async.js&quot;,<br />
    supp_click:&quot;&quot;,<br />
    supp_custom_params:{},<br />
    supp_target_id:&quot;epom-90753ccb2860340d85e7ed09cda4c4f8-300x250&quot;<br />
    });<br />
    <br />
    <strong>/*Second Invocation Code part*/</strong><br />
    var EpomConfig = EpomConfig || {ads:[]};<br />
    EpomConfig.ads.push({<br />
    supp_key:&quot;90753ccb2860340d85e7ed09cda4c4f8&quot;,<br />
    supp_channel: &quot;&quot;,<br />
    supp_code_format:&quot;ads-async.js&quot;,<br />
    supp_click:&quot;&quot;,<br />
    supp_custom_params:{},<br />
    supp_target_id:&quot;epom-90753ccb2860340d85e7ed09cda4c4f8<strong><u>X</u></strong>-300x250&quot;<br />
    });<br />
    <strong>/*End of the second Invocation Code part*/</strong><br />
    <br />
    (function () {<br />
    var sc = document.createElement(&quot;script&quot;);<br />
    sc.type = &quot;text/javascript&quot;;<br />
    sc.async = true;<br />
    sc.src = (location.protocol == &quot;https:&quot; ? &quot;https:&quot; : &quot;http:&quot;) + &quot;//adserving-domain.com\/js\/show_ads.js?pubId=2&quot;;<br />
    var s = document.getElementsByTagName(&quot;script&quot;)[0];<br />
    s.parentNode.insertBefore(sc, s);<br />
    })();<br />
    /*]]&gt;*/<br />
    &lt;/script&gt;<br />
    &lt;/head&gt;<br />
    <br />
    &lt;body&gt;<br />
    <br />
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, aliquam provident, sequi ex neque voluptatum tempora harum reprehenderit, perferendis, quaerat nihil amet! Asperiores corrupti, nemo ea quam nobis magni architecto.&lt;/p&gt;<br />
    <br />
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, aliquam provident, sequi ex neque voluptatum tempora harum reprehenderit, perferendis, quaerat nihil amet! Asperiores corrupti, nemo ea quam nobis magni architecto.&lt;/p&gt;<br />
    <br />
    &lt;div id="epom-90753ccb2860340d85e7ed09cda4c4f8-300x250"&gt;&lt;/div&gt;<br />
    <br />
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, aliquam provident, sequi ex neque voluptatum tempora harum reprehenderit, perferendis, quaerat nihil amet! Asperiores corrupti, nemo ea quam nobis magni architecto.&lt;/p&gt;<br />
    <br />
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, aliquam provident, sequi ex neque voluptatum tempora harum reprehenderit, perferendis, quaerat nihil amet! Asperiores corrupti, nemo ea quam nobis magni architecto.&lt;/p&gt;<br />
    <br />
    &lt;div id="epom-90753ccb2860340d85e7ed09cda4c4f8<strong><u>X</u></strong>-300x250"&gt;&lt;/div&gt;<br />
    <br />
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, aliquam provident, sequi ex neque voluptatum tempora harum reprehenderit, perferendis, quaerat nihil amet! Asperiores corrupti, nemo ea quam nobis magni architecto.&lt;/p&gt;<br />
    <br />
    &lt;/body&gt;<br />
    &lt;/html&gt;<br />