I am trying to figure out how to redirect users who land on a desktop website to a different URL for mobile devices, specifically apple and android devices.
I have read several posts related to this here on StackOverflow, and am really battling to piece the information together to actually get it done.
Is there a reasonably straightforward way, with steps I can follow, for me to implement such a thing? Unfortunately I have experience with HTML and CSS, very little javascript, and no PHP at all.
Any advice on where i should be looking or which direction to take would be a great help, bearing in mind that I have been reading up on what i can find here.
You will need javascript (or some similar technology) to do this sort of detection. Here's a function I've used in the past that works pretty well (credit where credit is due: script taken from detectmobilebrowsers.com):
<script type="text/javascript">
window.mobilecheck = function() {
var check = false;
(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = true})(navigator.userAgent||navigator.vendor||window.opera);
return check;
}
if(window.mobilecheck()) {
window.location = 'your_mobile_url';
}
</script>
If you place this script in the <HEAD></HEAD> section of your desktop site, it will redirect the users with mobile devices to your mobile site (your_mobile_url). It uses a big, scary regular expression to determine if the visitor is identified as using a mobile browser.
Ideally, you'd also have some server-side technology (Python, ASP, PHP or similar) that stores a session variable that the user has been redirected. That way, if they return to the desktop version by choice, they're not forced back into the mobile version of your site.
Related
Experience cloud vistor id is used. App, web are using same adobe launch library. When I login into app url change and mid changes and then if I navigate from app to web responsive page mid is changed and I am not seeing any cross-domain pathing report from app to web ?
anything do I need to do with s.cookiedomainperiod or anything to make this work?
The Experience Cloud Visitor ID is not automatically carried over from the native mobile app to a (mobile) web page. The long story short is native apps don't really store data locally in the same way as web browsers, so there's no automatic ability to use the same local storage mechanism/source between the two.
In order to do this, you must add some code to the mobile app to append the mid value to the target URL, e.g. :
Android
String urlString = "http://www.example.com/index.php";
String urlStringWithVisitorData = Visitor.appendToURL(urlString);
Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(urlStringWithVisitorData));
startActivity(browserIntent);
iOS
NSURL *url = [NSURL URLWithString:#”http://www.example.com/index.php"];
NSURL *urlWithVisitorData = [ADBMobile visitorAppendToURL:url];
[[UIApplication sharedApplication] openURL:urlWithVisitorData];
If implemented properly, you should now see a adobe_mc= parameter appended to the target URL. Then on page view of the target page, if you have the Adobe Analytics javascript and Experience Cloud Visitor ID libraries implemented, they will automatically look for and use that value instead of generate a new value (should not require any config / coding on this end).
Update:
#Ramaiyavraghvendra you made a comment:
Hi #Crayon, mny thanks for your profound answer. I am sorry that i
missed to inform that this app is not native one but this is a SPA
app. so the implementation of entire app is also done through launch.
Could you pl help in this case then.
I'm not entirely sure I understand your issue. If you are NOT moving from a native mobile app to web page, and your mobile app is really a web based SPA that outputs Launch as regular javascript code throughout the entire app, then you shouldn't have to do anything; the Experience Cloud ID service should carry over the id from page to page.
So it sounds to me like perhaps your Experience Cloud Visitor ID and/or Adobe Analytics collection server settings are not configured correctly. the cookie domain period variables may be an issue, if logging in involves moving from say www.mysite.com to www.mysite.co.uk or similar, but shouldn't be a problem if the TLD has the same # of periods.
Or, the trackingServer and trackingServerSecure variables may not be configured properly. In practice, I usually do not set trackingServerSecure at all. These variables get kind of confusing and IMO buggy in different scenarios vs. what you are using, so I tend to use the "secure" value in the trackingServer field and leave the trackingServerSecure blank, and then Experience Cloud Visitor ID and Adobe Analytics will just use the secure version 100% of the time.
Or..it could be a number of other config variables not properly set. It's hard to say if any of this is off, without access to the app and Launch container.
Also you may want to check the response headers for your logged in pages. It may be that they are configured to reject certain existing non-https cookies or something else that effectively causes the existing cookies to be unreadable and make the Experience Cloud ID service generate a new ID and cookies.
Or.. maybe your app kind of is a native mobile app but using an http wrapper to pull in web pages, so it is basically a web browser but it is effectively like moving from one web browser to another (e.g. starting on www.site.com/pageA on Chrome, and then copy/pasting that URL over to Internet Explorer to view). So effectively, different cookie jar.
Launch (or DTM) + Experience Cloud ID (Javascript methods)
In cases such as the last 2 paragraphs, you have to decorate your target links the same as my original answer, but using the Launch + Experience Cloud ID Service javascript syntax:
_satellite.getVisitorId().appendVisitorIDsTo('[your url here]');
You write some code to get the target URL of the link. Then run it through this code to return the url with the parameters added to them, and then you update your link with the new URL.
Super generic example that just updates all links on the page. In practice, you should only do this for relevant link(s) the visitor is redirected to.
var urls = document.querySelectorAll('a');
for (var i = 0, l = urls.length; i < l; i++) {
if (urls[i].href) {
urls[i].href = _satellite.getVisitorId().appendVisitorIDsTo(urls[i].href);
}
}
I've been trying to get OAuth 2.0 to work correctly. I have managed to make the url that that will do the "deny/allow" for my app by opening a webpage with just
Application.OpenUrl(uri.ToString());
The problem is that I have no idea how to get the redirect and the auth token from the page if the user hits allow. When you hit allow, right now nothing happens it just sits on the page. Checking Networking in chrome debug does have the redirect and token there but it never actually sends it..
I was recommended to use RestSharp but I again have no idea how to use it with Unity as there are lot of resources for Android/iOS PC etc. but I can't get any of them to work for this Unity project...
var client = new RestClient("https://www.fitbit.com/oauth2/authorize?response_type=code&client_id=*clientID*&redirect_uri=http%3A%2F%2FfitRPGcallback&scope=activity%20profile%20sleep%20social");
Debug.Log("client made");
var request = new RestRequest(Method.POST);
request.Resource = ("profile%20sleep%20social");
client.ExecuteAsync(request, response => { Debug.Log("response is : " + response.Content);});
Application.OpenURL(client.BaseUrl.ToString());
In the URL I do have the correct clientID in there as well just not sure what I can and can't show for security reasons etc.
Biggest problem is just having no idea how to get the return value from the webpage after the user hits allow/deny...
Any insights would be super super appreciated cause I just want to start making the actual game but there's not as much point if I can't get this data...
So, I'm posting on a few other applicable questions as well since I have finally figured out my answer.
Unfortunately I'm not using REST so that part is still up in the air BUT I did get it to work with just Fitbit, Unity and a Webview plugin (you will need a webview OR a way to get the initial code back from your first OAuth2 call)
You can find steps here.
http://technicalartistry.blogspot.nl/2015/07/oauth2-unity-and-month-of-cursing.html
EDIT:
So I had to change how I did it because Fitbit changed their ToS where we are no longer allowed to use Webview based Authenticators (which is what I was using in the above blogpost.)
Give this next post a look for how to make an Android Plugin that will grab the Accesstoken from Fitbit's OAuth. This is a FREE way to do it since you make it yourself and it's ezmode :)
http://technicalartistry.blogspot.ca/2016/01/fitbit-unity-oauth-2-and-native.html
I have a login system that works for most people (on Chrome, Android devices, IE8, Firefox, etc), but it seems not to work for people with Z10s or iPhone 5s. I don't have access to these devices so it's difficult to test, so I wanted to ask whether I was setting up everything properly.
It's an AngularJS app, using hello.js for OAuth, and bootstrap-social and font-awesome for the sign in buttons.
To insert hello into Angular, in app.js I include:
var app = angular
.module('myapp', [
'ui.bootstrap',
'ui.router',
'hello',
])
...
.run([..., 'hello', ..., function(..., hello, ...) {
...
hello.init(...);
...
}]);
...
var helloApp = angular.module('hello', []);
helloApp.factory('hello', function() {
return window.hello; // Assumes hello has been loaded
});
Then, in my loginCtrl, I inject it with
angular.module('myapp').controller('loginCtrl', [..., 'hello', ...,
function(..., hello, $location, ...) {
...
$scope.doLogin = function(network) {
console.log('Calling hello ' + network);
hello.login(network);
};
...
}]);
And in my view, I have
<button id="facebookLogin" class="btn btn-social btn-facebook" ng-click="doLogin('facebook')">
<span class="fa fa-facebook pull-left"></span> <span>Sign in with Facebook</span>
</button>
<button id="googleLogin" class="btn btn-social btn-google-plus" ng-click="doLogin('google')">
<span class="fa fa-google-plus pull-left"></span> <span>Sign in with Google</span>
</button>
Yesterday I was using onclick="hello.login('facebook')", and I suspected that was breaking on certain devices because I shouldn't be using onclick and hello wasn't in scope, so that's why I changed it to ngClick and calling a function in scope. The specific effect of onclick on the users who had errors was to redirect the user to the default/catch-all route without accessing the server at all (I listen for hello events and call the server, so this suggests it wasn't calling hello at all.)
But still, I ask the people who are having issues to re-try (after refreshing obviously), and now they say the button simply does nothing.
Other buttons on the site work. In fact, to get to this page, they use a <button> that uses ui-router to get to this page.
I'm going to continue to search, but I just wanted to ask if I seemed to be hooking hello.js into AngularJS properly, and not making any other beginner mistakes.
I believe the problem is that iPhones and Z10s were blocking hello.js's popup OAuth authentication, but I couldn't just switch it to use page.
When I tried, Facebook returns me to my redirect_url with the fragment
#access_token=....&expires_in=4264&state={%22client_id%22%3A%22164986300332415%22%2C%22network%22%3A%22facebook%22%2C%22display%22%3A%22page%22%2C%22callback%22%3A%22_hellojs_3ojn1yy8%22%2C%22state%22%3A%22%22%2C%22oauth_proxy%22%3A%22https%3A%2F%2Fauth-server.herokuapp.com%2Fproxy%22%2C%22scope%22%3A%22basic%22%2C%22oauth%22%3A{%22version%22%3A2%2C%22auth%22%3A%22https%3A%2F%2Fwww.facebook.com%2Fdialog%2Foauth%2F%22}}
it's ugly, but the point is it starts with a hash tag. So, while hello.js can normally read this, it couldn't in this case because Angular would mangle the address immediately. I'm not sure if this is because I specify to use hash-bangs instead of hash's, but it was.
And I couldn't send this to a PHP script or anything because the fragment after the hashtag would never make it to the PHP script.
So, my solution was to point the redirect_url at an independent page that has hello.js on it, but no Angular. It saves stuff to window.sessionStorage and redirects the user back to the login page, where hello.js passes the user through.
I'm not very confident in this ugly approach yet, so I put a browser sniffer to only do it for iPhones (and use popup for everyone else), I may remove this check in the future (because it's sketchy)
#matt it uses localstorage, not sessionstorage.
Use popup for all, and define a redirect_uri page with just hello.js In it. I dont know why you might think thats sounds wrong. All the demos do it this way. It also gives you a chance to display a nifty loading screen.
Sorry about the ugly fragment. It communcates a lot of state parameters which is used for the oauth proxy... most endpoints like facebook dont need it, so I might refactor that to make it a little less daunting.
How do I setup a Canvas payments callback url? I only need to set up for static pricing at this time within my app. Facebook requires a Payments Object under "Realtime Updates" heading. I have been searching everywhere for a simple straight example on how to do the complete process but have not been able to find one. I have been working through the Unity3d Friendsmash example project.
I haven't found much information on the callback, but since I don't really use it, I just used this code inside a PHP script to just make it work:
$hub_mode = $_GET['hub_mode'];
$hub_challenge = $_GET['hub_challenge'];
$hub_verify_token = $_GET['hub_verify_token'];
if ($hub_verify_token =='YourToken')
{
echo $hub_challenge;
}
I found the problem! I was using Parse which does not host php pages. I put my file on my bluehost account and it now works! My app can now show the pay dialog on Facebook using the callback url I gave it.
I am trying do some testing examples with Facebook and Flash (using the Adobe Facebook AS3 library). I have followed the examples located at
http://www.adobe.com/devnet/facebook/articles/flex_fbgraph_intro.html
All was going really well and I got through to the step 4 part of the process and this is where things fell over. According to that document you need to be able to check to see if your Flash object is being hosted via Facebook or via your own site.
You do this by checking top.location (either via JavaScript or ExternalInterface.call method in Actionscript). However when I do that all I get is undefined. I have also tried various things :-
Top.location.toString() = undefined
Window.location.toString() = http://local.evanine.com:8080/userstatus/
Window.Top.toString() = [object DOMWindow]
Top.document = undefined
getPage() = Test 8:- undefined
getPage() is a Javascript function called via the ExternalInterface.call and all it does is return top.location.href
However, if I goto the same Flash object on my own site then it shows the right information it only displays this when embedded in an iFrame inside Facebook.
So, finally to my question :)
Since Facebook requires App Developers to use SSL, am I seeing this because I currently do not have an SSL certificate on my server ? Is this a security thing ?
This isn't a SSL problem, this is because of the browser same origin policy. This would prevent an IFRAME (or your canvas app), from seeing what page the user is on. However, you do know enough to figure out if you are in an IFRAME if this is true:
top.location.href === location.href
Logically, top.location.href will return undefined as it should within an IFRAME. Remmember that you don't need to know what the top url is, just if it belongs to you or not, which you can figure out by this comparison.
EDIT:
If you want to know if it is within FB then you can do this:
window.name === "iframe_canvas"