Merge pull request #33 from alphagov/PP-3129-adding-click-tracking

PP-3129 adding click tracking

Author: jonheslop

.bowerrc

@@ -20,8 +20,8 @@
 # Ignore .DS_store file
 .DS_Store
 
-# Vendored Frontend components
-/components
+# Ignore node modules
+/node_modules
 
 # PaaS authentication file
 Staticfile.auth

.gitignore

@@ -0,0 +1 @@
+6.12.2

.nvmrc

@@ -2,15 +2,15 @@
 
 ## Running Locally
 
-- `bundle install`
-- `bower install`
-- `bundle exec middleman server`
-- `open http://localhost:4567`
+- `bundle install` to install middleman and its dependencies
+- `npm install` to install the frontend dependencies
+- `bundle exec middleman server` - to start middleman's built in server
+- `open http://localhost:4567` - to open the example in your browser
 
 ## Building a Static Copy of the Site
 
 - `bundle install`
-- `bower install`
+- `npm install`
 - `bundle exec middleman build`
 
 Check the `build` directory for the output.

README.md

@@ -89,7 +89,7 @@ def call(sprockets_asset)
   config.imported_asset_path = ImportedAssetPathProcessor.new(app)
 end
 
-sprockets.append_path File.join(root, "components")
+sprockets.append_path File.join(root, "node_modules")
 
 redirect "contact/index.html", to: "/support/"
 

bower.json

@@ -0,0 +1,31 @@
+{
+  "name": "product-page-example",
+  "private": "true",
+  "version": "1.0.0",
+  "description": "This is an example product page for use by GaaP products.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/alphagov/product-page-example.git"
+  },
+  "author": "Government Digital Service developers",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/alphagov/product-page-example/issues"
+  },
+  "homepage": "https://github.com/alphagov/product-page-example#readme",
+  "dependencies": {
+    "gaap-analytics": "^2.2.1",
+    "govuk-elements-sass": "^3.1.1",
+    "govuk_frontend_toolkit": "^7.0.1",
+    "govuk_template_jinja": "^0.22.3"
+  },
+  "devDependencies": {
+    "napa": "^3.0.0"
+  },
+  "scripts": {
+    "install": "napa"
+  },
+  "napa": {
+    "govuk_template": "alphagov/govuk_template#v0.22.3"
+  }
+}

config.rb

@@ -2,7 +2,7 @@
 title: Cookies - GOV.UK Pay
 ---
 
-<nav class="breadcrumbs" aria-label="Breadcrumbs">
+<nav class="breadcrumbs" aria-label="Breadcrumbs" data-click-events data-click-category="Header" data-click-action="Breadcrumb clicked">
   <ol itemscope itemtype="http://schema.org/BreadcrumbList">
     <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
       <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
@@ -33,7 +33,7 @@ title: Cookies - GOV.UK Pay
 
       <p>You’ll normally see a message on the site before we store a cookie on your computer.</p>
 
-      <p>Find out <a href="http://www.aboutcookies.org/">how to manage cookies</a>.</p>
+      <p>Find out <a href="http://www.aboutcookies.org/" data-click-events data-click-category="Content" data-click-action="External link clicked">how to manage cookies</a>.</p>
 
       <h2 class="heading-medium">Session cookie</h2>
 

package.json

@@ -2,7 +2,7 @@
 title: Features - GOV.UK Pay
 ---
 
-  <nav class="breadcrumbs" aria-label="Breadcrumbs">
+  <nav class="breadcrumbs" aria-label="Breadcrumbs" data-click-events data-click-category="Header" data-click-action="Breadcrumb clicked">
       <ol itemscope itemtype="http://schema.org/BreadcrumbList">
           <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
               <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
@@ -18,7 +18,7 @@ title: Features - GOV.UK Pay
 <div class="container">
   <div class="grid-row">
     <div class="column-one-third">
-      <nav class="sub-navigation">
+      <nav class="sub-navigation" data-click-events data-click-category="Content" data-click-action="Button clicked">
         <ol itemscope itemtype="http://schema.org/ItemList">
           <li class="sub-navigation__item sub-navigation__item--active" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
             <a href="/features" itemprop="item"><span itemprop="name">Features</span></a>
@@ -63,7 +63,7 @@ title: Features - GOV.UK Pay
                           <li>switch PSPs without additional technical work (technical integration is provider-agnostic)</li>
                       </ul>
                   <h2 class="heading-medium">Queries and suggestions</h2>
