Add analytics handlers for external links

aaronlademann-wf · Oct 25, 2016 · a55b630 · a55b630
1 parent ebe34b7
commit a55b630
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 28 deletions.
diff --git a/_config.yml b/_config.yml
@@ -64,3 +64,7 @@ dartlang_target: dartlang
 
 demo_component_src_branch: gh-pages
 demo_dart_src_path: build/web/demos/
+
+# Google Analytics Helpers
+repo_pageview_page: /over_react/github
+dartdocs_pageview_page: /over_react/api-docs
diff --git a/demos.html b/demos.html
@@ -32,7 +32,8 @@ <h2 class="h5 card-title">
                     <a href="{{ demo_component_src_path }}{{ demo.id }}.dart"
                        target="{{ site.repo_target }}"
                        class="btn btn-outline-secondary"
-                       aria-label="{{ demo.component_class }} Demo Component Source Code">
+                       aria-label="{{ demo.component_class }} Demo Component Source Code"
+                       onclick="handleSourceCodeView('{{ demo.component_class }}');">
                         Source Code
                     </a>
                 </div>

diff --git a/docs/_data/demos.yml b/docs/_data/demos.yml
@@ -2,27 +2,27 @@
   slug: button
   component_class: Button
   title: Button Component Demo
-  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/buttons/" target="bs">Bootstrap Button</a> element using OverReact’s statically-typed React prop API.'
+  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/buttons/" target="bs" onclick="handleBsExternalClick();">Bootstrap Button</a> element using OverReact’s statically-typed React prop API.'
   img: false
 
 - id: list_group
   slug: list-group
   component_class: ListGroup
   child_component_class: ListGroupItem
   title: ListGroup Component Demo
-  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/list-group/" target="bs">Bootstrap List Group</a> element using OverReact’s statically-typed React prop API.'
+  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/list-group/" target="bs" onclick="handleBsExternalClick();">Bootstrap List Group</a> element using OverReact’s statically-typed React prop API.'
   img: false
 
 - id: progress
   slug: progress
   component_class: Progress
   title: Progress Component Demo
-  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/progress/" target="bs">Bootstrap Progress</a> element using OverReact’s statically-typed React prop API.'
+  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/progress/" target="bs" onclick="handleBsExternalClick();">Bootstrap Progress</a> element using OverReact’s statically-typed React prop API.'
   img: false
 
 - id: tag
   slug: tag
   component_class: Tag
   title: Tag Component Demo
-  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/tag/" target="bs">Bootstrap Tag</a> element using OverReact’s statically-typed React prop API.'
+  lead: 'A component that renders a <a href="http://v4-alpha.getbootstrap.com/components/tag/" target="bs" onclick="handleBsExternalClick();">Bootstrap Tag</a> element using OverReact’s statically-typed React prop API.'
   img: false
diff --git a/docs/_includes/demo-code-example.html b/docs/_includes/demo-code-example.html
@@ -21,18 +21,18 @@
     <ul class="nav nav-pills nav-stacked" id="{{ include.name }}_tablist" role="tablist">
         <li class="nav-item">
             <div role="tab" class="nav-link active" id="consumption-code-tab"
-               title="View consumption code example"
-               data-target="#consumption-code"
-               aria-controls="consumption-code"
-               aria-expanded="true">
+                 title="View consumption code example"
+                 data-target="#consumption-code"
+                 aria-controls="consumption-code"
+                 aria-expanded="true">
                 Consumption
             </div>
         </li>
         <li class="nav-item">
             <div role="tab" class="nav-link" id="{{ include.component_name }}_component-code-tab"
-               title="View {{ include.component_name }} component code example"
-               data-target="#{{ include.component_name }}_component-code"
-               aria-controls="{{ include.component_name }}_component-code">
+                 title="View {{ include.component_name }} component code example"
+                 data-target="#{{ include.component_name }}_component-code"
+                 aria-controls="{{ include.component_name }}_component-code">
                 <div class="d-flex flex-items-xs-middle">
                     <div class="col-xs pl-0 pr-0">
                         {{ include.component_name }} Component
