Js Sdk¶

Js Sdk Integration Guide

Introduction¶

A jssdk is used by a website retrieve banner ads which is used to dynamically build ad requests

Example¶

1. Load the JSSDK library¶

Load the JSSDK library by adding the following to the <head> of the HTML document. code-block:

<head>
    <meta charset="utf-8">
    <script async src="https://jssdk-[channel].metaxads.com/jstag/ads.js"></script>
    <script>
        window.metaxtag = window.metaxtag || {cmd: []};
    </script>
</head>

2.Specify where the ad will appear for site¶

Specify where the ad will appear on the page by adding the following code to the <body> of the HTML document. code-block:

<head>
<meta charset="utf-8">
<script async src="https://jssdk-[channel].metaxads.com/jstag/ads.js"></script>
<script>
    window.metaxtag = window.metaxtag || {cmd: []};
</script>
</head>
<body>
    <div id="banner_slot_id" style="width: 300px; height: 250px;">
        <script>
            metaxtag.cmd.push({
                slotElementId:"banner_slot_id",
                requestParams:{
                    adunitId:601423142,
                    pubId:601423142
                }
            });
        </script>
    </div>
</body>

3.Specify where the ad will appear for app¶

Specify where the ad will appear on the page by adding the following code to the <body> of the HTML document. code-block:

<head>
<meta charset="utf-8">
<script async src="https://jssdk-[channel].metaxads.com/jstag/ads.js"></script>
<script>
    window.metaxtag = window.metaxtag || {cmd: []};
</script>
</head>
<body>
    <div id="banner_slot_id" style="width: 300px; height: 250px;">
        <script>
            metaxtag.cmd.push({
                slotElementId:"banner_slot_id",
                requestParams:{
                    adunitId:601423142,
                    pubId:601423142,
                    inv:"app",
                    appName:"xxxx",
                    appBundle:"xxxx",
                    appStoreUrl:"xxxx",
                    appVersion:"xxxx",
                }
            });
        </script>
    </div>
</body>

Other optional settings¶

1.Collapse empty ad slots¶

By default, ad slots which are not filled are left visible, which may result in blank space on your page.you can the setting to collapse them. code-block:

<div id="banner_slot_id" style="width: 300px; height: 250px;">
    <script>
        metaxtag.cmd.push({
            slotElementId:"banner_slot_id",
            collapseEmptyDiv:true,
            requestParams:{
                adunitId:601423142,
                pubId:601423142
            }
        });
    </script>
</div>

2.Ad event listeners¶

jssdk library allows you to call JavaScript functions when specific ad events occur. code-block:

<div id="banner_slot_id" style="width: 300px; height: 250px;">
    <script>
        metaxtag.cmd.push({
            slotElementId:"banner_slot_id",
            collapseEmptyDiv:true,
            requestParams:{
                adunitId:601423142,
                pubId:601423142
            },
            onAdResponseEmpty: function(e) {
                console.log('Html Ad response empty slot_id:' + e)
            },
            onAdResponseFull: function(e) {
                console.log('Html Ad response full slot_id:' + e);
            }
        });
    </script>
</div>