Add analytics integration supporting Google Analytics and Plausible

Author: ShukantPal

packages/webdoc-cli/README.md

@@ -123,6 +123,10 @@ The `template` object is used by the site template.
         "apiKey": "kadlfj232983lkqwem",
         "indexName": "webdoc-example",
         "appId": "349o39841;akdsfu"
+      },
+      "analytics": {
+        "provider": "google-analytics",
+        "trackingID": "UA-XXX-00"
       }
     }
   }
@@ -148,6 +152,8 @@ The `template` object is used by the site template.
 * `template.integrations`: (optional) Integrations with 3rd party solutions in your template. This object is dependent on which template you're using. For @webdoc/default-template, the following integrations are available:
   * `search`: This is used as the backend for the global site search. You'll need to create an Algolia account yourself and provide
     the `apiKey`, `appId`, `indexName`. (The only supported provider is "algolia" right now)
+  * `analytics`: Analytics integration. The provider can be "google-analytics" or "plausible". For Google Analytics, you'll need to provide the
+    tracking-ID "trackingID". For Plausible, you'll need to provide the naked domain "nakedDomain", e.g. webdoclabs.com
 * `template.variant` - If the template supports different modes or variants for the generated site,
     it should use this field. @webdoc/default-template supports "normal", "plain" (no CSS, JS).
 ### Tutorial configuration

packages/webdoc-default-template/tmpl/layout.tmpl

@@ -23,14 +23,15 @@ const cssPageKind =
     <meta charset="utf-8" />
     <title><?js= config.title || config.applicationName ?>: <?js= title ?></title>
 
+    <?js= this.partial("snippets/analytics.tmpl", { templateConfig: config }) ?>
+
     <?js if (config.variant !== "plain") { ?>
         <link type="text/css" rel="stylesheet" href="/<?js= sitePrefix ?>styles/index.css" />
     <?js } ?>
 
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Roboto+Mono&family=Source+Code+Pro&display=swap" />
     <link type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.0.3/styles/googlecode.min.css">
-
     <?js Object.keys(config.meta).forEach((key) => { ?>
       <meta name="<?js= key ?>" content="<?js= config.meta[key].replace("{{url}}", `${config.siteDomain}`) ?>" />
     <?js }); ?>

packages/webdoc-default-template/tmpl/snippets/analytics.tmpl

@@ -0,0 +1,32 @@
+<?js
+    const { templateConfig } = obj;
+    const analyticsIntegration = templateConfig.integrations.analytics;
+
+    if (!analyticsIntegration) return;
+?>
+
+<?js if (analyticsIntegration.provider === "google-analytics") {
+        const trackingID = analyticsIntegration.trackingID;
+
+        if (!trackingID)
+          throw new Error("For Google Analytics, provide config.template.integrations.analytics.trackingID");
+    ?>
+  <script type="text/javascript">
+    var _gaq = _gaq || [];
+    _gaq.push(['_setAccount', '<?js= trackingID ?>']);
+    _gaq.push(['_trackPageview']);
+
+    (function() {
+      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+    })();
+  </script>
+<?js } else if (analyticsIntegration.provider === "plausible") {
+        const nakedDomain = analyticsIntegration.nakedDomain;
+
+        if (!nakedDomain)
+          throw new Error("For plausible analytics, provide template.integrations.analytics.nakedDomain");
+    ?>
+    <script async defer data-domain="<?js= nakedDomain ?>" src="https://plausible.io/js/plausible.js"></script>
+<?js } ?>