Added Matomo 404 page tracking.

[Noam-Alum]

Added Matomo 404 page tracking.

This is referring to this issue.

This is a huge PR, I tried to overwrite the 404 page with no success and nothing on the web worked. It seems like when you create the .vuepress/theme directory Vuepress is treating it like a whole new theme which lead me to copy the entire theme to this directory. (Believe me I read through their whole docs this does not work :disappointed:, or anything alike for that matter)

Note that we are using an outdated version of Vuepress (1.9.10), I don't think anything would change.

Then I had to remove the script tag from the header tag in the .vuepress/config.js file since this script tag is on every page (including the 404 page), I cannot simply "Add the Matomo tracking code in this custom 404 page...before the line" since it's in the header and cannot be changed from the 404.vue layout file.

The solution I came up with is to use the needed JavaScript for pages in the Layout.vue file:

<template>
  <div
    class="theme-container"
    :class="pageClasses"
    @touchstart="onTouchStart"
    @touchend="onTouchEnd"
  >
    <Navbar
      v-if="shouldShowNavbar"
      @toggle-sidebar="toggleSidebar"
    />

    <div
      class="sidebar-mask"
      @click="toggleSidebar(false)"
    />

    <Sidebar
      :items="sidebarItems"
      @toggle-sidebar="toggleSidebar"
    >
      <template #top>
        <slot name="sidebar-top" />
      </template>
      <template #bottom>
        <slot name="sidebar-bottom" />
      </template>
    </Sidebar>

    <Home v-if="$page.frontmatter.home" />

    <Page
      v-else
      :sidebar-items="sidebarItems"
    >
      <template #top>
        <slot name="page-top" />
      </template>
      <template #bottom>
        <slot name="page-bottom" />
      </template>
    </Page>
  </div>
</template>

<script>
// Page tracking
var _paq = window._paq = window._paq || [];
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
  var u="https://matomo.almalinux.org/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '5']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();

import Home from '@theme/components/Home.vue'
import Navbar from '@theme/components/Navbar.vue'
import Page from '@theme/components/Page.vue'
import Sidebar from '@theme/components/Sidebar.vue'
import { resolveSidebarItems } from '../util'

export default {
  name: 'Layout',

  components: {
    Home,
    Page,
    Sidebar,
    Navbar
  },

  data () {
    return {
      isSidebarOpen: false
    }
  },

  computed: {
    shouldShowNavbar () {
      const { themeConfig } = this.$site
      const { frontmatter } = this.$page
      if (
        frontmatter.navbar === false
        || themeConfig.navbar === false) {
        return false
      }
      return (
        this.$title
        || themeConfig.logo
        || themeConfig.repo
        || themeConfig.nav
        || this.$themeLocaleConfig.nav
      )
    },

    shouldShowSidebar () {
      const { frontmatter } = this.$page
      return (
        !frontmatter.home
        && frontmatter.sidebar !== false
        && this.sidebarItems.length
      )
    },

    sidebarItems () {
      return resolveSidebarItems(
        this.$page,
        this.$page.regularPath,
        this.$site,
        this.$localePath
      )
    },

    pageClasses () {
      const userPageClass = this.$page.frontmatter.pageClass
      return [
        {
          'no-navbar': !this.shouldShowNavbar,
          'sidebar-open': this.isSidebarOpen,
          'no-sidebar': !this.shouldShowSidebar
        },
        userPageClass
      ]
    }
  },

  mounted () {
    this.$router.afterEach(() => {
      this.isSidebarOpen = false
    })
  },

  methods: {
    toggleSidebar (to) {
      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
      this.$emit('toggle-sidebar', this.isSidebarOpen)
    },

    // side swipe
    onTouchStart (e) {
      this.touchStart = {
        x: e.changedTouches[0].clientX,
        y: e.changedTouches[0].clientY
      }
    },

    onTouchEnd (e) {
      const dx = e.changedTouches[0].clientX - this.touchStart.x
      const dy = e.changedTouches[0].clientY - this.touchStart.y
      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
        if (dx > 0 && this.touchStart.x <= 80) {
          this.toggleSidebar(true)
        } else {
          this.toggleSidebar(false)
        }
      }
    }
  }
}
</script>

And the needed JavaScript for 404s in the 404.vue file:

<template>
  <div class="theme-container">
    <div class="theme-default-content">
      <h1>404</h1>

      <blockquote>{{ getMsg() }}</blockquote>

      <RouterLink to="/">
        Take me home.
      </RouterLink>
    </div>
  </div>
</template>

<script>
// Page tracking
var _paq = window._paq = window._paq || [];
_paq.push(['setDocumentTitle',  '404/URL = ' +  encodeURIComponent(document.location.pathname+document.location.search) + ' /From = ' + encodeURIComponent(document.referrer)]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
  var u="https://matomo.almalinux.org/";
    _paq.push(['setTrackerUrl', u+'matomo.php']);
    _paq.push(['setSiteId', '5']);
    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
    g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();

const msgs = [
  `There's nothing here.`,
  `How did we get here?`,
  `That's a Four-Oh-Four.`,
  `Looks like we've got some broken links.`
]

export default {
  methods: {
    getMsg () {
      return msgs[Math.floor(Math.random() * msgs.length)]
    }
  }
}
</script>

I proved that this works by generating the site and checking all of the js files (yes I went one by one) to see if they include the needed JavaScript:

404 page:

HTML tag:

JavaScript:

Any page:

HTML tag:

JavaScript:

All the other js files did not include any of the JavaScript manually added.

---

List of changes:

1. Coppyed the whole default Vuepress theme to the .vuepress/theme directory.
2. Removed the script tag from the header tag in the .vuepress/config.js file.
3. Added JavaScript to track pages in the Layout,vue file.
4. Added JavaScript to track pages in the 404.vue file.

---

I know these are huge changes, let me know what you guys think.
Maybe I missed something. :smile:

[bennyvasquez]

@codyro @jonathanspw @sboldyreva this seems sane to me, and seems to take all of the concerns from #467 into account. Do any of you see any problems here? The questions for me are around the automated deployments and the upgrades to vuepress, but I can't recall if we're even doing the second one regularly.

[codyro]

@codyro @jonathanspw @sboldyreva this seems sane to me, and seems to take all of the concerns from #467 into account. Do any of you see any problems here? The questions for me are around the automated deployments and the upgrades to vuepress, but I can't recall if we're even doing the second one regularly.

I assigned #467 (the issue for this PR) to me to go over it once https://github.com/AlmaLinux/almalinux.org/pull/619 is resolved as they're tangentially related. I'll aim to merge these both be EOW or sooner!