I'm writing an app using PhoneGap Build, jQuery Mobile and Energize.js (to speed up clicks)
My wish is to bind an 'event' to the Google Analytics plugin for PhoneGap Build, so that I can track user clicks.
As you can see below, my tracking listener is bound to a 'touchstart' event. At the moment, none of the tracking is working. I am unsure if it is because I have bound to an incorrect action (which Energize.js may have changed) or if there is another issue in my code.
Any help would be appreciated. My account on Google Analytics is set as a 'Webpage' instead of 'Mobile App' as per the plugin guidelines.
$(document).on("touchstart", ".condition-list-item a", function() {
var deviceID = device.platform + '.' + device.uuid;
// Generates unique variable for each device
var conditionVar = $(this).attr("data-condition");
// Pulls ConditionName from list item clicked
PageButtonClicked(conditionVar);
// Fires 'Page' tracking to Google Analytics, with ConditionName as 'Page'
VariableButtonClicked(deviceID, conditionVar)
navigator.geolocation.getCurrentPosition(onSuccess);
// Creates an object 'Position' using Geolocation API
function onSuccess(position) {
var geo = position.coords.latitude + ', ' + position.coords.longitude;
}
});
Try this:
$(document).ready(function(){
$(".condition-list-item a").on("touchstart", function(e){
//your function
});
});
As follow-up, the above code is still not working. Google Analytics is currently attempting to track the information as if it were a website (as recommended by the plugin).
I change the settings on the Google Analytics website to track as if it were a Mobile App. I still think the above code is not working; however, Google Analytics' built in tracking takes care of much the same stuff and is working beautifully.
Related
I am working on Zendesk server side App, There is a orderno custom filed in ticket form.
what i want to achieve is, get value of orderno when its value got changed.
Previously, I have achieve something similar as following.
if (client) {
client.on('ticket.requester.name.changed', function(e) {
console.log("e === > ", e);
});
}
Zendesk has some event docs here. I tried but not succeed.
Please guide me how i can get custom filed value when it changes
The documentation you are referring to is for ZIS, a different set of tools for handling integrations. ZAF events for ticket sidebar location are stated here.
This snippet listens for field 123123 change in a ticket_sidebar app:
client.on('ticket.custom_field_123123.changed', function(e) {
handleChange();
});
I have seen previous posts regarding the conversion from a Google Place ID to an address; however I am interested in the opposite.
I have the GMS Address of the desired location but I want to acquire the Google Place ID in order to present more details to the user. From what I have seen on Google's iOS API website, you can attain a Google Place ID from an Autocomplete feature (for user searching), a selected location feature, or a current location feature.
My application intends to display multiple locations in which I already have the addresses for. The user can select individual locations for more details in addition to receiving details upon arrival. Therefore the features listed above are not ideal.
I have also tried using Google's Web API with features such as "Text Search Requests" & "Nearby Search Requests" however I am receiving "Zero Results".
Are there other methods that I haven't thought of and/or seen?
How about the Place ID finder in the Google Maps JavaScript API.
A place ID is a textual identifier that uniquely identifies a place. It is also available for most locations, including businesses, landmarks, parks, and intersections. These IDs are stable, meaning that once you've identified the place ID for a place, you can reuse that value when you next look up that place.
You can use the same place ID across the Google Places API and a number of Google Maps APIs. For example, you can use the same place ID to reference a place in the Places API, the Google Maps JavaScript API, the Google Maps Geocoding API, the Google Maps Embed API and the Google Maps Roads API.
Here is the sample code use for this.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -33.8688, lng: 151.2195},
zoom: 13
});
var input = document.getElementById('pac-input');
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
map: map
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
autocomplete.addListener('place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
// Set the position of the marker using the place ID and location.
marker.setPlace({
placeId: place.place_id,
location: place.geometry.location
});
marker.setVisible(true);
infowindow.setContent('<div><strong>' + place.name + '</strong><br>' +
'Place ID: ' + place.place_id + '<br>' +
place.formatted_address);
infowindow.open(map, marker);
});
}
Just take note that this example requires the Places library. Include
the libraries=places parameter when you first load the API. For
example:
script src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&libraries=places"
In our PhoneGap iOS application, we are using the InAppBrowser plugin to display some content, and we need to open a page in Safari from within the InAppBrowser.
How can we have links from within the InAppBrowser open in Safari?
From the phonegap documentation:
Opens a URL in a new InAppBrowser instance, the current browser instance, or the system browser.
var ref = window.open(url, target, options);
ref: Reference to the InAppBrowser window. (InAppBrowser)
url: The URL to load (String). Call encodeURI() on this if the URL contains Unicode characters.
target: The target in which to load the URL, an optional parameter that defaults to _self. (String)
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
_blank: Opens in the InAppBrowser.
_system: Opens in the system's web browser.
So to answer your question, use:
window.open(your_url, '_system', opts);
Note that the domain will need to be white-listed.
Update 4/25/2014:
I think I kind of misunderstood the question (thanks to commenter #peteorpeter) -- you want to have some way to click a link in the InAppBrowser and have that open in the system browser (e.g. Mobile Safari on iOS). This is possible, but it will require some forethought and cooperation between the app developer and the person responsible for the links on the page.
When you create an IAB instance, you get a reference to it back:
var ref = window.open('http://foo.com', '_blank', {...});
You can register a few event listeners on that reference:
ref.addEventListener('loadStart', function(event){ ... });
This particular event is fired every time the URL of the IAB changes (e.g. a link is clicked, the server returns a 302, etc...), and you can inspect the new URL.
To break out into the system browser, you need some sort of flag defined in the URL. You could do any number of things, but for this example let's assume there's a systemBrowser flag in the url:
.....html?foo=1&systemBrowser=true
You'll look for that flag in your event handler, and when found, kick out to the system browser:
ref.addEventListener('loadStart', function(event){
if (event.url.indexOf('systemBrowser') > 0){
window.open(event.url, '_system', null);
}
});
Note that this is not the best method for detecting the flag in the url (could lead to false positives, possibly) and I'm pretty sure that PhoneGap whitelist rules will still apply.
Unfortunately target=_system does not work from within the InAppBrowser. (This would work if the link originated in the parent app, though.)
You could add an event listener to the IAB and sniff for a particular url pattern, as you mention in your comments, if that fit your use case.
iab.addEventListener('loadstart', function(event) {
if (event.url.indexOf("openinSafari") != -1) {
window.open(event.url, '_system');
}
}
The 'event' here is not a real browser event - it is a construct of the IAB plugin - and doesn't support event.preventDefault(), so the IAB will also load the url (in addition to Safari). You might try to handle that event within the IAB, with something like:
iab.addEventListener('loadstop', function(event) {
iab.executeScript('functionThatPreventsOpenInSafariLinksFromGoingAnywhere');
}
...which I have not tested.
This message is for clarification:
If you open an another with window.open by catching a link on loadstart, it will kill yor eventhandlers that assigned to first IAB.
For example,
iab = window.open('http://example.com', '_blank', 'location=no,hardwareback=yes,toolbar=no');
iab.addEventListener('loadstop', function(event) {console.log('stop: ' + event.url);});
iab.addEventListener('loaderror', function(event) { console.log('loaderror: ' + event.message); });
iab.addEventListener('loadstart', function(event) {
if (event.url.indexOf("twitter") != -1){
var ref2 = window.open(event.url, '_system', null);
}
});
When the second window.open executed, it will kill all the event listeners that you binded before. Also loadstop event will not be fired after that window.open executed.
I'm finding another way to avoid but nothing found yet..
window.open() doesn't work for me from within an InAppBrowser, whether or not I add a script reference to cordova.js to get support for window.open(...'_system'), so I came up with the following solution which tunnels the "external" URL back to the IAB host through the hashtag so it can be opened there.
Inside the InAppBrowser instance (I'm using AngularJS, but you can replace angular.element with jQuery or $ if you're using jQuery):
angular.element(document).find('a').on('click', function(e) {
var targetUrl = angular.element(this).attr('href');
if(targetUrl.indexOf('http') === 0) {
e.preventDefault();
window.open('#' + targetUrl);
}
});
Note that that's the native window.open above, not cordova.js's window.open. Also, the handler code assumes that all URLs that start with http should be externally loaded. You can change the filter as you like to allow some URLs to be loaded in the IAB and others in Safari.
Then, in the code from the parent that created the InAppBrowser:
inAppBrowser.addEventListener('loadstart', function(e) {
if(e.url.indexOf('#') > 0) {
var tunneledUrl = e.url.substring(e.url.indexOf('#') + 1);
window.open(tunneledUrl, '_system', null);
}
});
With this solution the IAB remains on the original page and doesn't trigger a back-navigation arrow to appear, and the loadstart handler is able to open the requested URL in Safari.
I want to track the Trigger.IO API platform version and Reload stream ID that my mobile ecommerce app is running when it submits an order. Is there an API call I can use to query this information when my app is running ?
James, yes I want to track usage numbers for Reload updates, but I want the data submitted to my own analytics solution. When the client submits an order I want to be able to do something like this :
function sendOrder (order) {
var client = {};
client.userAgent = window.navigator.userAgent;
if (forge.is.android()) client.platform = "android"
else if (forge.is.ios()) client.platform = "ios";
client.packager = {name:"forge"};
// ASSUME there is a new `gestalt` API to query the Trigger.IO client
client.packager.version = forge.gestalt.platformVersion;
client.packager.reloadId = forge.gestalt.reload.id;
ajax.send(order, callback);
}
I am new to html 5 geolocation, Is there any site or examples where it shows how, i can use html geolocation api to track the location of other devices. Also, for example how can i use use HTML5 geolocation to find the nearest car dealer say 5 or 10 miles from me?
Any examples sample would be really helpfull.
thanks
I can't speak to tracking devices, but i've been writing something that might help with the second part of your question.
//check browser support
if(navigator.geolocation) {
//do the geolocation stuff
navigator.geolocation.getCurrentPosition(function(position) {
//make a string out of the coordinates
var initloc_str = position.coords.latitude + ', ' + position.coords.longitude;
//pass it to a function that searches for donut shops near the coordinates
donutSearch(initloc_str);
});
} else { // if no browser support, error message or whatever
My donut shop search function is based on the local search in Google's Ajax search API, I found this article on webmonkey helpful for that bit. That API was recently deprecated but I haven't figured out how to do local search with their new Custom Search API yet.
You can register a function for tracking positions of a user:
var watchId = navigator.geolocation.watchPosition(function(position) {
console.log(position.coords.latitude);
console.log(position.coords.longitude);
});
And you can unregister:
navigator.geolocation.clearWatch(watchId);
This site will give you a awesome overview of the HTML5 geolocation Capability.