feat: added basic site tracking using Umami

astro.config.mjs

@@ -12,6 +12,17 @@ export default defineConfig({
       title: 'Web Monetization',
       description:
         "Web Monetization allows websites to automatically receive payments from users, facilitated by the user agent and a user's preferred monetization provider.",
+      head: [
+        {
+          tag: 'script',
+          attrs: {
+            defer: true,
+            'data-website-id': '3b8cb97a-2a94-43c2-85e7-277c92c9cf48',
+            src: 'https://ilf-site-analytics.netlify.app/script.js',
+            'data-domains': 'webmonetization.org'
+          }
+        }
+      ],
       customCss: [
         './node_modules/@interledger/docs-design-system/src/styles/teal-theme.css',
         './node_modules/@interledger/docs-design-system/src/styles/ilf-docs.css',

src/components/pages/CardList.astro

@@ -9,6 +9,7 @@ const { cards } = Astro.props;
       target="_blank"
       rel="noreferrer noopener"
       class="card cardWide"
+      data-umami-event={`CardList - ${card.name}`}
     >
       <img
         class="cardLogo"
@@ -30,6 +31,7 @@ const { cards } = Astro.props;
       rel="noreferrer noopener"
       key={card.name}
       class="card cardBasic"
+      data-umami-event={`CardList - ${card.name}`}
     >
       <img src={`/img/${card.image}`} alt={card.name} width="267" height="78" />
     </a>

src/components/pages/LinkCard.astro

@@ -1,7 +1,7 @@
 ---
-const { class: className, href } = Astro.props;
+const { class: className, href, event } = Astro.props;
 ---
-<a href={href} class:list={className}>
+<a href={href} class:list={className} data-umami-event={event}>
   <slot />
 </a>
 

src/components/pages/LinkTagGenerator/LinkTagGenerator.jsx

@@ -50,6 +50,7 @@ export default function LinkTagGenerator() {
           <button
             className='btn'
             type='submit'
+            data-umami-event='Link tag page - Generator'
             onClick={(evt) => {
               evt.preventDefault()
               setInvalidUrl(false)

src/components/pages/ProbRevshare/components/_share-list.jsx

@@ -69,12 +69,14 @@ export function ShareList() {
         <button
           className='btn'
           onClick={() => setShares([...shares, newShare()])}
+          data-umami-event='Revshare - Add share'
         >
           Add Share
         </button>
         <button
           className={`${styles.importSharesButton} btn`}
           onClick={() => setView(ViewStates.Import)}
+          data-umami-event='Revshare - Import share'
         >
           Import Existing Revshare
         </button>

src/components/pages/TopNav.astro

@@ -15,8 +15,8 @@
       </div>
     </button>
     <ul id="navMenu" class="nav-menu collapsed">
-       <li class="nav-link__docs"><a href="/docs">Documentation</a></li>
-       <li class="nav-link__docs"><a href="/specification">Specification</a></li>
+       <li class="nav-link__docs"><a href="/docs" data-umami-event="Landing page - WebMo docs">Documentation</a></li>
+       <li class="nav-link__docs"><a href="/specification" data-umami-event="Landing page - WebMo specs">Specification</a></li>
        <li class="nav-link__github"><a href="https://github.com/WICG/webmonetization/"><img src="/img/icon-github.svg" alt="Link to Github repository"></a></li>
     </ul>
  </nav>

src/layouts/Base.astro

@@ -29,6 +29,8 @@ changeLanguage("en");
   <meta name="title" content={title} />
   <meta name="description" content={description} />
 
+  <script defer src="https://ilf-site-analytics.netlify.app/script.js" data-website-id="3b8cb97a-2a94-43c2-85e7-277c92c9cf48" data-domains: "webmonetization.org"></script>
+
   <meta property="og:type" content="website" />
   <meta property="og:url" content={Astro.url} />
   <meta property="og:title" content={title} />

src/pages/index.astro

@@ -37,6 +37,7 @@ const pluginsList = data.plugins.filter(function(plugin){
             href="https://wicg.io/"
             rel="noreferrer noopener"
             target="_blank"
+            data-umami-event="Landing page - Spec"
           >
             the Web Platform Incubator Community Group</a>.
         </p>
@@ -59,7 +60,7 @@ const pluginsList = data.plugins.filter(function(plugin){
       <div class="gridItem">
         <h2 class="heading3">Why Now?</h2>
         <p>
-          Until recently, there hasn't been an open, neutral and cost-efficient protocol for transferring money. <a href="https://interledger.org" rel="noreferrer noopener" target="_blank">Interledger</a> provides a simple, interoperable, and currency-agnostic method for the transfer of small amounts of money. This opens up the possibility for streaming money, which makes more Web Monetization use cases possible for the first time.
+          Until recently, there hasn't been an open, neutral and cost-efficient protocol for transferring money. <a href="https://interledger.org" rel="noreferrer noopener" target="_blank" data-umami-event="Landing page - ILP docs">Interledger</a> provides a simple, interoperable, and currency-agnostic method for the transfer of small amounts of money. This opens up the possibility for streaming money, which makes more Web Monetization use cases possible for the first time.
         </p>
       </div>
     </div>
@@ -135,7 +136,7 @@ const pluginsList = data.plugins.filter(function(plugin){
       <div class="contentWrapperLg">
         <div class="sectionHeader">
           <h2 class="heading3">Web Monetization Libraries/Plugins</h2>
-          <p>There have been a number of libraries and plugins developed over the years to enable Web Monetization features on your website, but a lot of them need updating to conform to the latest specification. If you would like to help out this effort, please check out the <a href="/docs/resources/libraries">full list</a>. These plugins have already been updated:</p>
+          <p>There have been a number of libraries and plugins developed over the years to enable Web Monetization features on your website, but a lot of them need updating to conform to the latest specification. If you would like to help out this effort, please check out the <a href="/docs/resources/libraries" data-umami-event="Landing page - WebMo libraries">full list</a>. These plugins have already been updated:</p>
         </div>
         <div class="cards">
           <CardList cards={pluginsList} />
@@ -150,17 +151,17 @@ const pluginsList = data.plugins.filter(function(plugin){
         <h2 class="heading3">Tools</h2>
       </div>
       <div class="threeColGrid toolsList">
-        <a class="gridItem" href="/play">
+        <a class="gridItem" href="/play" data-umami-event="Landing page - Playground">
           <h3 class="heading4">Web Monetization Playground</h3>
           <p>Explore how Web Monetization works</p>
         </a>
 
-        <a class="gridItem" href="/link-tag">
+        <a class="gridItem" href="/link-tag" data-umami-event="Landing page - Link tag">
           <h3 class="heading4">Link Tag Generator</h3>
           <p>Generate a Web Monetization link tag for your site</p>
         </a>
 
-        <a class="gridItem" href="/prob-revshare">
+        <a class="gridItem" href="/prob-revshare" data-umami-event="Landing page - Prob rev share">
           <h3 class="heading4">Probabilistic RevShare Generator</h3>
           <p>Split Web Monetization revenue between payment pointers</p>
         </a>

src/pages/link-tag.astro

@@ -13,7 +13,7 @@ const description = t("site.description");
     <div class="contentWrapperMd">
       <h1 class="heading2">Link Element Generator</h1>
       <p>
-        Use the Link Element Generator to generate a monetization <code>&lt;link&gt;</code> element for your HTML documents. Just enter your <a href='https://paymentpointers.org/' rel='noreferrer noopener' target='_blank'> payment pointer</a> into the field and click Generate.
+        Use the Link Element Generator to generate a monetization <code>&lt;link&gt;</code> element for your HTML documents. Just enter your <a href='https://paymentpointers.org/' rel='noreferrer noopener' target='_blank' data-umami-event='Link tag page - Payment pointers'>payment pointer</a> into the field and click Generate.
       </p>
       <LinkTagGenerator client:load />
     </div>

src/pages/play.astro

@@ -23,7 +23,7 @@ const description = t("site.description");
               required
             />
           </div>
-          <button class='btn full-width' type='submit' disabled>
+          <button class='btn full-width' type='submit' data-umami-event='Play page - Add WebMo link' disabled>
             Add monetization link
           </button>
           <p>Checking if your browser supports Web Monetization...</p>

src/pages/prob-revshare.astro

@@ -13,11 +13,11 @@ const description = t("site.description");
     <div class="contentWrapperMd">
       <h1 class="heading2">Probabilistic Revshare Generator</h1>
       <p>Probabilistic revenue sharing (revshare) is one way to share a portion of a web monetized page’s earnings between multiple payment pointers.</p> 
-      <p>Use this tool to define a list of payment pointers and their weights. Then, add the generated monetization <code>link</code> element to your site. The <code>link</code> will contain a unique URL hosted on <code>https://webmonetization.org/api/revshare/pay/</code>. If you'd prefer to not use a hosted URL, you can set up revshare by <a href="/docs/guides/set-up-probabilistic-revenue-sharing" target="_blank">adding a script to your site</a>.</p>
+      <p>Use this tool to define a list of payment pointers and their weights. Then, add the generated monetization <code>link</code> element to your site. The <code>link</code> will contain a unique URL hosted on <code>https://webmonetization.org/api/revshare/pay/</code>. If you'd prefer to not use a hosted URL, you can set up revshare by <a href="/docs/guides/set-up-probabilistic-revenue-sharing" target="_blank" data-umami-event="Revshare page - Revshare guide">adding a script to your site</a>.</p>
       <h2 class="heading3">Define a new revshare</h2>
       <p>Enter each payment pointer that will receive a split of the revenue into the table below. Names are optional. Click <b>Add Share</b> to add more rows.</p>
       <p>You can adjust by percent after two payment pointers are added to the table. Updating one field will update the remaining fields automatically.</p>
-      <p>As you adjust weights and percentages, the <code>link</code> element generated below will change. Don’t copy the <code>link</code> until you’re finished. Then, <a href="/docs/guides/monetize-page" target="_blank">add the link</a> to your site.</p>
+      <p>As you adjust weights and percentages, the <code>link</code> element generated below will change. Don’t copy the <code>link</code> until you’re finished. Then, <a href="/docs/guides/monetize-page" target="_blank" data-umami-event='Revshare page - Monetization guide'>add the link</a> to your site.</p>
       <ProbRevshareGenerator client:load />
     </div>
   </section>