The rising demand for getting a Minimal Viable Product (MVP) to the market as quickly as possible has highlighted the criticality of Validated Learning within the Software Development Lifecycle (SDLC.) Validated Learning is an important step to take after you implement your vision because it allows you to test your product or feature to determine whether it is useful. To test, we use a principle called the Build-Measure-Learn. In Eric Ries’ 2012 book “The Lean Startup,” he describes the Build-Measure-Learn principle as a feedback loop which enables you to act on the metrics (feedback) you’ve gathered and decide if your vision is valid or if you should change it up a bit, or “pivot” as Eric puts it. Throughout the remainder of this blog post, we’re going to apply 2 of the 5 principles in Eric’s book: (1) Validated Learning and (2) Build-Measure-Learn. Let’s consider our first scenario.

Imagine you have a vision for a feature that includes 2 ways for your audience to consume some data: (1) A tabular view and (2) a very rich visual view in a map format. The tabular view will probably take the least amount of time, but the visual view can more than likely take much more time depending on the implementation. Your vision includes a button on the tabular view to switch to the map view, but the page does not reload to capture this event. This is the perfect usage of a GA Custom Event.

Google Analytics (GA) can be a powerful tool to achieve the metrics for proper Validated Learning. Typically, a marketing professional would include a small script on each page and simply track each page to determine the metrics. However, with more and more websites adopting a Single Page App (SPA) architecture, this becomes much trickier because of its asynchronous nature. There are many techniques that can use Google Tag Manager (GTM) to help with some of the inherent difficulties of page and event tracking in a SPA, but for this post we are going to focus on GA directly.

Office Meme Show me Code

Let’s Build Something!

var GoogleAnalyticsTest = GoogleAnalyticsTest || {};
GoogleAnalyticsTest = (function () {
    window.ga = window.ga || function () { (ga.q = ga.q || []).push(arguments) }; ga.l = +new Date;
    ga('create', '[your_ga_id_here]', 'auto');
    var PageView = function (page) {
        ga('set', 'page', '/' + page);
        ga('send', 'pageview');
    };
    var Event = function (event) {
        ga('send', {
            hitType: 'event',
            eventCategory: event.Category,
            eventAction: event.Action,
            eventLabel: event.Label
        });
    };
    return {
        PageView: PageView,
        Event: Event
    };
})();

Using the code example above you can attach a click event to capture these asynchronous events in your web application.

$("#Map01").on("click", function () {
    GoogleAnalyticsTest.Event({ 'Category': 'Maps', 'Action': 'show', 'Label': 'map 01' });
});

Once this is setup you can test your events in the GA Dashboard under the Real-Time > Events or Behavior > Events > Overview (Note: this will take up to 24 hours to view events).
A similar technique can be used to track page views on a SPA since you may have a menu that loads separate views entirely.

$("#Menu01").on("click", function () {
    GoogleAnalyticsTest.PageView('home');
});

Another challenge I faced was how to test all of this code locally while monitoring GA for these events. I use Visual Studio 2015 with IIS Express which simply uses localhost in your url bar with an appended port number. Since GA requires your tracked website to end in a top-level domain, you must do a few things to make this work. When setting up your property in GA, you can include any url you wish since you will configure your local system’s host file to accommodate it. I always configure something like “localhost.io” to get started. Once this is entered into your new Property and saved, its time to configure your local system. The steps I am going to use are for Windows 10, while using Visual Studio 2015 with IIS Express as noted above.

Locate your application.config file within the solution’s \.vs\config folder and edit it to include a new binding protocol that omits the url name and only includes your configured port number as follows:

<binding protocol="http" bindingInformation="*:[your_port]:">

Now locate your hosts file and edit:

127.0.0.1       localhost.io
127.0.0.1       www.localhost.io

Set the Start URL in your project file to:

http://localhost.io:[your_port]

If you have any trouble with configuring your local system, more information here.

