Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Code Block
languagejs
collapsetrue
<!--
  This page is an example of how to concurrently load the GPT and request bids from OpenWrap when using the OpenWrap JavaScript API.

  Also sets pmzoneid
-->

<!DOCTYPE HTML>
<html lang="en-us">

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>OpenWrap Sample Code -- Concurrent GPT Load + pmzoneid</title>
    <script type="text/javascript">
        var PWT = {};
        var googletag = googletag || {};
        googletag.cmd = googletag.cmd || [];
        var pwtFinished = false;
        var gptLoaded = false;
        var initAdserverSet = false;
        var pwtBids = [];
        PWT.jsLoaded = function() {

            // OpenWrap definitions of the ad units we want to bid on. We can't
            //   use PWT.generateConfForGPT when doing concurrent executing since
            //  if OpenWrap (pwt.js) loads before GPT, we will call PWT.requestBids
            //  before GPT has loaded
            var pwt_ad_units = [{
                    "code": "div-gpt-ad-1460505748561-0",
                    "divId": "div-gpt-ad-1460505748561-0",
                    "adUnitId": "/40619304/HbTest_300x250",
                    "adUnitIndex": "0",
                    "mediaTypes": {
                        "banner": {
                            "sizes": [
                                [
                                    300,
                                    250
                                ],
                                [
                                    300,
                                    600
                                ]
                            ]
                        }
                    }
                },
                {
                    "code": "div-gpt-ad-1460505748561-1",
                    "divId": "div-gpt-ad-1460505748561-1",
                    "adUnitId": "/40619304/HbTest_300x250",
                    "adUnitIndex": "1",
                    "mediaTypes": {
                        "banner": {
                            "sizes": [
                                [
                                    300,
                                    250
                                ],
                                [
                                    300,
                                    600
                                ]
                            ]
                        }
                    }
                }
            ];

            PWT.HookForPrebidRequestBids = function(adUnits) {
                console.log('HookForPrebidRequestBids: Original adUnits array :', adUnits);
                console.log('HookForPrebidRequestBids: pmzoneid to pubmatic');
                adUnits.forEach(function(au) {
                    au.bids.forEach(function(bid) {
                        if (bid.bidder == 'pubmatic') {
                            // In this example, we set the zone ids to static values but in the real world
                            //  we'd likely fetch some information from the page like site section and
                            //  use that for setting zone id
                            bid.params.pmzoneid = 'myzoneid1,myzoneid2';
                        }
                    })
                })
            };

            if (typeof PWT.requestBids === 'function') {
                var start_time = new Date().getTime();
                PWT.requestBids(
                    pwt_ad_units,
                    function(adUnitsArray) {
                        var end_time = new Date().getTime();
                        var diff = end_time - start_time;
                        console.log("OpenWrap Time taken: " + diff.toString());
                        pwtFinished = true;
                        pwtBids.push(adUnitsArray);
                        initAdServer();
                    }
                );
            } else {
                pwtFinished = true;
                initAdserver();
            }
        };

        function initAdServer() {
            if (initAdserverSet) return;
            // Either gpt or OpenWrap can be ready first.  We cannot proceed until
            //  both are complete.  When both are complete, we add OpenWrap bids into
            //  targeting keys and then display the ad units
            if (gptLoaded && pwtFinished) {
                initAdserverSet = true;
                var au;

                while (au = pwtBids.shift()) {
                    PWT.addKeyValuePairsToGPTSlots(au);
                }

                googletag.display('div-gpt-ad-1460505748561-0');
                googletag.display('div-gpt-ad-1460505748561-1');
            }
        }

        (function() {
            // We insert both the gpt and pwt scripts are the same.  When OpenWrap (pwt.js) loads
            //  we immediately request bids.   Both when bids are back from OpenWrap & gpt loaded,
            //  initAdServer()
            var purl = window.location.href;
            var url = '//ads.pubmatic.com/AdServer/js/pwt/156209/1519';
            var profileVersionId = '';
            if (purl.indexOf('pwtv=') > 0) {
                var regexp = /pwtv=(.*?)(&|$)/g;
                var matches = regexp.exec(purl);
                if (matches.length >= 2 && matches[1].length > 0) {
                    profileVersionId = '/' + matches[1];
                }
            }
            var wtads = document.createElement('script');
            wtads.async = true;
            wtads.type = 'text/javascript';
            wtads.src = url + profileVersionId + '/pwt.js';
            var node = document.getElementsByTagName('script')[0];
            node.parentNode.insertBefore(wtads, node);

            var gads = document.createElement('script');
            var useSSL = 'https:' == document.location.protocol;
            gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
            var node = document.getElementsByTagName('script')[0];
            node.parentNode.insertBefore(gads, node);
        }());
    </script>

    <script type="text/javascript">
        googletag.cmd.push(function() {

            gptLoaded = true;
            console.log("GPT Loaded")

            googletag.defineSlot('/40619304/HbTest_300x250', [
                [300, 250],
                [300, 600]
            ], 'div-gpt-ad-1460505748561-0').addService(googletag.pubads());

            googletag.defineSlot('/40619304/HbTest_300x250', [
                [300, 250],
                [300, 600]
            ], 'div-gpt-ad-1460505748561-1').addService(googletag.pubads());

            googletag.enableServices();
            initAdServer();

            // This failsafe is here so we proceed with GPT execution if OpenWrap does not
            //   return for some reason
            var FAILSAFE_TIMEOUT = 10000; // this timeout should be more than OpenWrap timeout
            setTimeout(function() {
                if (!pwtFinished) console.error("OpenWrap Failsafe Invoked");
                pwtFinished = true;
                initAdServer();
            }, FAILSAFE_TIMEOUT);
        });
    </script>
