Repository files navigation

ArcAds is aGPT (Google Publisher Tag) wrapper created byArc XP. Using ArcAds you can make use of many GPT features such as size mapping, refreshing, and targeting. In addition you can also make use of header bidding vendors such asPrebid.js andAmazon A9/TAM by using the appropriate configuration.

To get started you must include the script tag for ArcAds in your page header, locatedhere. You can also optionally runnpm install followed bynpm run build to compile it yourself in case you need to make any modifications. Once included you can initialize the ArcAds wrapper class like so in your page header.

<scriptsrc="path/to/arcads.js"></script><scripttype="text/javascript">constarcAds=newArcAds({dfp:{id:'123',collapseEmptyDivs:true}})</script>

collapseEmptyDivs is an optional parameter that directly togglesgoogletag.pubads().collapseEmptyDivs()

Alternatively, if you're using a bundler you can use the library as a module.

npm install arcads

You can then include it in your own JavaScript projects like so.

import{ArcAds}from'arcads'

You can display an advertisement by calling theregisterAd method, this can be called as many times and wherever you'd like as required.

arcAds.registerAd({id:'div-id-123',slotName:'hp/hp-1',dimensions:[[300,250],[300,600]],display:'desktop'})

Along with theregisterAd call you also need a div on the page with the same id.

<divid="div-id-123"></div>

If you are using an external service to manage initial ad load (like Didomi), setwindow.blockArcAdsLoad = true on page load to block ArcAds from refreshing ads. Setwindow.blockArcAdsLoad = false when you want ArcAds to control refreshing ads again.

The following table shows all of the possible parameters theregisterAd method accepts.

If an advertisement has an empty or missingdimensions parameter it will be considered as aGPT Out of Page creative and rendered as such.

Whenever an advertisement loads you can access data about the advertisement such as its size and id by passing in an optional callback to the initialization of ArcAds. This ties a handler to theslotRenderEnded event that GPT emits and is called every time an advertisement is about to render, allowing you to make any page layout modifications to accommodate a specific advertisement.

constarcAds=newArcAds({dfp:{id:'123'}},(event)=>{console.log('Advertisement has loaded...',event)})

If you require the ability to refresh a specific advertisement you can do so via the googletag library, providing it the slot object from GPT. You can get access to the slot object in the callback of ArcAds viaevent.slot.

constarcAds=newArcAds({dfp:{id:'123'}},(event)=>{window.adSlot=event.slot})// Refresh a single ad slotwindow.googletag.pubads().refresh([window.adSlot])// Refresh all ad slots on the pagewindow.googletag.pubads().refresh()

Advertisement targeting parameters can be passed to the registration call via thetargeting object.

arcAds.registerAd({id:'div-id-123',slotName:'hp/hp-1',adType:'cube',dimensions:[[300,250],[300,600]],display:'all',targeting:{section:'weather'}})

The service will automatically give the advertisement aposition target key/value pair if either thetargeting object orposition key of the targeting object are not present. The position value will increment by 1 in sequence for each of the sameadType on the page. This is a common practice between ad traffickers so this behavior is baked in, only if the trafficker makes use of this targeting will it have any effect on the advertisement rendering.

IfadType is excluded from theregisterAd call the automatic position targeting will not be included.

You can configure GPT size mapped ads with the same registration call by adding asizemap object. To utilize size mapping thedimensions key should be updated to include an array representing a nested array of arrays containing the applicable sizes for a specific breakpoint.

[[[970,250],[970,90],[728,90]],[[728,90]],[[320,100],[320,50]]]

Followed by an array of equal lengths of breakpoints which will sit withinsizemap.breakpoints.

[[1280,0],[800,0],[0,0]]

When put together this will mean that at a window width of 1280 wide, the service can load a970x250,970x90 or a728x90 advertisement. At 800 wide, it can load a728x90, and anything below 800 it will load a320x90 or a320x50.

If the advertisement should refresh dynamically when the user resizes the screen after the initial load you can togglerefresh totrue. otherwise it should befalse.