An alternative to the steps above is to install the Google Analytics Debugger extension for Chrome. Once installed and turned on, you can view all GA events in the Developer Tool’s Console tab. You can download it here.

Google Analytics

here.

Let’s Measure and Learn!

This technique will enable your marketing team obtain Validated Learning using data from the GA dashboard on how your web application features are used, and where to focus your development effort going forward. Continue small efforts like this one, and you will be entering the Build-Measure-Learn feedback loop.

Meme about analytics

Additional Info and Sources:

SharePoint API showing code to user displayFor readers out there that don’t know much about SharePoint, let’s briefly go over the main aspects of what it is and what it intended for. Microsoft created a tool back in 2001 in an effort to offer a collaboration environment that organizations of all sizes could use to increase the efficiency of business processes. Essentially this was a centralized place to primarily serve as a document management and storage system for professional environments.

However, for years it was notoriously bashed since the application offered businesses little options to brand and construct the site to best suit their needs. An out of the box, what you see is what you get sort of product. But over the years the web based app improved along with the documentation and it is now highly configurable and can offer organizations fantastic possibilities when it comes to customizing and displaying content in a unique and brand conscious way. Not to mention a business can now have a user-friendly, CMS type intranet that loads content dynamically onto site pages.

This blog is tailored to show you a few of the possibilities on how to use jQuery AJAX with the SharePoint Rest API to display content from custom lists in the admin section on to an internal page.

How the REST Service Works

This post is assuming you have basic familiarity with REST and how to write requests within jQuery. SharePoint, 2013 specifically, adds the ability for you to remotely interact with SharePoint sites by using REST. Now, you can interact directly with SharePoint objects by using any technology that supports standard REST capabilities.

To access SharePoint resources using REST, construct a RESTful HTTP request, using the Open Data Protocol (OData) standard, which corresponds to the desired client object model API. A simple example of this request would be:

Client object model method: List.GetByTitle(listname)
REST endpoint: 

Client object model method

The client.svc web service within SharePoint handles the HTTP request, and serves the proper response in either Atom or JSON format. After than the client application must then parse that response.

Getting Specific with Your Requests

An awesome benefit to using HTTP requests, is that you can use these REST endpoints to perform classic CRUD operations against SharePoint entities, such as lists and sites. Below is a REST endpoint example on how to interact with the data and retrieve a specific list based off of its title:

REST endpoint example based off title

As you can see from the ending line, we are returning back the data in XML format. By appending the url with “/items” we can essentially retrieve all of the items within the list we targeted. Example:

REST endpoint example to retrieve all items within targeted list

Something to note is If the $select option isn’t used, all fields are returned except fields that would be resource-intensive for the server to return. If you need these fields, you need to use the $select option and specify them by name.

This basic idea also works for folders, files, and documents within your SharePoint site. You can even drill down further after getting the items in that list by targeting column names (i.e. Title, Employee, company in the example code below) within that list in addition to sorting the data you receive in alphabetical or date created order. There may be an instance when you only want to show the latest 5 items created in the list and using the $top option can help you achieve that. Let’s go over some of the helpful query options you have when using REST requests.

Select Items to Return

Append your url with the $select parameter to get only the specific desired columns/fields

REST request to select items to return

Filter Items

Append your url with the $filter parameter to retrieve only items that match a simple logical expression

REST request filtering
REST request for filtering

Paging Items

Append your url with the $top operator to limit the number of results to return

REST request paging

Expand Items

Append your url with the $expand operator to get back a corresponding value based on and Id

REST request expand

Order Items

Append your url with the $orderby parameter to sort the results from the list

REST request order

Conclusion

If you haven’t gathered by now, there are countless options to drill down into a specific list and display the filtered items you want all by using the correct syntax within your jQuery AJAX calls. The next step after writing the necessary code would be to link your script on either the master page or if you have numerous scripts that target many lists it is probably best to add the script tag that links to your file with a content editor web part on the desired page. Happy SharePointing!