Blog posts by Tuan Doan2018-10-30T09:27:05.0000000Zhttps://world.optimizely.com/blogs/Tuan-Doan/Optimizely WorldWhat news in the JavaScript API for the Episerver Perform 2.1.0 (Episerver Commerce 12.9.1)<p>As you all know, the release of Episerver.Commerce 12.9.1 was included a major change in JavaScript API for Episerver Perform version 2.1.0 (<a href="/link/76974ad8d2a84c1b989ad0ac453ab663.aspx?versionFilter=12.9.1&packageFilter=EPiServer.Commerce">link to release notes</a>)</p>
<p>In this post, I will show you what are changes and how to update the existed code.</p>
<h3>Don't need TrackingMode app setting</h3>
<p>In Episerver.Commerce 12.9.1, there is no longer exist TrackingMode in the appsetting. Since now, we can use both server to server API and javascript API in parallel. </p>
<p>To use server to server API, we need to add CommerceTracking attribute to the action of controller. Or call to tracking method in the IRecommendationService.</p>
<p>With javascript API, we are no longer had to call tracking from the server side. Just load epiRecommendation javascript class, create a tracking data object then send it to the server via proxy endpoint.</p>
<pre class="language-csharp"><code>// In Layout.cshtml
<head>
@Html.LoadTrackingAPI()
</head>
<body>
@Html.Partial("_RecommendationsTemplates")
@RenderSection("Tracking", false)
</body></code></pre>
<pre class="language-csharp"><code>// In home page index
@section Tracking{
<script>
$(document).ready(function () {
var homeTrackingData = TrackingDataFactory.createHomeTrackingData();
epiRecommendations.track(homeTrackingData, null, Recommendations.render, {
sectionMappings: [{
area: "homeWidget", selector: ".recommendations-right", numberOfItemsToRender: 6
}]
})
});
</script>
}</code></pre>
<h3>Collecting data from the client</h3>
<p>As before, to use JavaScript tracking API, we need to set TrackingMode is <strong>ClientMode</strong> and call to Tracking Service in the controller. The purpose is that to collect the tracking data and set it to http context. Then it returns that data to the client later.</p>
<p>But now, there are no need to edit the controller. It means no need to build web application. Just create the tracking data directly from the View by using <strong>TrackingDataFactory</strong> javascript class.</p>
<pre class="language-javascript"><code><script>
$(document).ready(function () {
var refCode = '@Model.Product.Code';
var productName = '@Model.Product.Name';
var productTrackingData = TrackingDataFactory.createProductTrackingData(refCode, productName);
}
</script></code></pre>
<p>With product tracking type, it supports the recommendation id for click tracking.</p>
<pre class="language-javascript"><code>var recommendationId = parseInt(isNaN('@Request.QueryString["recommendationId"]') ? '0' : '@Request.QueryString["recommendationId"]');
if (recommendationId > 0) {
productTrackingData["recommendationId"] = recommendationId;
}</code></pre>
<p>We also setting to exclude recommendations, just tracking only.</p>
<pre class="language-javascript"><code>productTrackingData["SkipRecommendations"] = true;</code></pre>
<p>The tracking data can be set the custom attributes, it supported types like datetime, double, long, decimal, int, bool and string.</p>
<pre class="language-javascript"><code>productTrackingData["customAttributes"] = { 'marketId': Market.getSelectedMarketId() };</code></pre>
<h3>Not calling directly to Personalization Service's end point from the client</h3>
<p>Recently, the flows of JS tracking API works like this.</p>
<ol>
<li>Waiting the server side collecting data and rendering to the client side.</li>
<li>When the page rendered in client side, the data will send directly to Personalization Service endpoint.</li>
<li>Waiting response from Personalization Service and render in client with template.</li>
</ol>
<p>The problem that if the data from server side was cached, then the JS tracking API will send the same data, include the client configuration will be cached.<br />The second problem is because JS tracking API will send directly to one endpoint. So it means not all of implemented Personalization Service will be used.</p>
<p>But now, instead of call to the end point of tracking service directly, we call to JS tracking API from the View. It will send a post request to web API with url '<strong>/episerverapi/commercetracking/track</strong>' and the tracking data collected in the client.<br /><br /></p>
<p><img src="/link/b0e185c7708e4c14b587813e675aaee3.aspx" width="640" height="451" /></p>
<h3></h3>
<h3>Handling the response from Personalization Service</h3>
<p>The web API (proxy) works like server to server API. It handles the request from client and send the tracking data to the <strong>ITrackingService</strong>. The response from Personalization Service will be de-serialize to the server model whereas it hasn't data for price or image information. That information from Services is either real-time or latest update, so it may not usable. <br />Like server to server, we need to <span style="font-weight: 400;">intercept </span>that response data by using <strong>ITrackingResponseDataInterceptor.Intercept(TrackingResponseData)</strong><br /><br /></p>
<p><img src="/link/503df5794f314ffebcee6a0366d6f863.aspx" width="640" /></p>
<p>One last step, we won't forget update the recommendation template for the response. As before, it uses mustache template but the property has changes. By default, there are no longer exist functions that filter markets and currencies for display prices. If you have any custom response data, make sure to present it in this template <strong>_RecommendationsTemplates.cshtml</strong>.<br /><br /></p>
<pre class="language-javascript"><code><script id="epiRecommendationListTemplate" type="x-tmpl-mustache">
{{#recs}}<div class="jsProductTile product-row__tile" data-recommendation-id="{{id}}">{{> epiRecommendationItemTemplate}}</div>{{/recs}}
</script>
<script id="epiRecommendationItemTemplate" type="x-tmpl-mustache">
{{#hasDiscount}}<div class="product has-discount">{{/hasDiscount}}
{{^hasDiscount}}<div class="product">{{/hasDiscount}}
<a href="{{#attributes}}{{url}}{{/attributes}}&recommendationId={{id}}" class="link--black">
<div class="view-details"></div>
<img src="{{#attributes}}{{img}}{{/attributes}}" alt="{{refCode}}" class="img-responsive" />
<h3 class="product-title">{{#attributes}}{{title}}{{/attributes}}</h3>
<div>
{{#hasDiscount}}
<h4 class="product-price">{{#attributes}}{{unitPrice}}{{/attributes}}</h4>
<h4 class="product-price product-price--discount">{{#attributes}}{{salePrice}}{{/attributes}}</h4>
{{/hasDiscount}}
{{^hasDiscount}}
<h4 class="product-price">{{#attributes}}{{salePrice}}{{/attributes}}</h4>
{{/hasDiscount}}
</div>
</a>
</div>
<div class="quick-view-btn-container">
<button type="button" data-toggle="modal" data-target="#ModalDialog"
data-url="{{#attributes}}{{url}}{{/attributes}}&recommendationId={{id}}"
class="btn btn-block btn-sm quickview-button">@Html.Translate("/Product/Quickview")</button>
</div>
</script></code></pre>
<p>Conclusion, with the new structure of JavaScript tracking API, the tracking in the Commerce site is now much easier to implement and flexible with both server to server API and javascript API with the same result.</p>2018-10-30T09:27:05.0000000ZBlog postFiltering on Campaign View<p>Commerce release 10.4.0 (available as of 5 March, 2017) introduces a feature that lets you filter the information on the Marketing Campaign List view.</p>
<p>Prior to this change, the Campaign List showed all campaigns. Under each was a list of its discounts. While this display worked initially, as people began to use the marketing features more extensively, the number of campaigns and discounts quickly grew. So, it became difficult and time consuming to locate a particular item.</p>
<h2>How it works</h2>
<p>Now, a set of filters (also known as facets) appears in the left pane. If you select a campaign Status, Discount Type, or Market, it becomes bold, and the view is refreshed, showing only campaigns and discounts that include the selected items.</p>
<p><img style="border: 1px solid black;" alt="campaign view" src="/link/597c86e639cb4a789286d7ca844f230a.aspx" height="432" width="731" /></p>
<p>You can choose a single status but multiple discounts or markets.</p>
<ul>
<li>You can choose only one Campaign Status. If you choose a second status, the current one is deselected. <br />There is always one selected option. By default, <strong>All</strong> is selected.</li>
<li>The other filters (Discount Types and Markets) are multiple selection, so you can choose several options by clicking (no need for combination keys). </li>
<li>To reset the search criteria at any time, click <strong>Clear</strong>.</li>
</ul>
<p>For example, you want to see only <strong>Order Type</strong> discounts in <strong>All</strong> campaign statuses.</p>
<p><img style="border: 1px solid black;" alt="" src="/link/7e0fe85cffb44615a215facf2984c1f6.aspx" height="389" width="603" /></p>
<p>As another example, you only want to see <strong>Expired</strong> campaigns.</p>
<p><img style="border: 1px solid black;" alt="expired campaigns" src="/link/127eee1d1b0449898da83af16047e64c.aspx" height="405" width="592" /></p>
<h3>The Market Facet</h3>
<p>The market facet displays three markets by default. If your site supports more than three, use the <strong>Show More </strong>button display all market options.</p>
<p><img style="border: 1px solid black;" title="Show more" alt="Show more" src="/link/8fe9460b38284410b83c4cd991afadca.aspx" height="432" width="731" /></p>
<p>Next, the <strong>Show More</strong> button changes to a <strong>Show Less</strong> button. Use it to minimize the market facet list.</p>
<p><img style="border: 1px solid black;" alt="show less" src="/link/d1e7f09546c24781aabbf03bde435be6.aspx" height="361" width="207" /></p>
<p>We are pleased to provide this functionality, which makes it a whole lot easier to sort through campaigns and discounts.</p>
<h2>How to customize facets on Campaign View</h2>
<p>Refer to the document <a href="/link/90cf7447afe7461b8d03f5fe6b10958b.aspx">Customizing facets in Campaign view</a><span>.</span></p>2017-03-10T15:22:23.4870000ZBlog post