Add more instructions into the docs itself

Author: adriaandotcom

Gemfile.lock

@@ -211,6 +211,8 @@ GEM
       jekyll-seo-tag (~> 2.1)
     minitest (5.14.4)
     multipart-post (2.1.1)
+    nokogiri (1.11.2-arm64-darwin)
+      racc (~> 1.4)
     nokogiri (1.11.2-x86_64-darwin)
       racc (~> 1.4)
     octokit (4.20.0)
@@ -255,6 +257,7 @@ GEM
     zeitwerk (2.4.2)
 
 PLATFORMS
+  universal-darwin-21
   x86_64-darwin-19
   x86_64-darwin-20
 

_docs/20_script/04_install.md

@@ -7,7 +7,7 @@ permalink: /install-on-other-platforms
 
 ## Platform guides
 
-We try to make installing Simple Analytics as simple as possible. We want privacy to be accessible as possible. We don't require the need of a developer if you use any of the following tools.
+We try to make installing Simple Analytics as simple as possible. We want privacy to be accessible as possible. We don't require the need for a developer if you use any of the following tools.
 
 Read our guides on how to install Simple Analytics on:
 
@@ -25,19 +25,20 @@ Read our guides on how to install Simple Analytics on:
 
 ## Framework plugins
 
-For most frameworks you can just include the script. We track page views in a magic way so you don't have to change your app code. [Read on how we do that](/trigger-custom-page-views). For some we got requests to create a plugin for them.
+For most frameworks, you can include the script. We magically track page views, so you don't have to change your app code. [Read on how we do that](/trigger-custom-page-views). For some, we got requests to create a plugin for them.
 
 Get our official plugins for these frameworks:
 