-                  <p>If you want to find out more about these features, or have some needs that GOV.UK Pay isn’t yet meeting, please get in touch with us by emailing <a href="mailto:govuk-pay-support@digital.cabinet-office.gov.uk">govuk-pay-support@digital.cabinet-office.gov.uk</a> or chat with us in our <a href="https://ukgovernmentdigital.slack.com/messages/govuk-pay">cross-government Slack channel</a>.</p>
+                  <p>If you want to find out more about these features, or have some needs that GOV.UK Pay isn’t yet meeting, please get in touch with us by emailing <a href="mailto:govuk-pay-support@digital.cabinet-office.gov.uk" data-click-events data-click-category="Content" data-click-action="Email link clicked">govuk-pay-support@digital.cabinet-office.gov.uk</a> or chat with us in our <a href="https://ukgovernmentdigital.slack.com/messages/govuk-pay" data-click-events data-click-category="Content" data-click-action="External link clicked">cross-government Slack channel</a>.</p>
           </div>
   </div>
 </div>

source/cookies.html.erb

@@ -2,7 +2,7 @@
 title: Get started - GOV.UK Pay
 ---
 
-  <nav class="breadcrumbs" aria-label="Breadcrumbs">
+  <nav class="breadcrumbs" aria-label="Breadcrumbs" data-click-events data-click-category="Header" data-click-action="Breadcrumb clicked">
       <ol itemscope itemtype="http://schema.org/BreadcrumbList">
           <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
               <a href="https://www.gov.uk/service-toolkit#components" itemprop="item"><span itemprop="name">Components</span></a>
@@ -28,14 +28,14 @@ title: Get started - GOV.UK Pay
             </h2>
             <div class="task-list-items">
               <p>If you are a central government organisation with a new or existing digital service, and want to take card payments online, then GOV.UK&nbsp;Pay should be suitable for you.</p>
-              <p>Review GOV.UK Pay’s <a href="/features">top features and roadmap</a> and decide if it meets your service’s needs.</p>
+              <p>Review GOV.UK Pay’s <a href="/features" data-click-events data-click-category="Content" data-click-action="Internal link clicked">top features and roadmap</a> and decide if it meets your service’s needs.</p>
             </div>
 
           <h2 class="task-list-section">
               <span class="task-list-section-number">2.</span> Create an account
           </h2>
           <div class="task-list-items">
-            <p>Test GOV.UK Pay for yourself by <a href="https://selfservice.payments.service.gov.uk/create-service/register">creating an account</a>. You can explore the test environment, and use the same account details when you’re ready to go live.</p>
+            <p>Test GOV.UK Pay for yourself by <a href="https://selfservice.payments.service.gov.uk/create-service/register" data-click-events data-click-category="Content" data-click-action="Internal link clicked">creating an account</a>. You can explore the test environment, and use the same account details when you’re ready to go live.</p>
               <p>You can also connect your service prototype with GOV.UK Pay to test how it works with your users.</p>
           </div>
 
@@ -45,22 +45,22 @@ title: Get started - GOV.UK Pay
           <div class="task-list-items">
               <p>Share information about GOV.UK&nbsp;Pay with your broader team. Managing payments usually involves people from a number of different teams: digital, operational delivery and finance, for example.</p>
 
-              <p> You can <a href="https://selfservice.payments.service.gov.uk/my-services">invite team members</a> from the My Services area of your GOV.UK&nbsp;Pay admin tool. You may want to send our <a href="https://govukpay-docs.cloudapps.digital">documentation</a> to your technical and finance teams.</p>
+              <p> You can <a href="https://selfservice.payments.service.gov.uk/my-services" data-click-events data-click-category="Content" data-click-action="Internal link clicked">invite team members</a> from the My Services area of your GOV.UK&nbsp;Pay admin tool. You may want to send our <a href="https://govukpay-docs.cloudapps.digital" data-click-events data-click-category="Content" data-click-action="Internal link clicked">documentation</a> to your technical and finance teams.</p>
           </div>
 
           <h2 class="task-list-section">
               <span class="task-list-section-number">4.</span> Integrate your service with GOV.UK&nbsp;Pay
           </h2>
           <div class="task-list-items">