@@ -41,7 +41,8 @@
                         <a class="code-example-popout-link"
                            title="View {{ include.component_name }} component code in a new window"
                            href="{{ demo_component_src_path }}{{ include.component_file_name }}.dart"
-                           target="{{ site.repo_target }}">
+                           target="{{ site.repo_target }}"
+                           onclick="handleSourceCodeView('{{ include.component_name }}');">
                             {% include svg/popout.svg %}
                             <span class="sr-only">View {{ include.component_name }} component code in a new window</span>
                         </a>
@@ -51,9 +52,9 @@
         </li>{% if include.component_two_name %}
         <li class="nav-item">
             <div role="tab" class="nav-link" id="{{ include.component_two_name }}_component-code-tab"
-               title="View {{ include.component_two_name }} component code example"
-               data-target="#{{ include.component_two_name }}_component-code"
-               aria-controls="{{ include.component_two_name }}_component-code">
+                 title="View {{ include.component_two_name }} component code example"
+                 data-target="#{{ include.component_two_name }}_component-code"
+                 aria-controls="{{ include.component_two_name }}_component-code">
                 <div class="d-flex flex-items-xs-middle">
                     <div class="col-xs pl-0 pr-0">
                         {{ include.component_two_name }} Component
@@ -62,7 +63,8 @@
                         <a class="code-example-popout-link"
                            title="View {{ include.component_two_name }} component code in a new window"
                            href="{{ demo_component_src_path }}{{ include.component_two_file_name }}.dart"
-                           target="{{ site.repo_target }}">
+                           target="{{ site.repo_target }}"
+                           onclick="handleSourceCodeView('{{ include.component_two_name }}');">
                             {% include svg/popout.svg %}
                             <span class="sr-only">View {{ include.component_two_name }} component code in a new window</span>
                         </a>

diff --git a/docs/_includes/site_footer.html b/docs/_includes/site_footer.html
@@ -1,4 +1,9 @@
 {% include site_vars.html %}
+{% assign dart_logo = 'https://github.com/dart-lang/logos/blob/master/logos_and_wordmarks/dart-logo.eps' %}
+{% assign react_logo = 'https://github.com/facebook/react/blob/master/docs/img/logo.svg' %}
+{% assign cc3 = 'http://creativecommons.org/licenses/by/3.0/' %}
+{% assign cc4 = 'https://github.com/facebook/react/blob/master/LICENSE-docs' %}
+
 <hr class="footer-divider">
 
 <div class="container">
@@ -9,27 +14,52 @@
                     {% include svg/workiva-symbol.svg class="footer__logo" %}
                     <span>
                         {{ site.title }} is brought to you by the good folks at
-                        <a href="{{ site.org_url }}" target="{{ site.org_target }}">Workiva</a>
+                        <a href="{{ site.org_url }}" target="{{ site.org_target }}"
+                           onclick="handleExternalClick('Click: Footer', 'Workiva');">
+                            Workiva
+                        </a>
                     </span>
                 </div>
             </div>
             <div class="footer__col footer__col--right col-md col-sm-shrink d-flex flex-items-xs-middle">
                 <div class="d-flex flex-items-xs-middle">
                     <ul class="footer__items">
                         <li class="footer__item">
-                            <a class="footer__link" href="{{ site.license_url }}" target="{{ site.repo_target }}">License</a>
+                            <a class="footer__link" href="{{ site.license_url }}" target="{{ site.repo_target }}"
+                               onclick="handleAffiliatedClick('Click: Footer', 'License', '{{ site.repo_pageview_page }}/license');">
+                                License
+                            </a>
                         </li>
                         <li class="footer__item">
-                            <a class="footer__link" href="{{ site.repo_url }}" target="{{ site.repo_target }}">Github</a>
+                            <a class="footer__link" href="{{ site.repo_url }}" target="{{ site.repo_target }}"
+                               onclick="handleAffiliatedClick('Click: Footer', 'Github', '{{ site.repo_pageview_page }}');">
+                                Github
+                            </a>
                         </li>
                     </ul>
                 </div>
             </div>
         </div>
         <div class="row footer__fine-print">
             <div class="footer__col col-md">
