To implement heyVR in-game ads in your Aframe game, you'll need to include the Aframe Advertisement SDK in your game and set a few parameters.
Installing the Aframe SDK is as simple as running the following command in your project's directory:
npm install @heyvr/sdk-ad-aframe
Then, simply import the installed package into your project:
import * as heyVRAds from "@heyvr/sdk-ad-aframe";
Not using NPM for dependency management?
Simply download the SDK file from here and include it in your build viascripttag in yourindex.html.
Once you're done with the installation, it's time to render the ads in your game.
Loading the SDK will register a new custom component named a-heyvr-ad. You can use this custom component to render ads in your game. Let's start by placing a video ad in the game:
<html>
<head>...</head>
<body>
<a-scene>
<a-heyvr-ad
unit="my_org-sample-ad-unit"
height="1"
position="-1 1 -2"></a-heyvr-ad>
</a-scene>
</body>
</html>
And that's it! You can now load the game via an http server and the ad should be rendering just fine. Make sure to use demo mode for local testing.
The Aframe ad SDK accepts an additional parameters in addition to the common params:
height - Set the ad's height. Default is 1, and you can use a multiplier to adjust the ad's size.Not sure about the common configuration params? Checkout this section regarding shared SDK parameters.