-- [Ruby on Rails](https://rubygems.org/gems/simple_analytics_rails) <small>(source on [GitHub](https://github.com/simpleanalytics/rubyonrails-plugin#readme))</small>
-- [Gatsby](https://www.npmjs.com/package/gatsby-plugin-simple-analytics) <small>(source on [GitHub](https://github.com/simpleanalytics/gatsby-plugin#readme))</small>
-- [Vue](https://www.npmjs.com/package/simple-analytics-vue) <small>(source on [GitHub](https://github.com/simpleanalytics/vue-plugin#readme))</small>
-- [VuePress](https://www.npmjs.com/package/vuepress-plugin-simple-analytics) <small>(source on [GitHub](https://github.com/simpleanalytics/vuepress-plugin#readme))</small>
+- [React](/install-simple-analytics-with-react) <small>(guide only)</small>
+- [Ruby on Rails](/install-simple-analytics-with-ruby-on-rails) <small>(source on [GitHub](https://github.com/simpleanalytics/rubyonrails-plugin#readme))</small>
+- [Gatsby](/install-simple-analytics-with-gatsby) <small>(source on [GitHub](https://github.com/simpleanalytics/gatsby-plugin#readme))</small>
+- [Vue](/install-simple-analytics-with-vue) <small>(source on [GitHub](https://github.com/simpleanalytics/vue-plugin#readme))</small>
+- [VuePress](/install-simple-analytics-with-vuepress) <small>(source on [GitHub](https://github.com/simpleanalytics/vuepress-plugin#readme))</small>
 - [Nuxt.js](/install-simple-analytics-with-nuxt) <small>(guide only)</small>
-- [Gridsome](https://gridsome.org/plugins/gridsome-plugin-simple-analytics) <small>(source on [GitHub](https://github.com/simpleanalytics/gridsome-plugin#readme))</small>
-- [Django](https://pypi.org/project/simpleanalytics/) <small>(source on [GitHub](https://github.com/simpleanalytics/django-plugin#readme))</small>
+- [Gridsome](/install-simple-analytics-with-gridsome) <small>(source on [GitHub](https://github.com/simpleanalytics/gridsome-plugin#readme))</small>
+- [Django](/install-simple-analytics-with-django) <small>(source on [GitHub](https://github.com/simpleanalytics/django-plugin#readme))</small>
 - [Analytics library](/install-simple-analytics-via-analytics-package) <small>(source on [GitHub](https://github.com/DavidWells/analytics/tree/master/packages/analytics-plugin-simple-analytics))</small>
 - [Hugo](/install-simple-analytics-with-hugo) <small>(guide only)</small>
-- [Next.js](https://github.com/simpleanalytics/next-js-app) <small>(sample app only)</small>
+- [Next.js](/install-simple-analytics-with-next) <small>(guide only)</small>
 
 > Are you missing your favorite framework? [Let us know!](https://simpleanalytics.com/contact) Happy to create a plugin for you.

_docs/20_script/05_analytics.md

@@ -1,29 +1,28 @@
 ---
 title: Install Simple Analytics with the Analytics library
-menu: Install via `analytics`
 category: script
 hidden: true
 permalink: /install-simple-analytics-via-analytics-package
 ---
 
-You can install Simple Analytics using the open source Analytics library ([website](https://getanalytics.io), [npm](https://www.npmjs.com/package/analytics)). It's a pluggable library designed as an abstraction layer to easily customize the analytics requirements of your app.
+You can install Simple Analytics using the open-source Analytics library ([website](https://getanalytics.io), [npm](https://www.npmjs.com/package/analytics)). It's a pluggable library designed as an abstraction layer to customize your app's analytics requirements easily.
 
 ## Install via npm
 
-```
+```bash
 npm install analytics analytics-plugin-simple-analytics
 ```
 
 ## Using the Analytics library
 
-The Analytics library works with any frontend framework including `react`, `vue`, `angular` or static `html`.
+The Analytics library works with any frontend framework, including `react`, `vue`, `angular` or static `html`.
 
 To use it:
 
 1. Import the `analytics` library and `analytics-plugin-simple-analytics`
 2. Initialize the `analytics` library
 3. Page views get tracked automatically
-4. Include the non javascript fallback in your `html`
+4. Include the non-javascript fallback in your `html`
 
 Example code:
 
@@ -45,17 +44,18 @@ const analytics = Analytics({
 
 Make sure to include this file in the entry point of your application. This will ensure the Analytics library and Simple Analytics scripts load correctly.
 
-When the Analytics library initialized it will automatically load the simple analytics script onto the page.
+When the Analytics library is initialized it will automatically load the simple analytics script onto the page.
 
-For additional instructions on how to use with other frontend frameworks, checkout the [Analytics library docs](https://getanalytics.io/tutorial/getting-started/)
+For additional instructions on how to use with other frontend frameworks, check out the [Analytics library docs](https://getanalytics.io/tutorial/getting-started/)
 
-## Include Non JS enabled browser fallback
+## Include non-JS enabled browser fallback
 
-Remember to include the `noscript` image tag in your HTML for JS disabled browsers.
+Remember to include the `noscript` image tag in your HTML for JS-disabled browsers.
 
 Include this line at the end of your `<body>`
 
-```
+<!-- prettier-ignore -->
+```html
 <noscript><img src="https://queue.simpleanalyticscdn.com/noscript.gif" alt="" referrerpolicy="no-referrer-when-downgrade" /></noscript>
 ```
 

_docs/31_integrations/00_django.md

@@ -0,0 +1,86 @@
+---
+title: Install Simple Analytics with Django
+hidden: true
+category: integrations
+permalink: /install-simple-analytics-with-django
+---
+
+Install the plugin:
+
+```bash
+pip install simpleanalytics
+```
+
+## Using it
+
+Add the package to the `INSTALLED_APPS`:
+
+```python
+INSTALLED_APPS = [
+   ...,
+   simpleanalytics,
+]
+```
+
+Next use the `templatetag` in your template:
+
+```html
+<!DOCTYPE html>
+\{\% load static simpleanalytics_tags %}
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>\{\% block page_title %}\{{ site.name }}\{\% endblock %}</title>
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=no"
+    />
+    ... \{\% simpleanalytics_sync %} ...
+  </head>
+  <body>
+    \{\% simpleanalytics_noscript_block %}
+  </body>
+</html>
+```
+
+This will translate to roughly this:
+
+```
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>example.com</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    ...
+    <script type="text/javascript" src="https://cdn.simpleanalytics.io/hello.js"></script>
+    ...
+    </head>
+    <body>
+      <noscript><img src="https://api.simpleanalytics.io/hello.gif" alt="hello"></noscript>
+    </body>
+</html>
+```
+
+## Template tags
+
+This app has four template tags:
+
+- `simpleanalytics_sync`
+- `simpleanalytics_async`
+- `simpleanalytics_noscript_block`
+- `simpleanalytics_noscript_img`
+
+`simpleanalytics_sync` converts to a plain `<script>` tag without the `async`
+keyword.
+
+`simpleanalytics_async` converts to a plain `<script>` tag with the `async`
+keyword.
+
+`simpleanalytics_noscript_block` converts to an `<noscript>` block, which
+includes an `img` element that is used to load the image. Use this when you
+don't have and don't need a `<noscript>` block on your page at all.
+
+`simpleanalytics_noscript_img` converts to an `<img>` tag which src points to
+the hello.img. Use this when you're using a `<noscript>` block, and you want to
+add privacy-friendly stats to your page.

_docs/31_integrations/00_gatsby.md

@@ -0,0 +1,73 @@
+---
+title: Install Simple Analytics with Gatsby
+hidden: true
+category: integrations
+permalink: /install-simple-analytics-with-gatsby
+---
+
+Run the following command:
+
+```bash
+npm install gatsby-plugin-simple-analytics --save-dev
+```
+
+## What does it do
+
+It tracks page views with support for `pushState` navigation. It sends the data to [Simple Analytics](https://simpleanalytics.com) and it will be available in your dashboard. You need to have a paid subscription for it to work.
+
+## How to use
+
+1. Add our plugin to `gatsby-config.js`
+
+   ```js
+   plugins: [
+     {
+       resolve: "gatsby-plugin-simple-analytics",
+       options: {
+         trackPageViews: true,
+       },
+     },
+   ];
+   ```
+
+1. If you want to set a custom domain, use this config:
+
+   ```js
+   plugins: [
+     {
+       resolve: "gatsby-plugin-simple-analytics",
+       options: {
+         domain: "custom.example.com",
+         eventsGlobal: "sa",
+         events: true,
+         trackPageViews: true,
+         ignorePages: ["pathname"],
+       },
+     },
+   ];
+   ```
+
+   [Read our docs](https://docs.simpleanalytics.com/bypass-ad-blockers) on the custom domain feature.
+
+## Use with Confirmic
+
+[Confirmic](https://confirmic.com/) provides a privacy-by-design API to ethically manage your users' data. It's pretty cool.
+
+If you want to use it with Confirmic's `data-micropolicy` use this config:
+
+```js
+plugins: [
+  {
+    resolve: "gatsby-plugin-simple-analytics",
+    options: {
+      metomic: "POLICY-SLUG",
+    },
+  },
+];
+```
+
+It will result in something like this:
+
+```html
+<script src="https://scripts.simpleanalyticscdn.com/latest.js" async="" defer="" type="text/x-metomic" data-micropolicy="POLICY-SLUG">
+```

_docs/31_integrations/00_gridsome.md

@@ -0,0 +1,41 @@
+---
+title: Install Simple Analytics with Gridsome
+hidden: true
+category: integrations
+permalink: /install-simple-analytics-with-gridsome
+---
+
+Install our Gridsome package:
+
+```bash
+npm install gridsome-plugin-simple-analytics
+```
+
+### Usage
+
+```js
+module.exports = {
+  plugins: [
+    {
+      use: "gridsome-plugin-simple-analytics",
+    },
+  ],
+};
+```
+
+### Bypass Ad Blockers
+
+You can also optionally specify a custom domain to bypass ad blockers. Read more about this in [our documentation](https://docs.simpleanalytics.com/bypass-ad-blockers).
+
+```js
+module.exports = {
+  plugins: [
+    {
+      use: "gridsome-plugin-simple-analytics",
+      options: {
+        domain: "api.example.com",
+      },
+    },
+  ],
+};
+```

_docs/31_integrations/00_hugo.md

@@ -1,6 +1,5 @@
 ---
 title: Install Simple Analytics with Hugo
-menu: Hugo
 hidden: true
 category: integrations
 permalink: /install-simple-analytics-with-hugo

_docs/31_integrations/00_jimdo.md

@@ -1,6 +1,5 @@
 ---
 title: Install Simple Analytics on Jimdo Creator
-menu: Jimdo Creator
 hidden: true
 category: integrations
 permalink: /install-simple-analytics-on-jimdo-creator

_docs/31_integrations/00_mailerlite.md

@@ -1,6 +1,5 @@
 ---
 title: Install Simple Analytics on MailerLite
-menu: MailerLite
 hidden: true
 category: integrations
 permalink: /install-simple-analytics-on-mailerlite

_docs/31_integrations/00_next.md

@@ -0,0 +1,40 @@
+---
+title: Install Simple Analytics with Next
+hidden: true
+category: integrations
+permalink: /install-simple-analytics-with-next
+---
+
+Next has a lovely [Script component](https://nextjs.org/docs/basic-features/script).
+
+In your app, you can add this Script component:
+
+```js
+// _app.tsx
+import type { AppProps } from "next/app";
+import React from "react";
+import Script from "next/script";
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <React.Fragment>
+      <Component {...pageProps} />
+      <Script src="https://scripts.simpleanalyticscdn.com/latest.js" />
+      <noscript>
+        {/* eslint-disable @next/next/no-img-element */}
+        <img
+          src="https://queue.simpleanalyticscdn.com/noscript.gif"
+          alt=""
+          referrerPolicy="no-referrer-when-downgrade"
+        />
+      </noscript>
+    </React.Fragment>
+  );
+}
+
+export default MyApp;
+```
+
+It will use the `afterInteractive` strategy to load the script. From the docs:
+
+> For scripts that can fetch and execute after the page is interactive, such as tag managers and analytics. These scripts are injected on the client-side and will run after hydration.