Step 1: you will need to create the APN object and load the AppNexus JavaScript library. This part of the code can be copy-pasted directly into your web page - no additional developer changes are required. This usually goes in the <head> of the of the page, but if you don't have access to that, you can put the entire tag in one code block in the <body>.
<html>
<head>
<script type="text/javascript">
//create empty apntag object if it doesn't exist
var apntag = apntag || {};
//create a queue on the apntag object
apntag.anq = apntag.anq || [];
//load ast.js - async
(function() {
var d = document, e = d.createElement('script'), p = d.getElementsByTagName('head')[0];
e.type = 'text/javascript'; e.async = true;
e.src = '//acdn.adnxs.com/ast/ast.js';
p.insertBefore(e, p.firstChild);
})();
Step 2: this is the continuation of the above step. Here you will need to make some adjustments in setting the global page options: you will need to set to correct member ID (the one in the example is 958, but this will need to be replaced with your own member seat) and define the page-wide targeting parameters (there are none set in this example, but if you want to set some, please see the documentation linked after the instructions).
//push commands to loading queue, to allow for async loading
apntag.anq.push(function() {
//set global page options
apntag.setPageOpts({
member: 958
});
Step 3: now we will define the tag. Below you can see the code used to define the tag implemented on this page:
apntag.defineTag({
tagId: 12886207,
allowedFormats: ['video', 'banner'],
sizes: [[1, 1],[480, 270]],
targetId: 'apn_ad_slot_1',
rendererOptions: {
"adText": "Ad",
"showMute": true,
"showVolume": true,
"nonViewableBehavior": "pause",
"showProgressBar": true,
"autoInitialSize": false,
"allowFullscreen": true,
"skippable": {
"videoThreshold": 15,
"videoOffset": 5,
"skipLocation": "top-left",
"skipText": "Video can be skipped in %%TIME%% seconds",
"skipButtonText": "SKIP"
}
}
});
Step 4: right after the tag is defined, it will need to be loaded. This is the last part of the code which is usually found in the <head> section.
apntag.loadTags();
});
</script>
</head>
Step 5: finally, it's time to define the location of the placement, which will be coded in the <body> part of the webpage.
<body>
<div id="apn_ad_slot_1">
<script type="text/javascript">
apntag.anq.push(function() {
//signal to script that this DOM element has been loaded and is ready to be populated with an ad
apntag.showTag('apn_ad_slot_1');
});
</script>
</div>
</body>
</html>
You can find more detailed information about the implementation here: Microsoft Learn - Set up Placements with AST.
For further AST API references, you can also refer to the following documentation: Microsoft Learn - AST API Reference.
Additionally, for video, it's also important to check the Outstream Video Player Options to see how the player can be set up and what kind of options are available.
Further things to note:
Finally, regularly checking on the AST release history is encouaged so that you can see the latest releases and adjust the code accordingly if needed (due to breaking changes, for example).