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.

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

  • Standard Site Placement: AJAX, Iframe (Sync and Async), Simple Iframe, JS (Sync and Async), Direct URL, API
  • Non-Standard Site Placement: AJAX, JS (Sync and Async), Direct URL, API
  • Mobile Site Placement: AJAX, Iframe (Sync and Async), JS (Sync and Async), PHP, Direct URL, API
  • Video Placement: Vast 2.0; Vast 3.0 tags and OVA configs
  • Application Placement: Android SDK, iOS SDK, JS Sync, API
  • Email Placement: HTML markup for emails

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.

Invocation Codes specifics

  • For Ajax 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.
  • 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 (except Email Placement 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.

Ajax

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

<script async defer src="//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:") + "//n244adserv.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:")
+ "//n244adserv.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.
note JS Async
Note!

Using multiple independent Async Invocation Codes on the same page might cause loading problems. Therefore, the codes should be combined beforehand. Please refer to this instruction for details.

Simple iframe

<iframe src="http://n244adserv.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://n244adserv.com/ads?key=90753ccb2860340d85e7ed09cda4c4f8
&width=300&height=250
  • key=XXX - unique Placement Key.
  • width=XXX - Placement width.
  • height=XXX - Placement height.

API

http://www.adshost2.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. For more detailed information please refer to the corresponding articles: Advertiser API, Publisher API, Placement API.

JSP

JSP code is used for integration into Java Server Pages server-side code.

<%@ page import="java.util.*,java.io.*, java.net.*" %>
<%@ page import="java.util.zip.GZIPInputStream" %>
<%adProcess("984f4836bf45f83377f03dd4b507f5d8", request, response, out);%>
<%!
public void adProcess(String key, HttpServletRequest request, HttpServletResponse response, JspWriter out) {
try {
String url = URLEncoder.encode(request.getRequestURL().append(null != request.getQueryString() ? ("?" + request.getQueryString()) : "").toString(), "UTF-8");
String ip = URLEncoder.encode(request.getRemoteAddr(), "UTF-8");
String postContent = "key=" + key + "&requestUrl=" + url + "&clientIp=" + ip;
HttpURLConnection con = (HttpURLConnection) new URL("http://n244adserv.com/ads-api").openConnection();
Enumeration headers = request.getHeaderNames();
while (headers.hasMoreElements()) {
String name = (String) headers.nextElement();
if("content-encoding".equalsIgnoreCase(name)){
continue;
}
String value = request.getHeader(name);
con.setRequestProperty(name, value);
}
con.setConnectTimeout(5000);
con.setReadTimeout(5000);
con.setDoInput(true);
con.setDoOutput(true);
con.setUseCaches(false);
con.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
con.setRequestProperty("charset", "UTF-8");
con.setRequestMethod("POST");
String contents = "";
DataOutputStream post = new DataOutputStream(con.getOutputStream());
post.writeBytes(postContent);
InputStream is = con.getInputStream();
String contentEncoding = con.getContentEncoding();
if(contentEncoding != null && contentEncoding.contains("gzip")){
is = new GZIPInputStream(is);
}
BufferedReader br = new BufferedReader(new InputStreamReader(is));
try {
String line;
while (null != (line = br.readLine())) {
contents += line;
}
if (null != contents) {
out.print(contents);
}
} finally {
br.close();
is.close();
}
} catch (Exception ex) {
}
}
%>

PHP

PHP code is used for integration into PHP server-side code.

