A/B Test a Page Step in a Single Page without a new URL - extjs4.2

I am trying to figure out how to run an A/B Test for a change on a Page Step for a Single Page. The idea is we have a payment flow with several page steps each containing a form. We'd like to swap out forms and test how our users react. We are trying to avoid changing the URL.
I looked into tools such as Google Analytics, but that requires a different URL to run the A/B test. The hesitation about creating a new URL is because our users are known to bookmark them, and we don't want to keep a backlog of redirects from invalid URLs, also we'd like to avoid constantly deploying new URLs for our tests.
I cannot seem to find any tool to do this, so I've tried to think of a few solutions but I'm not having a lot of luck.
My best idea is to build both a and b forms into the page, and when a user accesses the flow, the session randomly(based on a preset%) stores a value that dictates whether the user is in test a or b. Then when they step into that form, the server will serve the proper form to them. If they abandon their session, we'd track that, and if they complete the action, we'd track that.
I feel like there should be a better solution, but I just cannot come up with one.
My results online were either blogs showing how to approach it from a high level, and all of them used different URLs, I have found almost no developer resources.
Thanks.
We're using ExtJS 4.2.2, and .NET as our server.

Whenever you need the server to be involved, you need server-side instrumentation. No free tools offer that, but you could consider Optimizely "full-stack" (has support for C#) or Variant (does not yet).

Related

How to create a form with an url input that redirects to pagespeed score / insights or displays it with ajax

Is it possible to do this? Ideally to return the report in the very same page with ajax?
Example the user adds www.mywebsite.com to the field and then the report of pagespeed is returned. If not possible then redirect to Pagespeed result page.
You have a few options here. Starting from easiest to hardest (and in my opinion "worst" to "best" solution).
Add the Page Speed Insights (PSI) test page to an iframe on your site. You can then change the URL of that iframe to https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com and manipulate the ?url=yourwebsite.com to be whatever you want.
This may be against Google's terms of service and is also a bad user experience but it is the easiest way to achieve it. I will leave you to investigate that option if you decide to do it.
Redirect users to a new tab. So just do <a target="_blank" href="https://developers.google.com/speed/pagespeed/insights/?url=yourwebsite.com">view your report</a> or redirect via JS on a button click.
Yet again not a great option as people are leaving your site but at least this won't be against Google's terms of service.
Use the page speed insights API. https://developers.google.com/speed/docs/insights/v5/get-started.
This is your best option in terms of time vs flexibility. You supply the API with the URL and it returns a JSON response with all of the metrics it gathers and the scoring.
Please note PSI is on version 6 of the API which should be available for general use soon.
Obviously this is a lot more work but well worth the effort as you can style everything as you please.
Install Lighthouse, the engine that drives PSI on your own server.
You can find the Lighthouse repository here. Please note you need to know how to use node, it is useful to understand puppeteer and you need a reasonable amount of server admin knowledge to get chromium (used as a headless web browser for running the tests) working and linked correctly.
At this stage you have complete control and can write your own test, scoring criteria etc. You can also run as many tests as your server will allow. If you want this level of control and freedom then this is the best option. However be prepared to sink a lot of hours into this solution!

Can I use protractor not only for testing but for filling a form automatically, if not what can I do?

A friend of mine has to fill online forms every day, and she wonders if there is a way to make this things automatically because she has all the data in a separate file. I showed her protractor, so she asked me if it is possible to use protractor for filling these forms. I think that one is able to use protractor when owns the project, but I don't really know if it is possible to use it when not. If it is not possible to do it, what can I do. I mean what she can do.
In some cases you could, but mostly no. Protractor only appears to work with websites built using AngularJS, however the website does not need to be served locally. The example on the Protractor homepage performs a test on the public/offical AngularJS website:
browser.get('http://www.angularjs.org');
From your own home computer, you can run automated Protractor/Jasmine tests (or other such things) on public websites built with AngularJS. However, you won't be able to perform a Google Search with this method for example, since http://www.google.com does not use Angular.
For more versatile browser automation, you could look at Greasemonkey for Firefox, or Tampermonkey for Chrome. These allow you to write JavaScript which will run in your browser, on top of a particular website, to modify that website's appearance or behaviour.
One other possibility is to write some kind of full automation script, using Python or BASH/curl. Deconstruct the web forms, treat the website effectively like an API, and use HTTP POST to submit form content. However, this would only be effective if your friend uses a select few web forms since it would need to be heavily custom-designed for each form. Also, it would not allow her to manually interact with the website or enter any values. That said, it is probably the most universal and commonly used method of achieving the automation you speak of. Additionally, the website(s) your friend uses might even publish some kind of official documented API, which would make this process far easier.

Handling Browser Refresh in GWT

I am new ta GWT and I would like to know if there is a way to handler browser refresh. What happens now is that each time a user refreshes the page, or click F5, the application returns the user to the login page. what I want is to have the user stay at the same page when the page is refreshed. An example would be perfect.
Thanks a lot in advance!
Take a look at the Activities and Places design pattern for GWT.
It is a highly recommended approach that can handle page refreshes as well as back and forward buttons, and allows users to bookmark "pages" within your app.
Along with looking at activities and places which is a very useful way of handling navigation in an ajax application you will also need to handle the session from the server. You would have a call to do authentication either through a realm or some kind of homegrown authentication. I recommend Apache Shiro if you are just getting started. When you application loads from a refresh you need to make a call to the server to validate that the session you have is still valid and if so, you would send the user to the correct Place/Activity. The Activity/Places is a little bit more boiler plate but it is worth it in the long run and makes the application much more flexible. You may also want to checkout Arcbees GWTP plugin. This will handle most of the boilerplate for you but beware it can be a little complex to a newby. It uses Gin for dependecy injection and has some custom place mapping things that are a little different. But overall the documentation is very good and the gwtp eclipse plugin can save you some copying and pasting for some things.
You should look at the GWTP car store example. They did what you are looking for. https://github.com/ArcBees/GWTP/tree/master/gwtp-carstore
I would recommend you to consider History Tokens in your development to handle adhoc F5 refresh problems. Please have a look at http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsHistory.html. While changing from one screen/layout to other, History Tokens help your browser keep track of the changes, because History Tokens change the URL itself. Examples can be found in the shared link.

Can You Hack a Websites Server?

I had an idea about website vulnerabilities, and I would like to know if it is possible. Also some suggestions on how to fix them.
If some part of my website writes data to the DOM and then calls the data back from it, would it be possible for someone to “hack” the server by editing the DOM in the browser?
For example, suppose I have some radio buttons. Each button has its own logic associated with it. If I remove one of the buttons, but fail to remove or comment out the logic, could someone go in and edit the DOM name of one of the buttons to the removed one, and upon submission have the server execute the logic associated with the removed radio button?
I understand how to fix that situation, by removing or commenting out the removed button’s logic, but I fear my site relies too heavily on such things that could be manipulated via the DOM. Hence, I’m wondering:
Is such a thing possible?
Is some complex validation method the only way to prevent “hacks” of this nature?
The answer to your question is yes. For example in many browsers you can open a javascript console and change not only the DOM but also the javascript on the site.
There is no guarantee that the code you write for a webpage will be run as you code it. Any user can change their copy. What they should not be able to do is change other people's copy. When they do this is called a cross site scripting (XSS) attack. (Typically done by adding script to a field which is saved in a database server and then served to another user.)
To protect your site you need to ensure that all web service calls are secure -- that is a user can't call them with malicious data and cause problems.
You also need to block against SQL injection attacks.
There is NO way to protect against a user changing the web page on their machine and having it do something you did not intend, so all validation needs to occur both in the browser and on the server.
As an example of how easy it is to change the local browser behavior, consider the browser extension. A browser extension is a pre-coded way to change the way web pages act locally.
(Think about ad-blockers as a specific example.)

Symfony design question - how can I share forms between apps?

I'm developing a site in Symfony, and I'm not sure what the best way is to handle this scenario.
I'm creating a party bookings system. Anyone can go to my frontend app and submit a new booking. Once they're finished, they'll just get a confirmation screen, they can't edit it. Easy.
Only certain users will be able to get to the admin app (it might be secured simply by being on an intranet, but that's not important, just assume it will be only accessible by admin users). They'll be able to view the list of submitted bookings. Easy.
My problem is around code re-use when allowing admin users to edit existing bookings. When you do generate-module in Symfony, the generated module (which as a newbie I'm assuming is a good example of structuring things) creates the form as a partial. I've had to customize this form a lot for my usage (lots of Javascript, etc), so of course I want to re-use this code, to be able to load an existing booking into this form. But there doesn't seem to be a way to share this partial between the apps (I've seen people mention making a plugin...but this seems complicated for this use).
I considered using an IFrame to load the form from the frontend and just passing an "id" parameter to load it in edit mode, but this would mean that the edit mode is not secure - anyone could go to the form on the frontend and pass this parameter to edit a booking.
I also considered putting all of the form display code (HTML, Javascript, etc) in a method on the form object, but this doesn't seem very MVC - all of the display code is then in the form. But this is only because I'm thinking of the form in the same way as a model - is that right?
I feel like this should be a common situation. You can share models and forms between apps, why can't you share this common form display code too?
Thanks!
You should reconsider having 2 applications in the first place. Not only you run into the code reuse problem, but also i18n, testings and other issues. I find it much easier to have 1 application with different bunch of modules for frontend and backend users. You can configure security per module. You can have one sign in form for all users and redirect them to appropriate module based on their credentials.
You can reuse partials between modules inside the same application, but you seem to be talking about two different applications (frontend and backend) so as far as i know the only way is to copy & paste the partial from one application to the other...