Service Portal click reporting

[perlemmingwittu]

Hi there

We have a Service Portal running in Helsinki. I have customized "Icon Link" to open in a target and with width and height that can all be customized in options. So with this widget we can now open our chat (connect support) or our case handling systems in a _new window target.

There is no build-in way of sniffing these clicks, as far as I can see, so I'm contemplating on the DIY solution.

Is there any other way of doing this than to create a custom table and adding a record using GlideRecord? That way I can log a record with what I want and build a report on it. I hope...

I don't know if I can (or even should) write to the sp_log table, but it would be nice to have it all in one table.

Can anyone guide me in the right direction please?

[perlemmingwittu · Accepted solution]

I decided on creating a table to hold my inputs and I just thought I'd share it here.

Table name: u_sp_log_click

Columns: u_portal (to enable input from multiple portals), u_type (to enable other metrics), u_widget_title (to specify which widget was clicked/modified)

I have cloned the Icon Link and modified everything. I'll post it here, except the CSS where I just added a font.

Hope you can use it.

Description: Icon Link modified to enable the designer to choose target window for the link, enable popup and set height and width, and write a record to a table to enable reporting on how many icons are clicked and when. The report is just made on the new table directly.

HTML

<div>
       <!--// Top Icon -->
   <a ng-if="::(options.link_template == 'Top Icon' || !options.link_template)" ng-href="{{::data.href}}" class="top_icon {{::options.class_name}} myfont" target="{{::data.target}}">
               <div class="m-b fa fa-{{::options.glyph}} fa-4x {{::options.class_name}} text-{{::options.color}}"></div>
               <h3>{{::options.title}}</h3>
               <span class="text-muted myfont">{{::options.short_description}}</span>
       </a>


       <!--// Circle Icon -->
   <a ng-if="::(options.link_template == 'Circle Icon' && !options.popup_window)" ng-href="{{::data.href}}" ng-click="iconClick()" class="circle_icon {{::options.class_name}} text-{{::options.color}} myfont" target="{{::data.target}}">
               <span class="fa fa-stack fa-2x">
                       <i class="fa fa-circle fa-stack-2x"></i>
                       <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
               </span>
               <h3>{{::options.title}}</h3>
               <span class="text-muted myfont">{{::options.short_description}}</span>
       </a>


       <!--// Circle Icon - popup chosen -->
   <a href="javascript:void(0)" ng-if="::(options.link_template == 'Circle Icon' && options.popup_window)" ng-click="openPopup()" class="circle_icon {{::options.class_name}} text-{{::options.color}} myfont">
               <span class="fa fa-stack fa-2x">
                       <i class="fa fa-circle fa-stack-2x"></i>
                       <i class="fa fa-{{::options.glyph}} fa-stack-1x fa-inverse"></i>
               </span>
               <h3>{{::options.title}}</h3>
               <span class="text-muted myfont">{{::options.short_description}}</span>
       </a>


       <!--// Color Box -->
   <a ng-if="::(options.link_template == 'Color Box')" ng-href="{{::data.href}}" class="color_box {{::options.class_name}} icon-link-background-{{::options.color}} text-white" target="{{::data.target}}">
               <div class="fa fa-{{::options.glyph}} fa-3x {{::options.class_name}}"></div>
               <h3>{{::options.title}}</h3>
               <span>{{::options.short_description}}</span>
       </a>
</div>

Note the difference between the two Circle Icons for popup chosen or not (!options.popup_window)

CLIENT SCRIPT

function($scope) {
       /* widget controller */
       var c = this;

       $scope.iconClick = function () {
               $scope.data.clicked = 'iconclicked';
               $scope.server.update();
       }

       $scope.openPopup = function () {
               $scope.data.clicked = 'iconclicked';
               $scope.server.update();
               window.open($scope.data.href, 'My Portal', 'resizable=1,toolbar=0,menubar=0,width=' + $scope.data.popup_width + ',height=' + $scope.data.popup_height + '');
       };
}

SERVER SCRIPT

(function () {
       var gr = $sp.getInstanceRecord();
       data.href = $sp.getMenuHREF(gr);
       data.target = options.target || "_blank";
       data.popup_width = options.popup_width || "450";
       data.popup_height = options.popup_height || "800";

       if (input.clicked) {
               var newlog = new GlideRecord('u_sp_log_click');
               newlog.initialize();
               newlog.u_widget_title = options.title;
               newlog.u_type = "Widget clicked";
               newlog.u_portal = $sp.getPortalRecord().getValue("title");
               newlog.insert();
       }
})();

OPTIONS SCHEME