/
IONIC+Cordova+Metatag

IONIC+Cordova+Metatag

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

<preference name="deployment-target" value="12.0" /> <preference name="SwiftVersion" value="5.3" />

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 https://admob-plus.github.io/docs/cordova/ads/webview )

  • first make sure you already installed AdMob Plus plugin

  • in your Cordova app run

    • cordova plugin add admob-plus-cordova-webview-ad --save

  • update the config.xml for Android and IOS

    • <preference name="Scheme" value="https" /> <preference name="Hostname" value="example.com" /> <preference name="AdMobPlusWebViewAd" value="true" /> <preference name="AdMobPlusOverrideUrlLoading" value="true" />

      • 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

      • <allow-navigation href="*" />

  • Initiate admob in your code by running

    • document.addEventListener('deviceready', async () => { await admob.start(); });

    • Example App: main.ts

STEP 3) Metatag setup (detailed instructions https://stroeerdigitalgroup.atlassian.net/wiki/spaces/SDGPUBLIC/pages/51513328 )

  • 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)

    • <script> window.SDG = window.SDG || {}; window.SDG.cmd = window.SDG.cmd || []; </script> <script async type="text/javascript" src="[your metatag script url]"></script>

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

    • declare global { //Metatag currently does not offer type definitions. You might create your own based on //what you gonna use in your app or leave it as "any" interface Window { SDG: any; } var SDG: Window['SDG'] }

Usage

After all Prerequisite steps you should be able to register and load ad slots using Metatag as documented here: https://stroeerdigitalgroup.atlassian.net/wiki/spaces/SDGPUBLIC/pages/51513328/English+MetaTag+Documentation#PublisherApi%5BinlineExtension%5D

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