how can I include admob in a vue3 and cordova project. I've tried so many ways from different sites but none of them worked so far or I don't know where to put the admob code..
Basically I create a Vue3 project, then
vue add cordova
Inside src-cordova:
cordova plugin add cordova-admob
and the vue build (dist) folder I've moved it to src-cordova www folder.
But where exactly do I add the code bellow ??
on onDeviceReady() {
document.removeEventListener('deviceready', onDeviceReady, false);
// Set AdMobAds options:
admob.setOptions({
publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB", // Required
interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII", // Optional
autoShowBanner: true, // Optional
autoShowRInterstitial: false, // Optional
autoShowRewarded: false, // Optional
tappxIdiOS: "/XXXXXXXXX/Pub-XXXX-iOS-IIII", // Optional
tappxIdAndroid: "/XXXXXXXXX/Pub-XXXX-Android-AAAA", // Optional
tappxShare: 0.5 // Optional
});
// Start showing banners (atomatic when autoShowBanner is set to true)
admob.createBannerView();
// Request interstitial ad (will present automatically when autoShowInterstitial is set to true)
admob.requestInterstitialAd();
// Request rewarded ad (will present automatically when autoShowRewarded is set to true)
admob.requestRewardedAd();
}
document.addEventListener("deviceready", onDeviceReady, false);
Related
I am using the Vue plugin for Matomo which is found here: https://github.com/AmazingDreams/vue-matomo
I imported the VueMatomo plugin in my main.js entry file like so:
import VueMatomo from 'vue-matomo';
Then, I assign the VueMatomo as a global method in my main.js file like so:
Vue.use(VueMatomo, {
// Configure your matomo server and site
host: 'https://matomo.example.com',
siteId: 1,
// Enables link tracking on regular links. Note that this won't
// work for routing links (ie. internal Vue router links)
// Default: true
enableLinkTracking: true,
// Require consent before sending tracking information to matomo
// Default: false
requireConsent: false,
// Whether to track the initial page view
// Default: true
trackInitialView: true,
// Changes the default .js and .php endpoint's filename
// Default: 'piwik'
trackerFileName: 'piwik',
// Whether or not to log debug information
// Default: false
debug: false
});
How do I implement tags within this plugin? Would I just set the trackerUrl to my container url like this:
// Overrides the autogenerated tracker endpoint entirely
// Default: undefined
trackerUrl: 'https://mycontainer.js'
Also how do I send custom data. For example:
'user':{
'role':'consumer',
'type':'purchaser'
}
edit: In the Matomo tag manager documentation it says to put this in the head tag.
<!-- MTM -->
<script type="text/javascript">
var _mtm = _mtm || [];
_mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src='https://mycontainer.js'; s.parentNode.insertBefore(g,s);
</script>
<!-- End MTM -->
So is that still required with the vue-matomo plugin or can you put
g.src='https://mycontainer.js'
somewhere else?
Under the hood, the Vue Plugin simply exposes to you the Matomo tracking client SDK. You can call any of the native SDK functions listed in their SDK on their website by going through this.$matomo.
You can actually see that they do this in the source code:
const Matomo = MatomoJS.getTracker(trackerEndpoint, siteId)
// Assign matomo to Vue
Vue.prototype.$piwik = Matomo
Vue.prototype.$matomo = Matomo
Where MatomoJS is resolved through import Matomojs from './matomo' which is just a flat javascript file that packaged their public SDK.
Environment:
Worklight 6.1.0.2
dojo 1.9.4
We have created a hybrid app using Worklight 6.1 for android, iOS and windows8 platform. Now we would like to add and show End User License Agreement (EULA) window to the user, when the app first time launch. It should have Accept and Decline button. If user tap on Accept button, then he should be able to use the app.
I would like to know, how can we achieve this using Worklight 6.1.
Any help on this, will be much appreciated.
FYI there is nothing specific here to Worklight.
You could implement this in any number of ways w/out ever using any Worklight API whatsoever.
You could achieve it for example like this (untested code - you'll need to experiment):
In main.js create some global variable eulaAccepted:
var eulaAccepted;
// You will need to handle this property using HTML5 Local Storage so that it will persist for the next time the app is launched, and have the app act accordingly.
Then, in wlCommonInit():
function wlCommonInit() {
if (!eulaAccepted) {
displayEula();
} else {
displayApp();
}
}
In displayEula():
function displayEula() {
// either display a dialog using `WL.SimpleDialog`...
// Or maybe custom HTML with "accept" and "not accept" buttons
WL.SimpleDialog.show(
"Eula Agreement", "your-eula-text-here",
[{text: "Accept", handler: acceptEula },
{text: "Reject", handler: rejectEula}]
);
}
Handle the result:
function acceptEula() {
eulaAccepted = true;
... // Some code that will store the `eulaAccepted` variable using HTML5 Local Storage API
displayApp();
}
function rejectEula() {
// Display some other custom HTML instead of your app.
// Maybe also additional logic to try again to accept the Eula...
}
I am building a web app and just installed ssl.
Everything seems to be fine except for these two errors I'm getting about fonts being loaded over an insecure connection. The console suggests it's something that Modernizr is doing, but I can't figure out where and how to fix it.
Here's the console output:
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/rosarivo/v1/OGdIq-p0tOtBN2VMVvO9W_esZW2xOQ-xsNqO47m55DA.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
The page at 'https://myawesomewebsite.com/' was loaded over HTTPS, but ran insecure content from 'http://themes.googleusercontent.com/static/fonts/inconsolata/v5/BjAYBlHtW3CJxDcjzrnZCIbN6UDyHWBl620a-IRfuBk.woff': this content should also be loaded over HTTPS.
modernizr-2.8.0.min.js:4
I am actually using TypeKit for my fonts, so I have no idea what these Google Fonts are doing on the page and why Modernizr would be loading them.
There is a test for #font-face for CCS3 support in the full build of modernizr. I believe this test code loads some font just to see if that is working.
If you don't need that, use the build configurator on the modernizr page to exclude that from your custom built library.
By the way, it seems that the newer version of modernizr loads the fonts over SSL.
Test Code in modernizr 2.8.3
/*>>fontface*/
// #font-face detection routine by Diego Perini
// javascript.nwbox.com/CSSSupport/
// false positives:
// WebOS github.com/Modernizr/Modernizr/issues/342
// WP7 github.com/Modernizr/Modernizr/issues/538
tests['fontface'] = function() {
var bool;
injectElementWithStyles('#font-face {font-family:"font";src:url("https://")}', function( node, rule ) {
var style = document.getElementById('smodernizr'),
sheet = style.sheet || style.styleSheet,
cssText = sheet ? (sheet.cssRules && sheet.cssRules[0] ? sheet.cssRules[0].cssText : sheet.cssText || '') : '';
bool = /src/i.test(cssText) && cssText.indexOf(rule.split(' ')[0]) === 0;
});
return bool;
};
/*>>fontface*/
// CSS generated content detection
tests['generatedcontent'] = function() {
var bool;
injectElementWithStyles(['#',mod,'{font:0/0 a}#',mod,':after{content:"',smile,'";visibility:hidden;font:3px/1 a}'].join(''), function( node ) {
bool = node.offsetHeight >= 3;
});
return bool;
};
I have written an application in Sencha Touch 2.1, of which I embed a package build into Cordova/PhoneGap 2.5.0 and compile in xCode to run on iOS Simulator / iOS. I have added the PGSQLite plugin to PhoneGap, and built my own PhoneGap/SQLite Proxy for Sencha, which I used on a few of my Stores.*
Problem: When I embed a package build into PhoneGap and run in iOS Simulator, I see that Cordova does not load before Sencha initializes. I see this because my calls in my Sencha app to Cordova.exec that I make in my Proxy initialization result in an error telling me that the Cordova object cannot be found.
I do successfully use Cordova.exec later in my application to run things like the Childbrowser plugin for PhoneGap, and it works. But using Cordova.exec at an early stage in the app's execution, i.e., initialization, is too soon to guarantee that the Cordova object will have been instantiated.
Already tried: I already tried the following approaches:
I tried simply embedding the developer build of my Sencha app into PhoneGap. Although this worked, I don't want to deploy my development build as my released app because it is inefficient and takes up a lot of space. I have learned from this experiment, however, that the way the Sencha Touch microloader works on package and production builds loads PhoneGap after Sencha. This can be clearly seen when inspecting the DOM after Sencha loads in a package build.
I have already configured my app.json file to include PhoneGap and
my plugins before app.js and the Sencha Touch framework. Playing
with the order of my JS file references in my app.json did not
seem to affect the load order.
I also tried creating a script loader, as described here
(StackOverflow). I then ran the script loader for Cordova, and in
the callback for that, ran the script loader for my plugin, and
then, finally, in the callback for that, ran the Sencha Touch
microloader. This resulted in an error. Additionally, I had to
manually set that up in my index.html file after Sencha built my
package. This seems unacceptable.
What I am looking for: I am looking for answers to the following:
Is there a way to configure Sencha's microloader or my Sencha app in general so that Cordova is ensured to have loaded before Sencha's microloader runs?
Is there a way to set this up so that using Sencha Cmd still works, and I don't have to hack around in my index.html file after I build the app?
Note:
*Please don't suggest I use the existing, so-called, SQLite Proxy for Sencha. I specifically chose my approach because, though I appreciated the existing work on a SQLite proxy for Sencha Touch 2 (namely, this), it is actually a WebSQL proxy that does not store natively in SQLite on iOS. My proxy uses the PGSQLite plugin for PhoneGap to natively store data in SQLite on iOS. I plan to open-source it when I have an opportunity to clean it up and untangle it from my code.
I ended up solving this myself by building a custom loader. I am not sure if there is a more Sencha-ish way to do it, but here are the details of what I did, which does work, in case anyone else wants to ensure that PhoneGap is completely loaded in package and production builds before running anything in Sencha. (That would probably be the case in all scenarios in which PhoneGap is packaging a Sencha app).
My index.html file:
<!DOCTYPE HTML>
<html manifest="" lang="en-US">
<head>
<!-- Load Cordova first. Replace with whatever version you are using -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad() {
// Check for whatever mobile you will run your PhoneGap app
// on. Below is a list of iOS devices. If you have a ton of
// devices, you can probably do this more elegantly.
// The goal here is to only listen to the onDeviceReady event
// to continue the load process on devices. Otherwise you will
// be waiting forever (literally) on Desktops.
if ((navigator.platform == 'iPad') ||
(navigator.platform == 'iPhone') ||
(navigator.platform == 'iPod') ||
(navigator.platform == 'iPhone Simulator') ||
(navigator.platform == 'iPadSimulator')
) {
// Listening for this event to continue the load process ensures
// that Cordova is loaded.
document.addEventListener("deviceready", onDeviceReady, false);
} else {
// If we're on Desktops, just proceed with loading Sencha.
loadScript('loader.js', function() {
console.log('Finished loading scripts.');
});
}
};
// This function is a modified version of the one found on
// StackOverflow, here: http://stackoverflow.com/questions/756382/bookmarklet-wait-until-javascript-is-loaded#answer-756526
// Using this allows you to wait to load another script by
// putting the call to load it in a callback, which is
// executed only when the script that loadScript is loading has
// been loaded.
function loadScript(url, callback)
{
var head = document.getElementsByTagName("head")[0];
var script = document.createElement("script");
script.src = url;
// Attach handlers for all browsers
var done = false;
script.onload = script.onreadystatechange = function()
{
if( !done && ( !this.readyState
|| this.readyState == "loaded"
|| this.readyState == "complete") )
{
done = true;
// Continue your code
callback();
}
};
head.appendChild(script);
}
function onDeviceReady() {
console.log("[PhoneGap] Device initialized.");
console.log("[PhoneGap] Loading plugins.");
// You can load whatever PhoneGap plugins you want by daisy-chaining
// callbacks together like I did with pgsqlite and Sencha.
loadScript('pgsqlite_plugin.js', function() {
console.log("[Sencha] Adding loader.");
// The last one to load is the custom Sencha loader.
loadScript('loader.js', function() {
console.log('Finished loading scripts.');
});
});
};
</script>
<meta charset="UTF-8">
<title>Sencha App</title>
</head>
<!-- Don't forget to call onBodyLoad() in onLoad -->
<body onLoad="onBodyLoad();">
</body>
</html>
Next, create a custom loader in loader.js in your document root, alongside your index.html. This one is heavily based on the development microloader that comes with Sencha. Much props to them:
console.log("Loader included.");
(function() {
function write(content) {
document.write(content);
}
function meta(name, content) {
write('<meta name="' + name + '" content="' + content + '">');
}
var global = this;
if (typeof Ext === 'undefined') {
var Ext = global.Ext = {};
}
var head = document.getElementsByTagName("head")[0];
var xhr = new XMLHttpRequest();
xhr.open('GET', 'app.json', false);
xhr.send(null);
var options = eval("(" + xhr.responseText + ")"),
scripts = options.js || [],
styleSheets = options.css || [],
i, ln, path;
meta('viewport', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no');
meta('apple-mobile-web-app-capable', 'yes');
meta('apple-touch-fullscreen', 'yes');
console.log("Loading stylesheets");
for (i = 0,ln = styleSheets.length; i < ln; i++) {
path = styleSheets[i];
if (typeof path != 'string') {
path = path.path;
}
var stylesheet = document.createElement("link");
stylesheet.rel = "stylesheet";
stylesheet.href = path;
head.appendChild(stylesheet);
}
for (i = 0,ln = scripts.length; i < ln; i++) {
path = scripts[i];
if (typeof path != 'string') {
path = path.path;
}
var script = document.createElement("script");
script.src = path;
head.appendChild(script);
}
})();
Notice that your index.html file does not contain a #microloader script element. That's because you should take it out and use your custom loader.
With all that in place, you will be able to sail smoothly, knowing that the whole PhoneGap environment is in place before your Sencha javascript starts doing things.
All,
In messing with the new cards found in 2.0p5, I noticed there is no longer a template available to alter the header or the content of the actual card.
Can someone confirm this is not available, just want to make sure I am not missing it anywhere...
There really is no way to alter the display of the card?
Just for clarity of the post, in 2.0p2 you could do a buildContent function or buildHeader function inside Ext.define of the Card.
The card no longer has a template that you can modify directly, however you can create a custom CardContent plugin to display custom html:
Ext.define('Rally.ui.cardboard.plugin.MyCardContent', {
alias: 'plugin.rallymycardcontent',
extend: 'Rally.ui.cardboard.plugin.CardContent',
getHtml: function() {
var html = this.callParent(arguments);
return html + '<span>mycontent</span>';
}
});
Then configure your CardBoard to use the custom plugin:
Ext.create('Rally.ui.cardboard.CardBoard', {
types: ['User Story', 'Defect'],
attribute: "ScheduleState",
fieldNames: ['Tasks'], // display task information inline on card
cardConfig: {
// overriding plugins to add the custom plugin
// be sure to include the default plugins.
plugins: [
{ptype: 'rallycardheader'},
{ptype: 'rallymycardcontent'},
{ptype: 'rallycardpopover'}
]
}
});