matomo using nuxt plugin

assets/matomo-plugin.client.js

@@ -0,0 +1,19 @@
+// https://romangeber.com/blog/tech/nuxt3_matomo_integration
+
+import VueMatomo from "vue-matomo";
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(VueMatomo, {
+    debug: true,
+    host: '',
+    siteId: 0,
+    router: nuxtApp.$router,
+    enableHeartBeatTimer: true,
+    heartBeatTimerInterval: 5,
+    enableLinkTracking: true,
+    requireConsent: false,
+    trackInitialView: true,
+    disableCookies: true,
+    requireCookieConsent: false,
+  });
+});

assets/matomo.html

@@ -1,19 +0,0 @@
-<!-- Matomo -->
-<script>
-    var matomoSiteId = '';
-    var matomoInstanceUrl = '';
-    var _paq = window._paq = window._paq || [];
-    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
-    _paq.push(["setDoNotTrack", true]);
-    _paq.push(["disableCookies"]);
-    _paq.push(['trackPageView']);
-    _paq.push(['enableLinkTracking']);
-    (function() {
-      var u=`//${matomoInstanceUrl}/`;
-      _paq.push(['setTrackerUrl', u+'matomo.php']);
-      _paq.push(['setSiteId', matomoSiteId]);
-      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);
-    })();
-  </script>
-  <!-- End Matomo Code -->

bin/generate_static_front.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+
+if [[ -z "$REPO_DIRECTORY" ]]; then
+    . bin/set_url.sh
+fi
+
+su -s /bin/bash -c "cd ${REPO_DIRECTORY} &&\
+node --max-old-space-size=250 `which npm` install -y &&\
+node --max-old-space-size=250 `which npm` run generate --prerender" www-data
+
+cp -r "${FRONT_DIRECTORY}/.output/public" /var/www/html
+chown -R www-data:www-data /var/www/html/public
+
+if [[ -z "$CADDYFILE" ]]; then
+    CADDYFILE="/etc/caddy/Caddyfile"
+fi
+
+echo "www.${DOMAIN_NAME} {" >> $CADDYFILE
+echo "redir ${DOMAIN_NAME}{uri} permanent" >> $CADDYFILE
+echo "}" >> $CADDYFILE
+echo "${DOMAIN_NAME} {" >> $CADDYFILE
+echo "root * /var/www/html/public" >> $CADDYFILE
+echo "file_server" >> $CADDYFILE
+echo "}" >> $CADDYFILE
+caddy fmt $CADDYFILE -w
+caddy reload -c $CADDYFILE

bin/install_nuxt_front.sh

@@ -13,7 +13,8 @@ if [[ -z "$REPO_DIRECTORY" ]]; then
 fi
 
 front_repo_name=$(echo "$repo_url" | sed 's#.*/\([^/]*\)\.git#\1#')
-front_directory="${REPO_DIRECTORY}/${front_repo_name}"
+FRONT_DIRECTORY="${REPO_DIRECTORY}/${front_repo_name}"
+
 if [[ -z "$WEBSITE_TOKEN" ]]; then
     echo -e "${PURPLE}${BOLD}Enter the Directus Website user static token${RESET}"
     read -s WEBSITE_TOKEN
@@ -29,27 +30,8 @@ chown www-data:www-data /var/www/html
 
 su -s /bin/bash -c "cd ${REPO_DIRECTORY} &&\
 git clone ${repo_url} &&\
-cd ${front_directory} &&\
+cd ${FRONT_DIRECTORY} &&\
 git checkout prod &&\
 echo \"DIRECTUS_API_TOKEN=${WEBSITE_TOKEN}\" > .env &&\
 echo \"URL=https://${DOMAIN_NAME}\" >> .env &&\
-echo \"DIRECTUS_URL=https://cms.${DOMAIN_NAME}\" >> .env &&\
+echo \"DIRECTUS_URL=https://cms.${DOMAIN_NAME}\" >> .env" www-data
-node --max-old-space-size=250 `which npm` install -y &&\
-node --max-old-space-size=250 `which npm` run generate --prerender" www-data
-
-cp -r "${front_directory}/.output/public" /var/www/html
-chown -R www-data:www-data /var/www/html/public
-
-if [[ -z "$CADDYFILE" ]]; then
-    CADDYFILE="/etc/caddy/Caddyfile"
-fi
-
-echo "www.${DOMAIN_NAME} {" >> $CADDYFILE
-echo "redir ${DOMAIN_NAME}{uri} permanent" >> $CADDYFILE
-echo "}" >> $CADDYFILE
-echo "${DOMAIN_NAME} {" >> $CADDYFILE
-echo "root * /var/www/html/public" >> $CADDYFILE
-echo "file_server" >> $CADDYFILE
-echo "}" >> $CADDYFILE
-caddy fmt $CADDYFILE -w
-caddy reload -c $CADDYFILE

