Google Mobile Ads SDK App Events with Click Tracking - ios

We are displaying some ads in our iOS & Android applications using the Google Mobile Ads SDK. We need some parameters to make a web service call when the user clicks on the Ad and we get them using the GADAppEventDelegate, and after the web service call we present a custom screen. (so we don't want to redirect the user to a Web Page). The problem is that the Clicks are not tracked and we believe that Ad Creative might not be configured right.
<html><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<html>
<head>
<script src="http://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function fireEvent() {
admob.events.dispatchAppEvent("query_string", "ad_origin_key=USPS2013_iPhone_Upgraded_320x50&k_key=&acid_key=719768856&ad_image_url_key=http://USPS2013_iphone_320x50");
}
</script>
</head>
<body>
<img src="http://pagead2.googlesyndication.com/pagead/imgad?id=CICAgIDQ59KwChABGAEyCKGNWPM-wPBl" width="320" height="50" border="0" onclick="fireEvent()"/>
</body>
</html></body></html>
I believe that in order not to be redirected to a Web Page we should make an AJAX request in fireEvent() function, something like $.get("%%CLICK_URL_UNESC%%www.example.com/ads/landingpage"); but the browser doesn't allow AJAX request to a server different of the original request server.
So how could we solve this issue, track the clicks and not navigate to a new web page?
Thanks

Hello i think this answer is a bit late but the code you quoted actually works!!
Inside your head tag of HTML of the creative
<script src="http://media.admob.com/api/v1/google_mobile_app_ads.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
// Send an event when ad loads.
// admob.events.dispatchAppEvent("adId", "1");
// handle your click with onClick="handleClick()"
handleClick = function() {
admob.log("click ad: call handleClick()"); // call a log to XCode console for debug
// Send an event when ad is clicked.
admob.events.dispatchAppEvent("eventName", "params"); //{action}|{action params}...
//magic goes here
//i think the click measure through this url
//and use jQuery get that send get method without callbacks
$.get("%%CLICK_URL_UNESC%%")
};
</script>
You have to wait a while like 30 mins then you will see the click stats in your DFP console.

Related

Google Tag Assistant asks feed ID

I was asked to upgrade an existing site from using the old remarketing tracking code that looked like this:
<script type="text/javascript">
var google_conversion_id = 12345;
var google_custom_params = window.google_tag_params; // this is empty
var google_remarketing_only = true;
</script>
<script type="text/javascript" src="https://www.googleadservices.com/pagead/conversion.js">
</script>
<noscript>
<div style="display:inline;">
<img height="1" width="1" style="border-style:none;" alt="" src="//googleads.g.doubleclick.net/pagead/viewthroughconversion/12345/?value=0&guid=ON&script=0"/>
</div>
</noscript>
to another method that looks like this:
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-12345"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'AW-12345');
</script>
because it is asynchronous and should not block page loading. But the Google Tag Assistant extension that validates that tracking is set up correctly asks me to enter a "feed ID" when using the newer (gtag.js based) method. Previously it was showing Remarketing Tag as green.
Why is it needed now and not with the old code? I asked someone who has access to the AdWords account and they don't have the feed ID (or can't find it...).
I verified that the request to googleads.g.doubleclick.net/pagead/viewthroughconversion/ is sent though devtools as described in Verifiction using browser based developer tools:
https://developers.google.com/adwords-remarketing-tag/verification
Is my configuration correct?
That feed ID is related to dynamic remarketing campaigns. If you aren't running a dynamic campaign, then the feed ID shouldn't matter.
That field to enter a feed ID is there to help you with validating that your feed is working correctly.
Here is a quick video that might help clear up your questions. https://www.youtube.com/watch?v=QuOUNIFo0aQ

Intel XDK jquery mobile go back to previous sub page