<?php
if (!function_exists('apache_request_headers')) {
eval('
function apache_request_headers() {
foreach($_SERVER as $key=>$value) {
if (substr($key,0,5)=="HTTP_") {
$key=str_replace(" ","-",ucwords(strtolower(str_replace("_"," ",substr($key,5)))));
$out[$key]=$value;
}
}
return $out;
}
');
}
function adProcess($key){
$protocol = strpos(strtolower($_SERVER['SERVER_PROTOCOL']),'https') === false ? 'http' : 'https';
$host = $_SERVER['HTTP_HOST'];
$script = $_SERVER['SCRIPT_NAME'];
$params = $_SERVER['QUERY_STRING'];
$url = $protocol . '://' . $host . $script . '?' . $params;
$ip = $_SERVER['REMOTE_ADDR'];
$postContent = 'key=' . $key . '&requestUrl=' . urlencode($url) . '&clientIp=' . $ip;
$c = curl_init ('http://n244adserv.com/ads-api');
curl_setopt ($c, CURLOPT_POST, true);
curl_setopt ($c, CURLOPT_POSTFIELDS, $postContent);
curl_setopt ($c, CURLOPT_RETURNTRANSFER, true);
curl_setopt($c, CURLOPT_TIMEOUT, 5000);
$headers = apache_request_headers();
unset($headers['Host'], $headers['Connection'], $headers['Pragma'], $headers['Cache-Control'], $headers['Cookie']);
$stack = array();
foreach ($headers as $k => $v ) {
array_push($stack, $k . ':' . $v);
}
curl_setopt($c, CURLOPT_HTTPHEADER, $stack);
$page = curl_exec ($c);
curl_close ($c);
echo $page;
}
adProcess('984f4836bf45f83377f03dd4b507f5d8');
?>

iOS SDK

Documentation for the iOS integration specifics is provided along with the SDK that can be downloaded directly from the iOS SDK tab of the Invocation Codes pane.

Android SDK

Documentation for the Android integration specifics is provided along with the SDK that can be downloaded directly from the Android SDK tab of the Invocation Codes pane.


Using multiple Async codes on one page

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

  1. Copy the Configuration section from the HEAD of the Invocation Code. For standard JS Async code it will look similar to:
  2. 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"
    });
  3. Paste this section to the HEAD of the second Invocation Code. The resulting code will look similar to this.
  4. <!-- BEGIN TAG - HEAD -->
    <script type="text/javascript">
    /*<![CDATA[*/
    /*First Invocation Code part*/
    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"
    });
    /*Second Invocation Code part*/
    var EpomConfig = EpomConfig || {ads:[]};
    EpomConfig.ads.push({
    supp_key:"c7b5089cc1f0c951aae7a43d4fbcd0a50",
    supp_channel: "",
    supp_code_format:"ads-async.js",
    supp_click:"",
    supp_custom_params:{},
    supp_target_id:"epom-c7b5089cc1f0c951aae7a43d4fbcd0a50-300x250"
    });
    /*End of the second Invocation Code part*/
    (function () {
    var sc = document.createElement("script");
    sc.type = "text/javascript";
    sc.async = true;
    sc.src = (location.protocol == "https:" ? "https:" : "http:") + "//n244adserv.com\/js\/show_ads.js?pubId=2";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(sc, s);
    })();
    /*]]>*/
    </script>
    <!-- END TAG - HEAD -->
  5. 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.
  6. <!-- BEGIN TAG - BODY -->
    <div id="supp-90753ccb2860340d85e7ed09cda4c4f8-300x250"></div>
    <div id="supp-c7b5089cc1f0c951aae7a43d4fbcd0a50-300x250"></div>
    <!-- END TAG - BODY -->

    note Iframe Async
    Note!

    The Division Unit Identifiers (<div id>) 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 ID's, 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.

<!DOCTYPE html>
<html>
<head>
<title>Test page</title>

<script type="text/javascript">
/*<![CDATA[*/
/*First Invocation Code part*/
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"
});

/*Second Invocation Code part*/
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-90753ccb2860340d85e7ed09cda4c4f8X-300x250"
});
/*End of the second Invocation Code part*/

(function () {
var sc = document.createElement("script");
sc.type = "text/javascript";
sc.async = true;
sc.src = (location.protocol == "https:" ? "https:" : "http:") + "//n244adserv.com\/js\/show_ads.js?pubId=2";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(sc, s);
})();
/*]]>*/
</script>
</head>

<body>

<p>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.</p>

<p>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.</p>

<div id="epom-90753ccb2860340d85e7ed09cda4c4f8-300x250"></div>

<p>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.</p>

<p>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.</p>

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

<p>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.</p>

</body>
</html>

Need more help?

Should you require any additional help with our solutions, do not hesitate to contact Epom technical support at support@epom.com. Our support managers are dedicated to resolving any issues and providing you with solutions and support if you face difficulties or have questions.