I have a shopping cart I want to embed in a widget/iframe on other users sites, I see three ways of doing this each with drawbacks. Here are options from estimated most to least work.
Recreate interactive shopping cart UI in javascript widget then pass values to server script with AJAX, variables are passed to the main site, when user clicks "checkout" the user is then redirected to main shopping cart site with variables populated from what the entered in the widget.
pros: complete experience
cons: most work to complete creating UI and AJAX request.
Somehow detect if user is coming to shopping cart via iframe, if this is the case have alternate code that opens new window when user clicks "checkout" redirecting user to secure page and getting variables from cart via AJAX to populate final checkout.
pros: mid amount of work, must do AJAX request to get variables from shopping cart to populate final checkout
cons: can we easily detect if site is being accessed from a user within an iframe on another site?
complete entire checkout process inside iframe/widget.
pros: least ammount of work, just embed cart in iframe
cons: will not show https in browser user may be reluctant to purchase
What is the best option?
If you could provide a bit more information, maybe I could offer you an even better option. For starters, what have you built this application with (languages/framework)? Also, would you say your application's functionality is similar to Shopify's in that you allow users to host e-commerce sites through your service? If not, tell us a bit more about your application.
Here's a quick response to the options you provided.
option 1: the only real option as I see it. Whether you're embedding the shopping cart in specifically an iframe or rendering it onto the user's page as part of a template, you should be navigating the customer away to your main site to complete the checkout process. Or at least give them a lot of screen real-estate to work with (a sizable modal for example).
option 2: is messy. You can tell if a request is coming from a remote form (like an iframe) by appending url parameters. But taking the approach you're suggesting with this doesn't make too much sense.
option 3: too heavy unless you take a modal-approach like what I mentioned in response to option 1.
That being said, if you are building an application like Shopify, you should be able to build a template for each user's website that has a section dedicated to displaying a shopping cart pertaining to the current customer's session. No iframes or widgets necessary with this approach. But again, it all depends on the use cases of your application.
If your only concern with Option 2 is detecting if your content is being loaded within an iframe, you can do that with JavaScript by using "top.frames.length" or "top === self."
For example, you could show or hide different conditional form content, or a different submit button, using the following:
if (top.frames.length == 0) {
// Show content if not embedded in an iframe.
document.getElementById('embedded-content').style.display = "none";
document.getElementById('unembedded-content').style.display = "block";
}
else {
// Show content if embedded in an iframe.
document.getElementById('embedded-content').style.display = "block";
document.getElementById('unembedded-content').style.display = "none";
}
As you've stated, the first option is the best in terms of user experience and the most likely to achieve the highest possible conversions. How much better the conversion is compared to the next best solution cannot be objectively measured, as it involves recurring customers, your own brand name, the kind of products, etc. Since the conversion rates will directly affect you (and your company), it's wise to make an estimate first to see if your efforts spent will be worth it in the short and long term.
The second option is the sweet middle ground; you still get brand recognition and customers will have some security reassurance (via address bar); (i)frame detection is easily done by a simple JavaScript comparison: top === window. However, you're losing the continuity and hence likely lose some conversion. If this risk is manageable, I'd go for this option in the short term.
Not being able to see the security certificate directly via the green lock makes the third option the least desirable. However, not all is lost; by clever use of imagery you can still gain some trust with your end-user, as outlined in this image, which is part of a great article from Smashing Magazine.
Your decision should be based on:
what can be done in the short term
what should be done in the long term
how important is secure visual cues to my potential customer
time / money spent on either solution versus revenues (break-even analysis)
Related
Okay I do not know how to explain this to you, It may be just my internet, or maybe my site is slower, or they really have a technique for doing this.
If you visit Facebook, Reddit, Youtube, Twitter, and if you click on links or any actions on those websites, the url changes but the browser tab doesn't show any loading circle.
How do they do that?
I am pretty sure my website is fast enought and at times it loads even faster than the bigger sites, but mine shows the loading circle on the browser tab.
Okay so I found the answer. Here is the technique for changing the url without reloading the page.
Updating address bar with new URL without hash or reloading the page
How do I modify the URL without reloading the page?
I am still trying to figure out though how to redirect the actual page without reloading the entire page. I am guessing they are loading it via ajax or something similar upon url change. I'll update this once I figure it out.
Edit: I am currently working on this feature for my site. The technique is to use ajax to load the content based on the url. I'll update this thread more as I update my site with this feature.
Edit 2: Damn, you will probably face the same problem I had trying to detect the url change without using onhashchange. If so, here you go:
How to detect URL change in JavaScript
This literally took me 4 hours just to figure that one out.....
Edit 3: I have now integrated this feature on my site. You can check it at
Grandweb
It is quite simple, but lots of work in appending the content once retrieved via ajax. So here is the process:
I am using pushState(); to change the url without reloading the page.
var url = $(this).attr('href');
var split_url = url.split('/');
var new_url = url.replace('https://grandweb.net/','');
window.history.pushState("object or string", "Title", "/write");
Using 'mouseup' was a bad idea, I changed my mind.
I then have to trigger the first function using 'mouseup' to retreieve the content via ajax, and then listen to succeeding onpopstate() for the next ones, because some mouse actions such as Mouse 4 or Mouse 5 are bound to the browser's Back and Forward button, and does not trigger via 'mouseup'.
$(window).on('mouseup', function(evt) {
get_content();
}
window.onpopstate = function(event) {
get_content();
}
The first one is responsible for triggering the function on first try because onpopstate only listens only when the browser's history API is populated.
Using mouseup was a bad idea, basically, don't use it unless you really want to detect mouse action from anywhere on the document.
I instead use the anchor tags/links to trigger the first function for retrieveng content.
example:
<a class="dynamic_btn" href="website.com/post">Home</a>
then
$(document).on('click','.dynamic_btn',function(e){
e.preventDefault();
get_content();
});
Using onhashchange is possible IF you have hashes on your url. I do not use hashes on my url so basically onhashchange is useless in my use case, unless I do not know something.
After retrieving the contents, I append them via creating DOM elements to existing containers from the page.
This is much easier to do if you are planning to change few elements or containers in your pages. If you plan on doing this to change a full page layout, goodluck. It's doable, but it's a really pain in tha *ss.
Upon observing Facebook, I learned that they do not implement this technique in all of their links/features. It makes sense because this is harder to maintain most especially because most of the work here is being done client side. It is very nice though because the page doesn't load.
I have implemented it on a few 'essential' functions of my website such as the viewing of posts and returning to the homepage. I can implement it on the whole site, but I am still deciding on that. That is all, thank you very much for reading internet stranger.
I noticed that a website like imgur.com displays ads on each page of the website.
This means each time you press "next" to view another funny picture, AdSense refreshes.
But a website where you can scroll to view more pages(such as 9gag.com),
Ajax handles loading of more funny pictures so it's illegal to refresh Adsense when a user scrolls for more funny pictures.
Does this means 50 users staying on 9gag.com for 3 hours scrolling and viewing 300 funny pictures would help 9gag.com generate revenue equal to ONE imgur.com user that views only 1 picture?
Does this also mean I should stay away from Ajax if I wanted revenue?
This was very confusing for me, please help me understand AdSense better.
Thank you!
WEll the problem with fully scripted ajax loaded content is that Adsense cannot read it. Therefore it has a hard time displaying relevant ads, because most advertisers have chosen to target the visitor location and the keywords on the pages. So if Adsense has no text, then most of the time it's not going to be able to serve an ad.
But I looked at 9gag.com and they are using what I think is the ajax version of Adsense, or perhaps the premium version of Adsense which allows for all sorts of things and is quite different from the core Adsense program in many ways that nobody seems to know about, and few are invited. All the big publishers I suppose.
Anyway, if you do end up clicking on one of the posts on 9gag.com you'll see other ads. Granted that the way that imgr.com has things set up should encourage more content viewing per visitor and thus also some more ad viewing, but I wouldn't say that one necessarily has more traffic overall than the other. There are too many unknown factors to determine that. Not something you can do just with looking at a site. That is where having good analytics of your traffic and visitor behavior comes in.
Say I have a site with pages. Pages are ranked based on the number of times they have been viewed. It is good for a page to be highly ranked because it will make it show up higher in my search results. Hence, the author of a page may try to game the system to increase that particular page's views.
So how do you prevent that while still keeping a quasi-accurate count?
I have come up with the following "scheme":
A user can only affect the page view once per session. This is what I would normally expect. If a user returns to the site later and views the page again, it should count as another page view.
The problem is that this makes the page view increment vulnerable to a script that clears its cookies before each request. The easiest solution to this problem would be to save the ip-address and only allow the same ip-address to increment page count once. This however has several major drawbacks; First of all, this would potentially take up a lot of storage, and second of all would prevent users on big LANs from incrementing page count. Lastly, a user cannot revisit a page and increment the page view more than once from the same ip. I can live with that, but would rather live without it.
The best method I can come up with off the top of my head would be to save the last X ip-addresses, and not let anyone from these ip-addresses affect the page view count. This would effectively stop any (simple) script from raising the page view count. Furthermore it would probably be a good idea to add a delay to the display of actual view count (basically keeping two counts and a datetime field for when the "display" count was last updated with the "actual" count, something I believe is done on the SE sites).
This is not a perfect solution, so I would be happy to hear your suggestions and/or comments.
Don't prevent: monitor and handle.
I would use a very different approach. Let the page views stay the same, but have reporting in place to looks for view-gaming. If a page gets gamed, you can find out who is responsible, give them a warning and a page-view penalty. If it continues, ban them.
I think that you should consider the reported characteristics of the browser as well. Browser fingerprinting has been done before and is well publicized. You can then figure out some pretty advanced heuristics on determining whether the same user is trying to game you. But don't publicize that you're using browser fingerprinting of course. Also, it won't stop incognito mode, but I'm just trying to give you one more avenue of thought to follow, in addition to your current IP oriented strategies.
I wanted to open up the topic to discuss ways to encourage or incentivize users to fill in information in a user profile on a website, such as skills, location, organization, etc. More information in a user profile can give a website an improved capability for its users to search, network, and collaborate.
Without bugging users to fill in their profiles (ie - via annoying e-mail reminders), what other ways have you come up with to encourage user input?
I have noticed that a simple graphic image (showing percentage complete..some thing like a battery icon on the cell) next to the username ( to the user) with a hover text (your profile is x% complete - click here) works.
I find the Stack Overflow concept of badges or some other kind of reward hook very useful for this kind of thing. You could of course limit access to features also based on information in the profile.
Make filling in this information a benefit for the users. For example, "if you fill in your location, we can filter search results based on that information."
It's all about making the user get perceived benefit from doing an action.
Linking to a privacy policy that is devoid of legalese and doesn't cause the user to navigate away from the forms to fill out their profile usually helps. Additionally, marking any field that will be public with "Viewable to everyone" in addition to marking the rest with "Private" will also help. Whenever possible, make the private fields optional.
E.g for every field, let them expand a container that explains how the data in that field will be used, in plain language.
A quick search will turn up a ton of controversy surrounding Facebook, Google and more regarding privacy. Make sure the form adequately puts out fear fires.
Additionally, limit the number of questions, make sure the tab key works as expected, etc, etc.. but that's all general usability.
Exposing the benefit, in some form of feedback is a really good way to go - show your users that they have gotten something out of it.
Trophies, or some sort of social effect ("45 users have filled in their profile, will you?") are good ideas.
Another option is to show the user a "percentage completed" bar of their profile (like LinkedIn does, called "Profile Completeness"). Many people will feel the need to get that bar up to 100%.
I am developing an issue tracking application in Django, mostly for a learning exercise but also for my own projects - and I am looking into using some AJAX for "enhanced" usability. For example, allowing users to "star" particular issues, which would add them to their watch list. This is implemented in a lot of sites, and is often AJAX - as the URL that the user is viewing doesn't need to change when they click the star.
Now, I am wondering what kind of response to return from my star_unstar view - that detects whether the request is being made via AJAX or not.
At present, if the request is an AJAX request, it returns just the section of HTML that is needed for the star, so I can replace the HTML in the star's parent DIV, so as the star appears "on" or "off", depending on the user's action.
However, I would much rather return some kind of JSON object, as it just seems more "proper", I think. The problem with this method is that the javascript would have to modify the star image's src attribute, the href on it, and the link title also, which seems a lot of work for such a simple feature. I am also looking into in-line commenting in the future, but I want to get a feel for how things "should" be done before I start coding lots of JS.
What is the general consensus when implementing features such as this, not just with Django, but all frameworks that operate in a similar way?
When I work with Ajax my main concern is usually to limit the amount of data I have to send. Ajax applications of this type should be very responsive (invisible if possible).
In the case of toggling a star, I would create the actual on/off states as CSS classes, StarOn and StarOff. The client will download both the off and on star when they first visit the page, which is acceptable considering that the star is a small image. When you want to change the star appearance in the future, you'll only be editing CSS, and won't have to touch the javascript at all.
As for the Ajax, I'd send back and forth one thing -- a JSON variable true/false that says whether or not the request was successful. As soon as the user clicks on the star, I'd change it to the StarOn state and send out the request. 99% of the time Ajax will return true and the user will not even realize that there was some sort of delay in the web request. In the rare case where you get a false back, you'll have to revert the star to StarOff and display an error message to the user.
I don't think your question relates particularly to Django or Python, as you point out at the end.
There's a lot of personal preference in whether you return a blob of HTML to write into the DOM or some serialized data as JSON. There are some practical factors you might want to take into account though.
Advantages of HTML:
- Easy and fast to write straight into the page.
Advantages of JSON:
- Not coupled to the front-end of your application. If you need that functionality anywhere else in the application, it is there ready to go.
My call on it. It's only a relatively trivial amount of HTML to update, and I'd probably go for returning JSON in this case and giving myself the extra flexibility that might be useful down the road.