-                <p><small>The "<a rel="nofollow" href="https://github.com/dart-lang/logos/blob/master/logos_and_wordmarks/dart-logo.eps" target="_blank">Dart logo</a>" by <a rel="nofollow" href="https://github.com/dart-lang" target="_blank">@dart-lang</a> is licensed under <a rel="nofollow" href="http://creativecommons.org/licenses/by/3.0/" target="_blank">CC BY 3.0</a></small></p>
-                <p><small>The "<a rel="nofollow" href="https://github.com/facebook/react/blob/master/docs/img/logo.svg" target="_blank">React logo</a>" by <a rel="nofollow" href="https://github.com/facebook" target="_blank">@facebook</a> is licensed under <a rel="nofollow" href="https://github.com/facebook/react/blob/master/LICENSE-docs" target="_blank">CC BY 4.0</a></small></p>
+                <p><small>
+                    The "<a rel="nofollow" href="{{ dart_logo }}" target="_blank"
+                            onclick="handleExternalClick('Click: Footer', 'Dart logo');">Dart logo</a>" by
+                    <a rel="nofollow" href="https://github.com/dart-lang" target="_blank"
+                       onclick="handleExternalClick('Click: Footer', '@dart-lang');">@dart-lang</a>
+                    is licensed under
+                    <a rel="nofollow" href="{{ cc3 }}" target="_blank"
+                       onclick="handleExternalClick('Click: Footer', 'CC BY 3.0');">CC BY 3.0</a>
+                </small></p>
+                <p><small>
+                    The "<a rel="nofollow" href="{{ react_logo }}" target="_blank"
+                            onclick="handleExternalClick('Click: Footer', 'React logo');">React logo</a>" by
+                    <a rel="nofollow" href="https://github.com/facebook" target="_blank"
+                       onclick="handleExternalClick('Click: Footer', '@facebook');">@facebook</a>
+                    is licensed under
+                    <a rel="nofollow" href="{{ cc4 }}" target="_blank"
+                       onclick="handleExternalClick('Click: Footer', 'CC BY 4.0');">CC BY 4.0</a>
+                </small></p>
             </div>
         </div>
     </footer>

diff --git a/docs/_includes/site_navbar.html b/docs/_includes/site_navbar.html
@@ -23,13 +23,19 @@
                             <a class="nav-link" href="{{page.baseurl}}demos/">Demos</a>
                         </li>
                         <li class="nav-item">
-                          <a class="nav-link" href="{{ dartdocs_url }}/index.html" target="{{ site.api_target }}">API Docs</a>
+                            <a class="nav-link" href="{{ dartdocs_url }}/index.html" target="{{ site.api_target }}"
+                               onclick="handleAffiliatedClick('Click: Navbar', 'API Docs', '{{ site.dartdocs_pageview_page }}');">
+                                API Docs
+                            </a>
                         </li>
                     </ul>
 
                     <ul class="nav navbar-nav float-sm-right">
                         <li class="nav-item">
-                            <a class="nav-link" href="{{ site.repo_url }}" target="{{ site.repo_target }}">Github</a>
+                            <a class="nav-link" href="{{ site.repo_url }}" target="{{ site.repo_target }}"
+                               onclick="handleAffiliatedClick('Click: Navbar', 'Github', '{{ site.repo_pageview_page }}');">
+                                Github
+                            </a>
                         </li>
                     </ul>
                 </div>

diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
@@ -12,7 +12,9 @@ <h1 class="hero-title">
             <a class="btn hero-btn" href="{{ page.baseurl }}demos/" aria-label="Demonstrations">
                 Demos
             </a>
