IONIC+Cordova+Metatag

Owned by Aaron Adams
Last updated: Dec 08, 2023 by Dominik Čech
2 min read

Repo:

Beware that all the code and configuration cannot be considered production ready. It is merely example of integration approach described below.

https://github.com/mbrtargeting/mobile-sdk-cordova-example-app

Prerequisite:

STEP 1) AdMob Plus Plugin (detailed instructions: https://admob-plus.github.io/docs/cordova/installation )

  • in your Cordova app run

    • cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx --variable APP_ID_IOS=ca-app-pub-xxx~xxx

Enable Kotlin for the plugin in config.xml under Android platform

<preference name="GradlePluginKotlinEnabled" value="true" /> <preference name="GradlePluginKotlinCodeStyle" value="official" /> <preference name="GradlePluginKotlinVersion" value="1.7.21" />

If you have Proguard configuration follow: https://admob-plus.github.io/docs/cordova/installation#proguard

When using with other plugins and encountering errors, set AndroidXEnabled to true in config.xml under Android platform

<preference name="AndroidXEnabled" value="true" />

Set deployment-target and SwiftVersion in config.xml under IOS platform

Run cordova platform remove ios then cordova platform add ios to take effect.

Run pod repo update or cd platforms/ios && pod install --repo-update to ensure latest SDK is ready.

STEP 2) AdMob Plus Cordova Webview Ad Plugin (detailed instructions )

  • first make sure you already installed AdMob Plus plugin

  • in your Cordova app run

  • update the config.xml for Android and IOS

      • Schema:

        • Android: https

        • IOS: httpsionic

      • Hostname:

        • your app hostname

        • Warning: If you use localStorage to storage data, please note that the previously data will not be accessible if you change the hostname to something else than previously used.

    • If ads are not displayed correctly (Probably on iOS), you may also need to add the following config to your config.xml

  • Initiate admob in your code by running

  • If you experiencing performance issues on Android follow:

  • If you have strict CSP on your app follow:

STEP 3) Metatag setup (detailed instructions )

  • make sure you have CMP set in your app

  • include metatag in your app

    • There are probably multiple approaches how to add metatag to your Angular app, this is one of them. Add metatag script in your index.html (Example App: index.html)

    • Depending on your TS setup you might want to add global type definitions in your main.ts

Usage

After all Prerequisite steps you should be able to register and load ad slots using Metatag as documented here:

Example

Simple ad component for registering ads: Ad component

Usage of ad component and initiating ads loading: Ad component usage, Initiating ads loading


 

Datenschutz
Impressum