I am using Intel XDK with jquery mobile and I am trying to override the hardware back button because it is not working. I am not sure how much of my code I can post. I do have a complicated app though. I have three html files. With an index.html with links (hrefs) to page one and page two. In index.html I have this code
script src="intelxdk.js"></script>
<script src="cordova.js"></script>
<script src="xhr.js"></script>
<script src="js/jquery.min.js"></script> <!-- jQuery v2.1.1 -->
<script src="jqm/jquery.mobile-min.js"></script> <!-- jQuery Mobile 1.4.2 -->
<script type="text/javascript">
/* Intel native bridge is available */
var onBackKeyDown = function() {
$.mobile.goBack();
}
var onDeviceReady = function() {
intel.xdk.device.hideSplashScreen();
intel.xdk.display.useViewport;
intel.xdk.device.addVirtualPage();
document.addEventListener("intel.xdk.device.hardware.back", onBackKeyDown, false);
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
</script>
On page one and page two currently I have about ten subpages each (more to come) and I definitely want to back able to go back to the previous subpage. I have done kind of a lot of work with jquery mobile so far and I hope I don't have to switch to App Framework just to get the back button to work. Thanks for any help, let me know if you need any more html code or JS.

JQuery Mobile slider not working

I'm trying to get a slider to work in with JQuery Mobile 1.4.2.
What I would like to do is to use the slidestop event to update a value elsewhere. However, the slidestop event does not fire. I created a test file and tested in Safari and Firefox. Nothing happens when I stop sliding the slider. Could someone please tell me what tutorial I missed?
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<script src="js/jquery.min.js">
</script>
<script src="js/jquery.mobile.js">
</script>
<title>Concertzender</title>
</head>
<body>
<label for="slider-step">Input slider:</label>
<input type="range" name="slider-step" id="slider-step" value="150" min="0" max="500" step="10" />
</body>
<script>
$( "#slider-step" ).on('slidestop',function( event ) { alert("slidestop event fired"); });
</script>
</html>
EDIT:
I tried the answer suggested below, but I have a slightly more complicated setup than the example above and, therefore, it doesn't work out.
I am trying to avoid the page structure of JQuery Mobile and just use it for the slider. The thing is, when I change to another page, a pagecreate or pageshow is not present, so I cannot wait for those events. What I want is to create a new slider (or rather replace an empty div with another already existing div and then change the id of the formerly empty div's input id. So what I am left with is a unique newly ID'ed input (with corresponding label).
How would I go about and use the slidestop to interact with the new slider? I tried this:
$('newslider').slider();
$('newslider').on('slidestop', function(){alert("slidestop");});
But that gives me two sliders in Safari, of which one does the slidestop and the other is unresponsive. In iOS, however, I get one slider that slides, but does not fire a slidestop event. Omitting the first line gives me an unresponsive slider in Safari and one that doesn't fire in iOS.
So my question is pretty simple: How to enable the slidestop event for a new slider without using JQuery Mobile's pages?
You need to wrap all events/bindings in pagecreate.
$(document).on("pagecreate", function () {
$("#slider-step").on('slidestop', function (event) {
console.log("slidestop event fired");
});
});
Demo

Phonegap deviceready not working when page visited second time

i am trying to create a map with phonegap + google maps for ios. It works fine the first time but if I navigate to another page and then I return again to my maps page, nothing seems to happen, seems like deviceready is not fired. Any idea?
<script src="phonegap.js"></script>
<script src="maparestaurante.js"></script>
<link href="styles/retina.css" rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" />
</head>
<body onload="onLoad()">
and the javascript:
function onLoad() {
document.addEventListener("deviceready", onLoad2, true);
}
function onLoad2() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}
}
As I said, this works fine the first time, but if maps section visited again, it will never work, when testing it in the browser everyting worked fine
thx in advance
deviceReady will be fired only once. when the app is initialized. When you want to fire the load function when the page is visited again, you need to call the function again in the "page view " (which ever event supported by your SPA framework)event.

jquery mobile + phonegap onclick

I've been trying to figure this out but still stuck.
so I'm using PhoneGap for iOS and JQueryMobile.
I'm trying to show alert when a button is clicked.
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
<script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
and I have
this
Login
$(document).ready("#button").click(function() {
alert('button clicked');
});
when I tried to launch this in chrome, this works fine.
however, when I used iphone simulator, it doesnt show anything.
For a normal web application you would use dom ready i.e.
$(function(){ // <-- this is a shortcut for $(document).ready(function(){ ... });
$('#button').click(function(){
alert('button clicked');
});
});
However in a JQM application it is much more useful to bind to 'pageinit' i.e.
$(document).on('pageinit','[data-role=page]',function(){
$('#button').click(function(){
alert('button clicked');
});
});
Binding to pageinit works better because JQM inserts new pages into the same dom as the first page. Because of this all of your code in dom ready doesn't get called again. So that first bit of code i put above will only work for that first page in your JQM application. The second will work no matter what page your button is in. Let me know if I can clarify this further for you.

Resources