-            <a class="btn hero-btn" href="{{ dartdocs_url }}/index.html" target="{{ site.api_target }}" aria-label="API Documentation">
+            <a class="btn hero-btn" href="{{ dartdocs_url }}/index.html" target="{{ site.api_target }}"
+               aria-label="API Documentation"
+               onclick="handleAffiliatedClick('Click: Content', 'API Docs', '{{ site.dartdocs_pageview_page }}');">
                 API Docs
             </a>
 
@@ -31,9 +33,11 @@ <h1 class="hero-title">
                 <h2 class="feature__heading display-4">The best of both worlds.</h2>
                 <p class="feature__body">
                     The {{ site.pkg_name }} platform delivers the declarative awesomeness of
-                    <a href="https://facebook.github.io/react/" target="{{ site.reactjs_target }}">React</a>
+                    <a href="https://facebook.github.io/react/" target="{{ site.reactjs_target }}"
+                       onclick="handleExternalClick('Click: Content', 'React');">React</a>
                     <em>and</em> all the creature comforts of
-                    <a href="https://www.dartlang.org/" target="{{ site.dartlang_target }}">Dart</a>
+                    <a href="https://www.dartlang.org/" target="{{ site.dartlang_target }}"
+                       onclick="handleExternalClick('Click: Content', 'Dart');">Dart</a>
                     in a single package!
                 </p>
             </div>
@@ -54,7 +58,12 @@ <h2 class="feature__heading display-4">The best of both worlds.</h2>
             <h2 class="feature__heading display-4">Make components; <br>not boilerplate.</h2>
             <p class="feature__body">
                 The {{ site.pkg_name }} platform makes use of a powerful Pub transformer
-                to wire up a factory and <a href="https://facebook.github.io/react/docs/reusable-components.html" target="{{ site.reactjs_target }}">React component class</a>,
+                to wire up a factory and
+                <a href="https://facebook.github.io/react/docs/reusable-components.html"
+                   target="{{ site.reactjs_target }}"
+                   onclick="handleExternalClick('Click: Content', 'React component class');">
+                    React component class
+                </a>,
                 along with props and optional state classes, so you can focus on building UI that your consumers
                 &mdash; and customers &mdash; will love.
             </p>

diff --git a/docs/assets/js/docs.js b/docs/assets/js/docs.js
@@ -1,3 +1,57 @@
+var gaSourceCodeViewPath = '/over_react/demos/source/';
+
+function gaLinkHandler(action, label, isAffiliated, page) {
+    // For one reason or another, analytics was not loaded onto the page
+    if (!ga) return;
+
+    isAffiliated = isAffiliated || false;
+
+    var evCategory = 'External Link';
+
+    if (isAffiliated) {
+        evCategory += ': Affiliated';
+    } else {
+        evCategory += ': 3rd Party';
+    }
+
+    // Track as an event
+    ga('send', 'event', evCategory, action, label);
+
+    // Track as pageview if the "external" location is directly
+    // related to our library (e.g. click to go to gh repo, click to go to dartdocs, etc.)
+    if (isAffiliated) {
+        page = page || label;
+        ga('send', 'pageview', page);
+    }
+}
+
+// These link clicks take the user to a 3rd party location, unaffiliated with over_react.
+function handleExternalClick(action, label) {
+    gaLinkHandler(action, label, false);
+}
+
+// These link clicks take the user to a different domain, but one that
+// we wish we could track with ga as part of the github.io site...
+function handleAffiliatedClick(action, label, page) {
+    gaLinkHandler(action, label, true, page);
+}
+
+function handleSourceCodeView(componentName) {
+    handleAffiliatedClick('View Source Code', componentName, gaSourceCodeViewPath + componentName);
+}
+
+function handleBsExternalClick() {
+    try {
+        var linkText = arguments.callee.caller.arguments[0].target.innerText;
+
+        handleExternalClick("Click: Hero", linkText);
+    } catch (err) {
+        handleExternalClick("Click: Hero", "Bootstrap component");
+    }
+}
+
+///////////////////////////////////////////
+
 var contentPlaceholders = $('.content-placeholder__bg');
 var waitFn;