arcAds.registerAd({id:'div-id-123',slotName:'hp/hp-1',adType:'cube',dimensions:[[[970,250],[970,90],[728,90]],[[728,90]],[[320,100],[320,50]]],targeting:{section:'weather'},sizemap:{breakpoints:[[1280,0],[800,0],[0,0]],refresh:true}})

ArcAds provides a way for you to get information about an advertisement before it loads, which is useful for attaching targeting data from third party vendors.

You can setup a function within theregisterAd call by adding aprerender parameter, the value of which being the function you'd like to fire before the advertisement loads. This function will also fire before the advertisement refreshes if you're using sizemapping.

arcAds.registerAd({id:'div-id-123',slotName:'hp/hp-1',dimensions:[[300,250],[300,600]],display:'desktop',prerender:window.adFunction})

Yourprerender function must return a promise. Once it's resolved the advertisement will display. If you do not resolve the promise the advertisement willnot render.

window.adFunction=function(ad){returnnewPromise(function(resolve,reject){// The 'ad' argument will provide information about the unitconsole.log(ad)// If you do not resolve the promise the advertisement will not displayresolve()});}

You can gather information about the advertisement by accessing thead argument/object.

For a more detailed example of how to utilize this functionalityplease see the wiki.

ArcAds supports Prebid.js and Amazon TAM/A9. To enable these services you must first enable them when you configure the wrapper.

If you'd like to include Prebid.js you must include the library beforearcads.js. You can get a customized version of Prebid.js with the adapters your site needs from their websitehere.

<scriptsrc="path/to/prebid.js"></script><scriptsrc="path/to/arcads.js"></script><scripttype="text/javascript">  const arcAds = new ArcAds({dfp:{id:'123'},bidding:{prebid:{enabled:true}}})</script>

You can enable Prebid.js on the wrapper by adding aprebid object to the wrapper initialization and settingenabled: true. Ifenabled isundefined,prebid can still be used by providing a validbids object. You can also optionally pass it atimeout value which corresponds in milliseconds how long Prebid.js will wait until it closes out the bidding for the advertisements on the page. By default, the timeout will be set to700.

constarcAds=newArcAds({dfp:{id:'123'},bidding:{prebid:{enabled:true,timeout:1000}}}

If you want to use the slotName instead of the ad id when registering ads, passuseSlotForAdUnit: true.

constarcAds=newArcAds({dfp:{id:'123'},bidding:{prebid:{enabled:true,timeout:1000,useSlotForAdUnit:true}}}

On the wrapper you can also configure a size mapping configuration, which will provide information to Prebid.js on which sized advertisements it should fetch bids for on each breakpoint. For more information on what needs to be configured within thesizeConfig array clickhere.

constarcAds=newArcAds({dfp:{id:'123'},bidding:{prebid:{enabled:true,timeout:1000,sizeConfig:[{'mediaQuery':'(min-width: 1024px)','sizesSupported':[[970,250],[970,90],[728,90]],'labels':['desktop']},{'mediaQuery':'(min-width: 480px) and (max-width: 1023px)','sizesSupported':[[728,90]],'labels':['tablet']},{'mediaQuery':'(min-width: 0px)','sizesSupported':[[320,100],[320,50]],'labels':['phone']}]}}})

On the advertisement registration you can then provide information about which bidding services that specific advertisement should use. You can find a list of parameters that Prebid.js accepts for each adapter on thePrebid.js website. Additionally you can turn onPrebid.js debugging by adding?pbjs_debug=true to the url.

arcAds.registerAd({id:'div-id-123',slotName:'hp/hp-1',adType:'cube',display:'desktop',dimensions:[[[970,250],[970,90],[728,90]],[[728,90]],[[320,100],[320,50]]],sizemap:{breakpoints:[[1280,0],[800,0],[0,0]],refresh:'true'},bidding:{prebid:{enabled:true,bids:[{bidder:'appnexus',labels:['desktop','tablet','phone'],params:{placementId:'10433394'}}]}}})

You can enable Amazon A9/TAM on the service by adding anamazon object to the wrapper initialization and then passing itenabled: true. You must also include theapstag script on your page with:

<script src="https://c.amazon-adsystem.com/aax2/apstag.js"></script>

You must also provide your publication id that corresponds to the owners Amazon account.

constarcAds=newArcAds({dfp:{id:'123'},bidding:{amazon:{enabled:true,id:'123'}}})

On the advertisement registration you simply provideenabled: true for the specific advertisement within thebidding object. There are no additional properties which are required.

arcAds.registerAd({id:'div-id-123',slotName:'hp/hp-1',adType:'cube',display:'desktop',dimensions:'[ [[970, 250], [970, 90], [728, 90]], [[728, 90]], [[320, 100], [320, 50]] ]',sizemap:{breakpoints:'[ [1280, 0], [800, 0], [0, 0] ]',refresh:'true'},bidding:{amazon:{enabled:true}}})

NOTE: Currently Amazon A9/TAM is not supported for use with Singe Request Architecture (SRA).

You can display multiple ads at once using theregisterAdCollection method. This is useful if you're initializing multiple advertisements at once in the page header. To do this you can pass an array of advertisement objects similar to the one you would with theregisterAd call. Note that when using this function, if setAdsBlockGate() has not been called, the calls for each ad will be made individually. If you need to achieve Single Request Architecture, see the documentation below, "SRA Single Request Architecture".

constads=[{id:'div-id-123',slotName:'hp/hp-1',adType:'cube',display:'desktop',dimensions:'[ [[970, 250], [970, 90], [728, 90]], [[728, 90]], [[320, 100], [320, 50]] ]',sizemap:{breakpoints:'[ [1280, 0], [800, 0], [0, 0] ]',refresh:'true'},bidding:{prebid:{enabled:true,bids:[{bidder:'appnexus',labels:['desktop','tablet','phone'],params:{placementId:'10433394'}}]}},{id:'div-id-456',slotName:'hp/hp-2',adType:'square',display:'mobile',dimensions:'[ [300, 250], [300, 600] ]',bidding:{prebid:{enabled:true,bids:[{bidder:'appnexus',labels:['desktop','tablet','phone'],params:{placementId:'10433394'}}]}}]arcAds.registerAdCollection(ads)

SRA architecture Functions will allow all ads to go out in one single ad call. The functions are presented in the order they should be called:

1. setPageLevelTargeting(key, value): sets targeting parameters- applied to all ads on the page. Extracting common targeting values is recommended in order to avoid repeating targeting for each ad in the single ad call.
2. setAdsBlockGate(): “closes” the gate - as ads are added, calls do not go out. This allows ads configurations to accumulated to be set out later, together all at once.
3. reserveAd(params): accumulates ads to be sent out later. This function is called once per one ad.
4. releaseAdsBlockGate(): “opens” the gate - allows an ad call to go out.
5. sendSingleCallAds(): registers all the ads added via reserveAd(), and sends out a single ad call (SRA call) containing all the ads information that has been added so far via reserveAd().

To add more ads, repeat steps 1-5 as needed.

NOTE: Prebid is supported for SRA. Amazon A9/TAM is not supported for SRA and will need to be implemented at a future date.

NOTE: ArcAds SRA implementation calls enableSingleRequest() which means that when using pubads lazyLoad functions together with SRA, when the first ad slot comes within the viewport specified by the fetchMarginPercent parameter, the call for that ad and all other ad slots is made. If different behavior is desired after the initial SRA call is made, an outside lazy loading library may be used to manage the calls for registerAd, reserveAd and other calls.

There's a series developer tools available, to get started runnpm install.

You can override the slot name of every advertisement on the page by appending?adslot= to the URL. This will override whatever is placed inside of theslotName field when invoking theregisterAd method. For example, if you hit the URLarcpublishing.com/?adslot=homepage/myad, the full ad slot path will end up being your GPT id followed by the value:123/homepage/myad.

You can also debug slot names and GPT in general by typingwindow.googletag.openConsole() into the browsers developer console.

To inspect the function calls taking place within the ArcAds library, you can include thedebug=true query parameter on your page.

If you'd like to contribute to ArcAds please read ourcontributing guide.