Merge pull request #7263 from NuGet/mogah-gh-usage-analytics

[GH Usage] Added analytics

Author: mogah

src/NuGetGallery/Scripts/gallery/page-display-package.js

@@ -105,10 +105,25 @@ $(function () {
         });
     }
 
-    // Emit a Google Analytics event when the user expands or collapses the Dependencies section.
     if (window.nuget.isGaAvailable()) {
+        // Emit a Google Analytics event when the user expands or collapses the Dependencies section.
         $("#dependency-groups").on('hide.bs.collapse show.bs.collapse', function (e) {
             ga('send', 'event', 'dependencies', e.type);
         });
+
+        // Emit a Google Analytics event when the user expands or collapses the GitHub Usage section.
+        $("#github-usage").on('hide.bs.collapse show.bs.collapse', function (e) {
+            ga('send', 'event', 'github-usage', e.type);
+        });
+
+        // Emit a Google Analytics event when the user clicks on a repo link in the GitHub Usage section.
+        $(".btn-gh-repo").on('click', function (elem) {
+            if (!elem.delegateTarget.dataset.indexNumber) {
+                console.error("indexNumber property doesn't exist!");
+            } else {
+                let linkIndex = elem.delegateTarget.dataset.indexNumber;
+                ga('send', 'event', 'github-usage', 'link-click-' + linkIndex);
+            }
+        });
     }
 });

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -535,16 +535,16 @@
                             @(Model.Id), including the following:
                         </p>
 
-                        @foreach (var dep in Model.GitHubDependenciesInformation.Repos)
+                        @foreach (var item in Model.GitHubDependenciesInformation.Repos.Select((elem, i) => new { Value = elem, Idx = i}))
                         {
                             <div class="row top-buffer">
                                 <div class="col-xs-12">
-                                    <a class="btn btn-gh-repo text-left" href="@dep.Url" target="_blank">
+                                    <a data-index-number="@item.Idx" class="btn btn-gh-repo text-left" href="@item.Value.Url" target="_blank">
                                         <span class="pull-left">
-                                            @(dep.Id)
+                                            @(item.Value.Id)
                                         </span>
                                         <span class="badge pull-right badge-gh-repo">
-                                            @(dep.Stars.ToKiloFormat()) <i class="ms-Icon ms-Icon--FavoriteStarFill star-gh-repo" aria-hidden="true"></i>
+                                            @(item.Value.Stars.ToKiloFormat()) <i class="ms-Icon ms-Icon--FavoriteStarFill star-gh-repo" aria-hidden="true"></i>
                                         </span>
                                     </a>
                                 </div>