I am using this plugin https://ratson.github.io/cordova-plugin-admob-free/variable/index.html#static-variable-banner
when I try to import I got an invalid identifier ‘banner’
import banner from 'cordova-plugin-admob-free/admob';
If I put curly braces on banner I got an unexpedted token ‘{’
import {banner} from 'cordova-plugin-admob-free/admob';
What is the right thing to do? Thanks in advance
I have made an AdMob class about 2 years ago for Phaser 2 written in TypeScript.
It is quite big, but it works with Banners, Interstitials and Rewarded Videos. It even draws a nice spinner while the video is loading (it does not preload the video since this drop the frame rates of Phaser 2 at this time)
I do not know if it sill works with the newest version of the cordova-plugin-admob-free.
I have used crosswalk at that time. I guess now you have to check if the browser is cordova instead of crosswalk. I guess you have to write this this.game.device.cordova instead of the global variable cordovaCrosswalk I have used. Or something different?
NOTE: I have not used it for 2 years. It probably does not work out of the box. But it will help you getting started.
To initialize it use:
AdMob.init(
{
// android
banner: 'ca-app-pub-YOURKEY',
interstitial: 'ca-app-pub-YOURKEY',
rewardvideo: 'ca-app-pub-YOURKEY'
},
{
// ios
banner: 'ca-app-pub-YOURKEY',
interstitial: 'ca-app-pub-YOURKEY',
rewardvideo: 'ca-app-pub-YOURKEY'
}
Here is the class:
declare var admob: any
var admobLoaded = false
var admobInterstitialSequence = 0
var admobVideoClicked = false
var admobVideoReward = false
var admobVideoClose = false
var admobVideoOpen = false
var admobVideoFail = false
interface AdmobIds {
iOS: AdmobId
android: AdmobId
}
interface AdmobId {
banner: string
interstitial: string
rewardvideo?: string
}
interface LoadingScreen {
text: Phaser.Text
group: Phaser.Group
circles: Phaser.Group
}
module myGame {
/*
date: 2017-03-13
https://www.npmjs.com/package/cordova-plugin-admob-free
https://www.npmjs.com/package/cordova-admob-sdk
*/
/*
Use in update()
switch (this.CordovaPlugins.AdMob.checkRewardVideo()) {
case 'REWARD':
this.reward();
break;
case 'CLICKED':
console.log("block ui");
break;
case 'CLOSED':
console.log("deblock ui");
break;
case 'FAIL':
console.log("deblock ui");
console.log("reward video failed to load");
break;
}
*/
export class AdMobPlugin {
private loadingScreen: LoadingScreen
AdmobIds: AdmobIds
constructor(private game: Phaser.Game) {}
public init(android: AdmobId, iOS: AdmobId) {
// store the admob ids
this.AdmobIds = {
android: android,
iOS: iOS
}
// start the admob interstitial sequence
admobInterstitialSequence = 0 // for interstitial ads sequence
// load AdMob Plugin
if (cordovaCrosswalk) {
console.log('__AdMobPlugin__')
document.addEventListener('deviceready', () => this.setup(), false)
}
}
private setup() {
//----------------------------------------------------------
// Ads Init
//----------------------------------------------------------
let admobid: AdmobId
if (/(android)/i.test(navigator.userAgent)) {
// for android & amazon-fireos
admobid = this.AdmobIds.android
} else {
// for ios
admobid = this.AdmobIds.iOS
}
//----------------------------------------------------------
// Ads SetUp
//----------------------------------------------------------
let isTesting = false
admob.banner.config({
id: admobid.banner,
isTesting: isTesting,
autoShow: false,
overlap: true,
orientationRenew: false
})
admob.banner.prepare()
admob.interstitial.config({
id: admobid.interstitial,
isTesting: isTesting,
autoShow: false
})
//admob.interstitial.prepare();
admob.rewardvideo.config({
id: admobid.rewardvideo,
isTesting: isTesting,
autoShow: true
})
//admob.rewardvideo.prepare();
//admob.rewardvideo.show();
//----------------------------------------------------------
// Fix Orientation Change after Rewarded Video
//----------------------------------------------------------
function doOnOrientationChange() {
switch (window.orientation) {
case -90:
case 90:
console.log('landscape')
admob.banner.remove()
break
default:
console.log('portrait')
admob.banner.prepare()
break
}
}
window.addEventListener('orientationchange', doOnOrientationChange)
//----------------------------------------------------------
// Set AdMob Loaded flag in global
//----------------------------------------------------------
admobLoaded = true
// setup events
document.addEventListener('admob.rewardvideo.events.LOAD_FAIL', event => {
console.log(event)
admobVideoFail = true
})
document.addEventListener('admob.rewardvideo.events.REWARD', event => {
console.log(event)
admobVideoReward = true
})
document.addEventListener('admob.rewardvideo.events.CLOSE', event => {
console.log(event)
admobVideoClose = true
})
document.addEventListener('admob.rewardvideo.events.OPEN', event => {
console.log(event)
admobVideoOpen = true
})
}
//----------------------------------------------------------
// Banner
//----------------------------------------------------------
/**
* Show the admob banner
*/
public showBanner() {
if (admobLoaded) admob.banner.show()
}
/**
* Hide the admob banner
*/
public hideBanner() {
if (admobLoaded) admob.banner.hide()
}
//----------------------------------------------------------
// Interstitial
//----------------------------------------------------------
/**
* Show the interstitial ads
* @param {number} [sequence=4] Define the sequence. Default = 4
* @param {number} [showDelay=1500] The delay for showing the ad. Default = 1500
*/
public showInterstitial(sequence = 4, showDelay = 1500) {
if (!admobLoaded) return
if (admobInterstitialSequence % sequence == 0) {
admob.interstitial.prepare()
} else if (admobInterstitialSequence % sequence == sequence - 1) {
this.game.time.events.add(
showDelay,
() => {
admob.interstitial.show()
},
this
)
}
admobInterstitialSequence++
}
//----------------------------------------------------------
// Rewarded Video
//----------------------------------------------------------
public showRewardVideo() {
console.log('__showRewardVideo__')
admobVideoClicked = true
this.showLoadingScreen()
// hide after 3 seconds if admob is not Loaded
if (!admobLoaded) {
this.game.time.events.add(3000, () => this.hideLoadingScreen())
}
// else show the rewarded video
else {
admob.rewardvideo.prepare()
}
}
public checkRewardVideo() {
// return undefined - CLICKED - CLOSED - REWARD - FAIL
let response = undefined
if (admobVideoFail) {
console.log('admobVideoFail')
admobVideoFail = false
this.hideLoadingScreen()
response = 'FAIL'
}
if (admobVideoClicked) {
console.log('admobVideoClicked')
admobVideoClicked = false
response = 'CLICKED'
}
if (admobVideoOpen) {
console.log('admobVideoOpen')
admobVideoOpen = false
this.hideLoadingScreen()
}
if (admobVideoClose) {
console.log('admobVideoClose')
admobVideoClose = false
response = 'CLOSED'
if (admobVideoReward) {
console.log('admobVideoReward')
admobVideoReward = false
response = 'REWARD'
}
}
return response
}
//----------------------------------------------------------
// Loading Screen
//----------------------------------------------------------
private showLoadingScreen() {
this.initLoadingScreen()
this.loadingScreen.group.x = 0
}
private hideLoadingScreen() {
console.log('__hideLoadingScreen__')
this.loadingScreen.group.x = -10000
}
private startSpinning() {
this.game.time.events.loop(
100,
() => {
this.loadingScreen.circles.forEach((e: Phaser.Sprite) => {
e.rotation += (2 * Math.PI) / 8
}, this)
},
this
)
}
private initLoadingScreen() {
if (this.loadingScreen == undefined) {
this.loadingScreen = {
text: undefined,
group: undefined,
circles: undefined
}
let w = this.game.width
let h = this.game.height
// background
let bg = this.game.add.bitmapData(w, h)
bg.ctx.beginPath()
bg.ctx.rect(0, 0, w, h)
bg.ctx.fillStyle = '#000000'
bg.ctx.fill()
let background = this.game.add.sprite(w / 2, h / 2, bg)
background.anchor.setTo(0.5, 0.5)
background.alpha = 0.8
// enable input on background to catch the clicks
background.inputEnabled = true
background.events.onInputDown.add(() => {
console.log('catch click')
}, this)
// popup
let width = 330
let height = 120
let rad = 10
let clr = '#ffffff'
// draw rectengle with rounded borders
let graphics = this.game.add.bitmapData(width, height)
graphics.ctx.beginPath()
graphics.ctx.moveTo(0, rad)
graphics.ctx.quadraticCurveTo(0, 0, rad, 0) // top left
graphics.ctx.lineTo(width - rad, 0)
graphics.ctx.quadraticCurveTo(width, 0, width, rad) // top right
graphics.ctx.lineTo(width, height - rad)
graphics.ctx.quadraticCurveTo(width, height, width - rad, height) // bottom right
graphics.ctx.lineTo(rad, height)
graphics.ctx.quadraticCurveTo(0, height, 0, height - rad) // bottom left
graphics.ctx.lineTo(0, rad)
graphics.ctx.closePath()
graphics.ctx.fillStyle = clr
graphics.ctx.fill()
// draw sprite
let popup = this.game.add.sprite(w / 2, h / 2, graphics)
popup.anchor.setTo(0.5, 0.5)
// loading circle
let bmdCircle = this.game.add.bitmapData(10, 10)
bmdCircle.circle(5, 5, 5, 'rgb(255,255,255)')
// colors
let colors = [
0xffffff,
0xd0d0d0,
0xb0b0b0,
0x909090,
0x737373,
0x515151,
0x313131,
0x111111
]
// draw them
this.loadingScreen.circles = this.game.add.group()
for (let i = 0; i < 8; i++) {
let circle = this.game.add.sprite(w / 2 - 105, h / 2, bmdCircle)
circle.anchor.setTo(1.75, 1.75)
circle.rotation = (2 * Math.PI * (i % 8)) / 8
circle.tint = colors[i]
this.loadingScreen.circles.add(circle)
}
// make them spin
this.startSpinning()
// Text
let style = { fill: '#515151', font: '30px Arial' }
this.loadingScreen.text = this.game.add.text(
w / 2 + 40,
h / 2,
'Please wait...',
style
)
this.loadingScreen.text.anchor.setTo(0.5, 0.5)
// group
this.loadingScreen.group = this.game.add.group()
this.loadingScreen.group.addMultiple([
background,
popup,
this.loadingScreen.circles,
this.loadingScreen.text
])
this.loadingScreen.group.x = -10000
}
}
}
}
Does the class extends the cordova plugin admob free?
Thanks @yannick,
No. The admob plugin is a global variable.
Thanks 