NewHaven Software Wiki - User contributions [en]

ECMS A/B Split Testing

2013-03-27T15:19:15Z

Mboyanton:

If you want to do split testing in eCMS using [https://www.google.com/webmasters/tools/home?hl=en|Google Webmaster Tools] one of the cleanest ways to do it is with a promo or customer group code set via a [[ECMS URL Parameters|URL parameter]]. '''(To use a promo code you must first set one up in a customer group rule [[Promo_Codes|as described here].)''' The advantage of using this method is that it does not mess up any forms redirection and keeps the URLs the same, sans the snippet at the beginning setting the promo/customer group.

An example of the two URLs for use in [https://www.google.com/webmasters/tools/home?hl=en|Google Webmaster Tools] would be something similar to the two below:
<pre>
http://www.example.com/checkout_shipping/?p=pageb
and
http://www.example.com/checkout_shipping
</pre>
Then in if you wanted to test variations in the the checkout_shipping template just do a simple test:
<pre>
{if $promo.code == 'pageb'}
Do this.....
{else}
Do something else.....
{/if}
</pre>
You will also need to add a test condition to the _meta.tpl, something like this:
<pre>
{if $view == 'checkout_thanks'}
{literal}

....code for confirmation page.....

{/literal}
--~~~~
{/if}

{if $view == 'checkout_shipping' && $promo.code == 'pageb'}
{literal}

.....Code for Page B......

{/literal}

{elseif $view == 'checkout_shipping'}

{literal}

....Code for default page.....

{/literal}
{/if}
</pre>
I tested this in Website Optimizer and it works. Two things to note:

* If you try to manually navigate to a checkout page you will be redirected to viewcart or the index page so you will have to manually upload the HTML for the pages for Google's validation service to work. Pretty trivial process and you would likely have to do this with any cart.

* If you set the promo code via the URL you may have this overwritten by a customer using a promo code. This could potentially skew your statistics a bit. There may be a way to compensate for this with proper setup in GWO. The other option is the use the customer group via URL feature. Similar to promo codes, ?c=CUSTGROUP.

== Newer Method (03/27/2013) ==
You can use any generic URL parameter provided it's not already in use and then simply set a session var for the parameter. Then you can test against that var in your code by using <code>{$smarty.session.var_name}</code>.

This would be in your _top.tpl template:
<code><pre>
{if $smarty.get.ver}
{php}
$_SESSION['version'] = $_GET['ver'];
{/php}
{/if}

<body class="{$smarty.session.version}">
</pre></code>

And this could be used in your CSS:

<code><pre>
//Normal pages
.wrapper div.version-b {
display:none;
}

//To display the first div under the element .wrapper (just an example).
.version-b .wrapper > div {
display:none;
}
.version-b .wrapper > div.version-b {
display:block;
}
</pre></code>

Or a template:

<code><pre>
{if $smarty.session.version === 'version-b'}
...do something
{else}
...do something else
{/if}
</pre></code>
--[[User:Mboyanton|Malcolm Boyanton]] 15:19, 27 March 2013 (UTC)

2013-02-18T16:35:41Z

Mboyanton: /* Introduction */

2013-02-12T17:59:14Z

Mboyanton:

2012-03-02T16:50:51Z

Mboyanton:

The graphic below illustrates some of the principles to keep in mind when creating customer facing forms on your site. If you are using eCMS you can use CSS to style any of your forms.

Frameworks:

* http://formee.org/demo/index.htm - An easy to use and small framework just for forms.

* http://blueprintcss.org/ - A larger framework that does a lot to equalize typography, layout, and forms. You can use the whole framework or parts. Example page at http://blueprintcss.org/tests/parts/forms.html

* http://formalize.me/ - Small CSS and JavaScript library that aims to normalize forms across all browsers. Uses JavaScript to add support for older browsers that do not support HTML5.

* http://sprawsm.com/uni-form/

* http://twitter.github.com/bootstrap/ This is a large framework built by Twitter. Be warned that it's "for nerds, by nerds".

Validation:

* http://docs.jquery.com/Plugins/Validation

Buttons:

* http://www.cssbuttongenerator.com/ Great cross-browser CSS based button generator. An easy and quick way to style all of your submit buttons.

[[Image:Form-Design-Crib-Sheet-NewHaven.png]]

Form Design Cribsheet

2012-03-02T16:45:16Z

Mboyanton:

Form Design Cribsheet

2012-03-01T15:20:10Z

Mboyanton: Created page with 'The graphic below illustrates some of the principles to keep in mind when creating forms. Image:Form-Design-Crib-Sheet-NewHaven.png'

The graphic below illustrates some of the principles to keep in mind when creating forms.

[[Image:Form-Design-Crib-Sheet-NewHaven.png]]

Web Resources

2012-03-01T15:19:19Z

Mboyanton:

This is a list of some of the resources we have found useful for web design, development, and troubleshooting. If you have a suggestion that we have not considered, please email us at [mailto:ecms@newhavensoftware.com ecms@newhavensoftware.com]

----

* [http://www.w3.org/ W3C] is the organization responsible for deciding web standards. This is the definitive source for HTML, CSS, XML, etc. A little technical and dry.
* [http://www.d.umn.edu/itss/support/Training/Online/webdesign/php.html Web Design REFERENCES - PHP] A massive collection of PHP links, tutorials, and documentation.
* [http://www.d.umn.edu/itss/support/Training/Online/webdesign/javascript.html Web Design REFERENCES - JavaScript] A massive collection of JavaScript links, tutorials, and documentation.
* [http://www.d.umn.edu/itss/support/Training/Online/webdesign/css.html Web Design REFERENCES - CSS] A massive collection of CSS (Cascading Style Sheets) links, tutorials, and documentation.
* [http://www.ibm.com/developerworks/web/tutorials/wa-html5/ Create modern Web sites using HTML5 and CSS3] - Implementing the canvas and video elements in HTML5
* [http://net.tutsplus.com/ Net Tuts +] - Large selection of tutorials.
* [http://net.tutsplus.com/ Dive into HTML5] - Great overview of HTML5 and and introduction to the usage of some of the new features.
* [[Form Design Cribsheet]] - Great infographic on creating a great customer experience with forms