bin/setup_matomo.sh

@@ -5,27 +5,17 @@ echo -e "${PURPLE}${BOLD}All website → Add a new Website → Website${RESET}"
 echo -e "${PURPLE}${BOLD}Fill in the following informations :${RESET}"
 echo -e "${BLUE}${BOLD}Website name : ${RESET}${BLUE}${DOMAIN_NAME}${RESET}"
 echo -e "${BLUE}${BOLD}Urls : ${RESET}${BLUE}https://${DOMAIN_NAME}/${RESET}"
-echo -e "${PURPLE}${BOLD}Enter the Matomo instance URL :${RESET}${PURPLE} ie : matomo.example.com${RESET}"
+echo -e "${PURPLE}${BOLD}Enter the Matomo instance URL :${RESET}"
+echo -e "${PURPLE} ie : matomo.example.com${RESET}"
 read matomo_url
 echo -e "${PURPLE}${BOLD}Find the website ID at the following URL${RESET}"
 echo -e "${BLUE}https://${matomo_url}/index.php?module=SitesManager${RESET}"
 echo -e "${PURPLE}${BOLD}Enter the Website ID :${RESET}"
 read matomo_website_id
 
-get_username
+mkdir ${FRONT_DIRECTORY}/plugins
+cp assets/matomo-plugin.client.js ${FRONT_DIRECTORY}/plugins
+chown -R www-data:www-data ${FRONT_DIRECTORY}/plugins
 
-temp_matomo_script=/home/$username/matomo.html
+sed -i "s/host: ''/host: 'https://$matomo_url'/" "$FRONT_DIRECTORY/plugins/matomo-plugin.client.js"
-index_file=/var/www/html/public/index.html
+sed -i "s/siteId: 0/siteId: $matomo_website_id/" "$FRONT_DIRECTORY/plugins/matomo-plugin.client.js"
-tmp_file=/home/$username/tmp_index
-
-cp assets/matomo.html $temp_matomo_script
-
-sed -i "s/var matomoSiteId = '';/var matomoSiteId = '$matomo_website_id';/g" $temp_matomo_script
-sed -i "s/var matomoInstanceUrl = '';/var matomoInstanceUrl = '$matomo_url';/g" $temp_matomo_script
-
-sed -i 's/<\/head>/\n<\/head>/' $index_file
-line_number=$(grep -n '</head>' $index_file | cut -d':' -f1)
-head -n $(($line_number - 1)) $index_file > $tmp_file
-cat $temp_matomo_script >> $tmp_file
-tail -n +$line_number $index_file >> $tmp_file
-mv $tmp_file $index_file

bin/variables.sh

@@ -13,6 +13,7 @@ DB_DIRECTUS_PASSWORD=""
 DOMAIN_NAME=""
 CMS_DIRECTORY=""
 REPO_DIRECTORY=""
+FRONT_DIRECTORY=""
 
 WEBSITE_TOKEN=""
 

install.sh

@@ -102,6 +102,8 @@ if [[ "$answer" == "y" ]]; then
         . bin/setup_matomo.sh
     fi
 
+    . bin/generate_static_front.sh
+
     echo -e "${PURPLE}${BOLD}Setup a webhook ? (y/N) ${RESET}"
     read answer
     if [[ "$answer" == "y" ]]; then