-              <p>Your technical team can find information about integrating and API references in our <a href="https://govukpay-docs.cloudapps.digital">documentation</a>.</p>
+              <p>Your technical team can find information about integrating and API references in our <a href="https://govukpay-docs.cloudapps.digital" data-click-events data-click-category="Content" data-click-action="Internal link clicked">documentation</a>.</p>
           </div>
 
           <h2 class="task-list-section">
               <span class="task-list-section-number">5.</span> Sign GOV.UK Pay’s agreements
           </h2>
           <div class="task-list-items">
             <p>Your organisation needs to sign GOV.UK Pay’s Memorandum of Understanding and your team needs to agree to our Terms of Use.</p>
-            <p>Contact GOV.UK Pay on <a href="mailto:govuk-pay-support@digital.cabinet-office.gov.uk">govuk-pay-support@digital.cabinet-office.gov.uk</a> to receive our agreements.</p>
+            <p>Contact GOV.UK Pay on <a href="mailto:govuk-pay-support@digital.cabinet-office.gov.uk" data-click-events data-click-category="Content" data-click-action="Email link clicked">govuk-pay-support@digital.cabinet-office.gov.uk</a> to receive our agreements.</p>
           </div>
 
           <h2 class="task-list-section">
@@ -69,18 +69,18 @@ title: Get started - GOV.UK Pay
           <div class="task-list-items">
               <p>You will need to have a contract for Payment Gateway and Merchant Acquiring services with a Payment Service Provider, who will process the payments taken using GOV.UK Pay. We will support the suppliers listed on the relevant Crown Commercial Service framework: Barclays, Global Payments, Stripe, WorldPay.</p>
               <div class="panel panel-border-wide">
-                  <p>If you don’t have one already, then avoid any procurement work by signing up with the Government Banking Service. They have an existing contract that’s open to central government and health sector organisations. Contact the Government Banking helpdesk at <a href="mailto:helpdesk.gbs@hmrc.gsi.gov.uk">helpdesk.gbs@hmrc.gsi.gov.uk</a> if you’d like to learn more and sign up.</p>
+                  <p>If you don’t have one already, then avoid any procurement work by signing up with the Government Banking Service. They have an existing contract that’s open to central government and health sector organisations. Contact the Government Banking helpdesk at <a href="mailto:helpdesk.gbs@hmrc.gsi.gov.uk" data-click-events data-click-category="Content" data-click-action="Email link clicked">helpdesk.gbs@hmrc.gsi.gov.uk</a> if you’d like to learn more and sign up.</p>
               </div>
-              <p>When you have a Payment Service Provider, you need to make sure it is set up to work with GOV.UK Pay. We have instructions for <a href="https://govukpay-docs.cloudapps.digital/#switching-to-production">configuring your account</a> in our documentation. </p>
-              <p><a href="/support">Contact GOV.UK Pay</a> if you’d like more advice on contracting.</p>
+              <p>When you have a Payment Service Provider, you need to make sure it is set up to work with GOV.UK Pay. We have instructions for <a href="https://govukpay-docs.cloudapps.digital/#switching-to-production" data-click-events data-click-category="Content" data-click-action="Internal link clicked">configuring your account</a> in our documentation. </p>
+              <p><a href="/support" data-click-events data-click-category="Content" data-click-action="Internal link clicked">Contact GOV.UK Pay</a> if you’d like more advice on contracting.</p>
           </div>
 
           <h2 class="task-list-section">
               <span class="task-list-section-number">7.</span> Configure GOV.UK Pay for your service and go live
           </h2>
           <div class="task-list-items">
-              <p>You can update your settings for things like accepted card types in the <a href="https://selfservice.payments.service.gov.uk/">GOV.UK Pay admin tool</a> before you begin taking payments.</p>
-              <p>Contact GOV.UK Pay when you’re ready to go live, at <a href="mailto:govuk-pay-support@digital.cabinet-office.gov.uk">govuk-pay-support@digital.cabinet-office.gov.uk</a></p>
+              <p>You can update your settings for things like accepted card types in the <a href="https://selfservice.payments.service.gov.uk/" data-click-events data-click-category="Content" data-click-action="Internal link clicked">GOV.UK Pay admin tool</a> before you begin taking payments.</p>
+              <p>Contact GOV.UK Pay when you’re ready to go live, at <a href="mailto:govuk-pay-support@digital.cabinet-office.gov.uk" data-click-events data-click-category="Content" data-click-action="Email link clicked">govuk-pay-support@digital.cabinet-office.gov.uk</a></p>
           </div>
         </ol>
       </div>