Cordova Plugin

Android

Run Cordova Demo Project

1. Install Cordova: Follow instructions here: https://cordova.apache.org/docs/en/latest/guide/cli/index.html
2. Copy directory https://github.com/mobfox/SDK-Plugins/tree/master/Cordova/MobFoxCorDemo
3. Go into the CordovaDemo dir in terminal.
4. Execute cordova plugin remove com.mobfox.cordova to remove previous plugin files.
5. Execute cordova plugin add ../Cordova/ to install the MobFox plugin files.
6. Execute cordova run android or cordova run ios to compile and launch the app.
7. To run on an actual device run cordova run android --device or cordova run ios --device

Demo Project Implementation Notes

index.html

– There are 5 buttons and a checkbox:

    <div class="card">
        <button class="btn btn-block btn-primary" id="show-banner">Show Banner</button>
        <br>
        <button class="btn btn-block btn-primary" id="hide-banner">Hide Banner</button>
        <br>
        <button class="btn btn-block btn-primary" id="unhide-banner">Unhide Banner</button>
        <br>
        <button class="btn btn-block btn-positive" id="show-interstitial">Show Interstitial</button>
        <br>
        <button class="btn btn-block btn-positive" id="show-native">Show Native</button>
        <br>
        <br>
        <input type="checkbox" name="use-location" value="yes" id="use-location"> Use location<br>
    </div>

– There are items for the native ad display:

    <div class="native" id="native-component">
        <br>
        <br>
        <label id="nativeTitle" for="title">(Native ad title)</label>
        <br>
        <br>
        <label id="nativeBody" for="body">(Native ad body)</label>
        <br>
        <br>
        <img src="" alt="Icon" id="nativeIcon" width="40" height="40">
        <br>
        <br>
        <img src="" alt="Main Image" id="nativeMain" width="150" height="79"></img>
        <br>
    </div>

– There is a line adding the MobFoxPlugin.js:

<script type="text/javascript" src="MobFoxPlugin.js"></script>

– There is a line adding the events.js:

<script type="text/javascript" src="js/events.js"></script>

events.js

• When page is launched, addMobFoxCallbacks() is called to register the MobFoxPlugin event callbacks:

• When “Show Banner” is clicked the script calls:

MobFoxPlugin.showBanner(<hash-id>, <x>, <y>, <width>, <height>);

• When “Hide Banner” is clicked the script calls:

MobFoxPlugin.hideBanner();

• When “Unhide Banner” is clicked the script calls:

MobFoxPlugin.unhideBanner();

• When “Show Interstitial” is clicked the script calls:

MobFoxPlugin.createInterstitial(<hash-id>);

• Please note – in the onInterstitialLoaded() callback, you need to call

MobFoxPlugin.showInterstitial();

• When “Show Native” is clicked the script calls:

MobFoxPlugin.createNative(<hash-id>);

iOS

Run Cordova Demo Project

1. Install Cordova: Follow instructions here: https://cordova.apache.org/docs/en/latest/guide/cli/index.html
2. Copy directory https://github.com/mobfox/SDK-Plugins/tree/master/Cordova/MobFoxCorDemo
3. Go into the CordovaDemo dir in terminal.
4. Execute cordova plugin remove com.mobfox.cordova to remove previous plugin files.
5. Execute cordova plugin add ../Cordova/ to install the MobFox plugin files.
6. Execute cordova run android or cordova run ios to compile and launch the app.
7. To run on an actual device run cordova run android --device or cordova run ios --device

Demo Project Implementation Notes

index.html

– There are 5 buttons and a checkbox:

    <div class="card">
        <button class="btn btn-block btn-primary" id="show-banner">Show Banner</button>
        <br>
        <button class="btn btn-block btn-primary" id="hide-banner">Hide Banner</button>
        <br>
        <button class="btn btn-block btn-primary" id="unhide-banner">Unhide Banner</button>
        <br>
        <button class="btn btn-block btn-positive" id="show-interstitial">Show Interstitial</button>
        <br>
        <button class="btn btn-block btn-positive" id="show-native">Show Native</button>
        <br>
        <br>
        <input type="checkbox" name="use-location" value="yes" id="use-location"> Use location<br>
    </div>

– There are items for the native ad display:

    <div class="native" id="native-component">
        <br>
        <br>
        <label id="nativeTitle" for="title">(Native ad title)</label>
        <br>
        <br>
        <label id="nativeBody" for="body">(Native ad body)</label>
        <br>
        <br>
        <img src="" alt="Icon" id="nativeIcon" width="40" height="40">
        <br>
        <br>
        <img src="" alt="Main Image" id="nativeMain" width="150" height="79"></img>
        <br>
    </div>

– There is a line adding the MobFoxPlugin.js:

<script type="text/javascript" src="MobFoxPlugin.js"></script>

– There is a line adding the events.js:

<script type="text/javascript" src="js/events.js"></script>

events.js

• When page is launched, addMobFoxCallbacks() is called to register the MobFoxPlugin event callbacks:

• When “Show Banner” is clicked the script calls:

MobFoxPlugin.showBanner(<hash-id>, <x>, <y>, <width>, <height>);

• When “Hide Banner” is clicked the script calls:

MobFoxPlugin.hideBanner();

• When “Unhide Banner” is clicked the script calls:

MobFoxPlugin.unhideBanner();

• When “Show Interstitial” is clicked the script calls:

MobFoxPlugin.createInterstitial(<hash-id>);

• Please note – in the onInterstitialLoaded() callback, you need to call

MobFoxPlugin.showInterstitial();

• When “Show Native” is clicked the script calls:

MobFoxPlugin.createNative(<hash-id>);