</head>

<body style='background-color:whitesmoke;'>
    <h2> OpenWrap JS API Example Setting pmzoneid with Concurrent GPT Load</h2>
    <h5>Ad 1</h5>

    <div id='div-gpt-ad-1460505748561-0'>
    </div>

    <h5>Ad 2</h5>

    <div id='div-gpt-ad-1460505748561-1'>
    </div>
</body>

</html>


...

Postbid

...

This examples shows OpenWrap loading a Postbid creative using a GPT integration. It also sets the pmzoneid.

To learn more about Postbid, visit Prebid.js

Code Block
languagejs
collapsetrue
<!--
  OpenWrap example using GPT integration and setting pmzoneid
-->

<html>

<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<title>OpenWrap Sample Code -- GPT Integration + pmzoneid</title>

	<script type="text/javascript">
		var PWT = {}; //Initialize Namespace
		var googletag = googletag || {};
		googletag.cmd = googletag.cmd || [];
		var gptRan = false;
		PWT.jsLoaded = function() { //PubMatic pwt.js on load callback is used to load GPT

			PWT.HookForPrebidRequestBids = function(adUnits) {
				console.log('HookForPrebidRequestBids: Original adUnits array :', adUnits);
				console.log('HookForPrebidRequestBids: pmzoneid to pubmatic');
				adUnits.forEach(function(au) {
					au.bids.forEach(function(bid) {
						if (bid.bidder == 'pubmatic') {
							// In this example, we set the zone ids to static values but in the real world
							//  we'd likely fetch some information from the page like site section and
							//  use that for setting zone id
							bid.params.pmzoneid = 'myzoneid1,myzoneid2';
						}
					})
				})
			};

			loadGPT();
		};
		var loadGPT = function() {
			// Check the gptRan flag
			if (!gptRan) {
				gptRan = true;
				var gads = document.createElement('script');
				var useSSL = 'https:' == document.location.protocol;
				gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
				var node = document.getElementsByTagName('script')[0];
				node.parentNode.insertBefore(gads, node);
			}
		};
		// Failsafe to call gpt
		setTimeout(loadGPT, 500);
	</script>

	<script type="text/javascript">
		(function() {
			var purl = window.location.href;
			var url = '//ads.pubmatic.com/AdServer/js/pwt/156209/455';
			var profileVersionId = '';
			if (purl.indexOf('pwtv=') > 0) {
				var regexp = /pwtv=(.*?)(&|$)/g;
				var matches = regexp.exec(purl);
				if (matches.length >= 2 && matches[1].length > 0) {
					profileVersionId = '/' + matches[1];
				}
			}
			var wtads = document.createElement('script');
			wtads.async = true;
			wtads.type = 'text/javascript';
			wtads.src = url + profileVersionId + '/pwt.js';
			var node = document.getElementsByTagName('script')[0];
			node.parentNode.insertBefore(wtads, node);
		})();
	</script>

	<script>
		googletag.cmd.push(function() {
			googletag.defineSlot('/40619304/HbTest_300x250', [
				[300, 250],
				[300, 600]
			], 'div-gpt-ad-1460505748561-0').addService(googletag.pubads());
			googletag.defineSlot('/40619304/HbTest_300x250', [
				[300, 250],
				[300, 600]
			], 'div-gpt-ad-1460505748561-1').addService(googletag.pubads());
			googletag.pubads().enableSingleRequest();
			googletag.enableServices();
		});
	</script>
</head>

<body>
	<h2>OpenWrap GPT + pmzoneid example</h2>

	<h5>Ad 1</h5>

	<div id='div-gpt-ad-1460505748561-0'>
		<script type='text/javascript'>
			googletag.cmd.push(function() {
				googletag.display('div-gpt-ad-1460505748561-0');
			});
		</script>
	</div>

	<h5>Ad 2</h5>

	<div id='div-gpt-ad-1460505748561-1'>
		<script type='text/javascript'>
			googletag.cmd.push(function() {
				googletag.display('div-gpt-ad-1460505748561-1');
			});
		</script>
	</div>

</body>

</html>


Postbid Creative

This examples shows the creative for an OpenWrap Postbid configuration.

To learn more about Postbid, visit Prebid.js

...