FeaturesAnalytics

• Create a new site on Plausible
• (optional) Some adblockers block Plausible. To fix this, proxy the script
  First, create and add this to /proxy.conf.json:

  proxy.conf.json

  {
    "/plausible/js/script.js": {
      "target": "https://plausible.io",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/plausible/js/script.js": "/js/script.js"
      }
    },
    "/plausible/api/event": {
      "target": "https://plausible.io",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": {
        "^/plausible/api/event": "/api/event"
      }
    }
  }
  

  Update the angular.json file: Update your angular.json file to include the proxy configuration when running your development server. Add the proxyConfig option to the serve target:

  angular.json

  {
    "projects": {
      "your-app-name": {
        "architect": {
          "serve": {
            "options": {
              "proxyConfig": "proxy.conf.json"
            }
          }
        }
      }
    }
  }
  

  Reference the proxied scripts in your Angular application: Update your Angular application to use the proxied URLs. You can add the script tag in your index.html file:

  index.html

  ...
    <script async defer data-domain="yourdomain.com" src="/plausible/js/script.js"></script>
  ...
  

  Deploying: When you build your Angular application for production, the proxy configuration will not be used directly. You might need to set up similar proxy rules on your server (e.g., Nginx, Apache) to ensure that the Plausible scripts and API calls are proxied correctly. For example, if you are using Nginx, you can set up the following configuration:

  nginx.conf

  server {
      listen 80;
      server_name yourdomain.com;
  
      location / {
          try_files $uri $uri/ /index.html;
      }
  
      location /plausible/js/script.js {
          proxy_pass https://plausible.io/js/script.js;
          proxy_set_header Host plausible.io;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  
      location /plausible/api/event {
          proxy_pass https://plausible.io/api/event;
          proxy_set_header Host plausible.io;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
      }
  }
  
  

  3. (Feel free to skip straight to this if you do not have ad blocker issues) Then replace the Plausible script in the head ofindex.html file:

  <script
      defer
      data-domain="YOUR_DOMAIN"
      data-api="/plausible/api/event"
      src="/plausible/js/script.js"
    ></script>

I use Plausible for traffic analytics & custom events. If you want to use another tool, remove the Plausible script in the index.html file.