Add Google Analytics events for search pages and search selections (#7157)

Address #6803

Author: joelverhagen

src/NuGetGallery/Scripts/gallery/common.js

@@ -402,6 +402,12 @@
         });
     };
 
+    nuget.sendAnalyticsEvent = function (category, action, label, eventValue, options) {
+        if (window.nuget.isGaAvailable()) {
+            ga('send', 'event', category, action, label, eventValue, options);
+        }
+    }
+
     window.nuget = nuget;
 
     jQuery.extend(jQuery.expr[':'], {
@@ -445,12 +451,13 @@
             $(this).click(function (e) {
                 var href = $(this).attr('href');
                 var category = $(this).data().track;
+                var trackValue = $(this).data().trackValue;
                 if (window.nuget.isGaAvailable() && href && category) {
                     if (e.altKey || e.ctrlKey || e.metaKey) {
-                        ga('send', 'event', category, 'click', href);
+                        window.nuget.sendAnalyticsEvent(category, 'click', href, trackValue);
                     } else {
                         e.preventDefault();
-                        ga('send', 'event', category, 'click', href, {
+                        window.nuget.sendAnalyticsEvent(category, 'click', href, trackValue, {
                             'transport': 'beacon',
                             'hitCallback': window.nuget.createFunctionWithTimeout(function () {
                                 document.location = href;

src/NuGetGallery/Views/Shared/ListPackages.cshtml

@@ -61,9 +61,13 @@
     }
 
     <div class="list-packages" role="list">
+        @{ var itemIndex = Model.PageIndex * Model.PageSize; }
         @foreach (var package in Model.Items)
         {
-            @Html.Partial("_ListPackage", package)
+            // Only set an item index when there is a search query, for now.
+            var thisItemIndex = string.IsNullOrWhiteSpace(Model.SearchTerm) ? null : (int?) itemIndex;
+            @Html.Partial("_ListPackage", package, new ViewDataDictionary { { "itemIndex", thisItemIndex } })
+            itemIndex++;
         }
     </div>
 
@@ -76,6 +80,17 @@
 
 @section bottomScripts {
     <script type="text/javascript">
+
+        @if (!string.IsNullOrWhiteSpace(Model.SearchTerm) && (Model.PageIndex == 0 || Model.Items.Count() > 0))
+        {
+            var action = Model.IncludePrerelease ? "search-prerel" : "search-stable";
+            // Emit an event representing the search page and the page index. This make it easier for the search selection
+            // event to be correlated in Google Analytics.
+            <text>
+            window.nuget.sendAnalyticsEvent('search-page', '@action', @Html.Raw(Json.Encode(Model.SearchTerm)), @Model.PageIndex);
+            </text>
+        }
+
         $(function () {
             $("#include-prerelease").on('change', function () {
                 var parameters = {};
@@ -99,4 +114,4 @@
             })
         });
     </script>
-}
+}

src/NuGetGallery/Views/Shared/_ListPackage.cshtml

@@ -1,4 +1,16 @@
 @model ListPackageItemViewModel
+@{
+    // This view data will sometimes be null or missing. For example, the profile page uses this partial and should not
+    // emit search selection events.
+    int? itemIndex = null;
+    int parsedItemIndex;
+    if (ViewData.ContainsKey("itemIndex")
+        && int.TryParse(ViewData["itemIndex"].ToStringOrNull(), out parsedItemIndex))
+    {
+        itemIndex = parsedItemIndex;
+    }
+}
+
 
 <article class="package" role="listitem">
 
@@ -10,7 +22,13 @@
         </div>
         <div class="col-sm-11">
             <div class="package-header">
-                <a class="package-title" href="@Url.Package(Model.Id, Model.UseVersion ? Model.Version : null)">@Html.BreakWord(Model.Id)</a>
+                <a class="package-title"
+                   href="@Url.Package(Model.Id, Model.UseVersion ? Model.Version : null)"
+                   @if (itemIndex.HasValue)
+                   {
+                       @:data-track="search-selection" data-track-value="@itemIndex"
+                   }
+                   >@Html.BreakWord(Model.Id)</a>
 
                 @if (Model.IsVerified.HasValue && Model.IsVerified.Value)
                 {