FakeMaker is updated with Episerver 9 support

Hi Episerver developers!

I have updated FakeMaker (helping you unit test your Episerver code) to support the version 9 binaries. Breaking changes caused compile errors (oops!) and made the tool incompatible with the latest versions of Episerver. It turns out that the base library context no longer has to be mocked, and that's a good thing! The solution was simple: delete code. I love deleting code, maybe even more than writing code.

FakeMaker may help you delete your code.

When writing unit tests, creating fake content and mocked repositories can be a bit depressing. When mocked code is all you see on your screen, this little library may help. A bigger screen probably also would, but is probably more expensive (and won't cure depression).

The latest version is available for download on NuGet, and the source code is on GitHub. Both are targeting version 9.6.1 of the Episerver Core libraries.

If you need Episerver 8 support, download an earlier version from NuGet, or clone the GitHub repo and checkout the epi-8-support branch. 

Please let me know if you have feature requests or run into any issues.


Here's an example of what you can do with FakeMaker: 
you are about to write code that uses the episerver page tree to find pages of a certain type, children of a root node, or maybe just the start page. FakeMaker makes easier to write unit tests for code like that, by creating an in memory page tree and add it to a fake content repository.

Create the pages you need:
var page = FakePage.Create("MyPageName");

or a page of a specific page type:
var myCustomPage = FakePage.Create<CustomPageData>("MyOtherPageName");

Create an instance of FakeMaker:
var fake = new FakeMaker();

Add it to the mocked repository:
fake.AddToRepository(page);

Want more examples?
You will find more examples at the FakeMaker GitHub repo.

EPiServer and programmer friendly analytics with _tics.js

Writing web analytics client side code should be really simple, and programmer friendly. If simple and programmer friendly, teams will have control over the production code they are maintaining, knowing what it actually does. To support that, I wrote a little JavaScript helper library called _tics.js a while ago.

The main features of _tics.js are (besides basic page tracking) advanced event tracking of form fields, buttons and links, including grabbing field values, value changes and the position of clicked links in a banner list or a menu.

What is _tics.js and why should I use it? Read about the features here.

I recently tried out some of the features of EPiServer 8 and came across the new Google Universal Analytics support. My first thought was: Can I use it with the features of _tics.js?

Yes, and here's how.

EPiServer Google Universal Analytics and _tics.js

All you have to do is provide _tics.js with a Tracking Id and the Tracking domain. With the new Google Universal support of EPiServer 8 (installed via the EPiServer NuGet feed), the values are added by an editor in the EPiServer CMS admin view. I have experimented and found a way to grab those values, and it can be done by using the Accessors class in the GoogleAnalytics.Services namespace.

var settings = EPiServer.GoogleAnalytics.Services.Accessors.GetTrackerSettings();

You can now provide the data to the client. 

Here's an example. I have used the Alloy MVC template (and perhaps written the C# model code a bit sloppy, but I leave the clean code implementation to you).

Grabbing the analytics values and storing them in the View Model.

Storing the analytics values in html hidden fields. Initializing _tics.js with data.

With the _tics.events() function, changes in individual form fields will be tracked and will make it possible to analyze user behavior.

In this example, the standard _tics.page() function is not used (i.e. basic page tracking), because it is already being done by the generated analytics code from the EPiServer Google Analytics Nuget package.

Note: Client side code from EPiServer add-ons is rendered by using the Html helper method RequiredClientResources, already used in the Alloy template:
@Html.RequiredClientResources("Header"); 

More features?

What about advanced tracking of form fields, like grabbing the actual values and/or the changes in individual fields? The _tics.js library expect form fields to have data attributes (read more about it here). But when using EPiServer XForms, all an editor can add is custom CSS and none of those fancy data attributes. Oh no!

Relax. I have written a little JavaScript "add-on", called _tics.cms.js, that solves this for you.

You will find it in the _tics.js GitHub repository (look in the folder called "add-ons"). Include it in your code and run the function _tics.cms.prepareForm().

Add the script and run _tics.cms.prepareForm() before initializing the library.

It checks for CSS class names and adds the corresponding data attributes to the element.

An example: this is what the editor writes in the CSS field if wanting to grab the value of an individual field (using the "getValue" built in function in the library). Please note that it is case sensitive: analyze-custom-getValue

And that's it.

Simple? Programmer friendly? What do you think about it? Please share your feedback!

Programmer friendly web analytics with _tics.js

_tics.js a simple JavaScript helper library for writing web analytics client side code. It supports basic page tracking and also event tracking for form fields, buttons and links.

_tics.js is intended to give you a head start with web analytics and it supports the Google Universal Analytics JavaScript library out of the box. Included is a Google Analytics provider, written as a separate module. It can easily be replaced by a custom provider consuming your favorite web analytics tool. 

The source code is on GitHub.

Usage

Basic - The "it just works" scenario
Activate _tics.js by calling the page() function. Run the events() function if you want to track form fields.

Basic live example here (jsFiddle)


More features - The "couldn't you just do this?" scenario
The library includes three specialized functions. The functions are activated when elements are decorated with the attribute data-val-analyze-custom. The included functions are:
get the value of a field (getValue)
get the relative change within a field (getRelativeChange)
get the position of a clicked link in a list of banners or in a menu (getItemInSection, combined with the attributes data-section and data-item)

More features live example here (jsFiddle)


Customization -The "extra special for you" scenario
The getValue, getRelativeChange and getItemInSection functions are included in _tics.js. But you can also add your custom function by appending them to the library. Use your favorite library for traversing the DOM if you like.

If you want to override or hijack one of the existing functions, just call the add function and use the same name as one of the built in functions. You can also add any event that is not covered by the built in features.

Customization live example here (jsFiddle)


The source code is on GitHub. Let me know what you think about it!