Web Analyzer App / Docs

Getting Started

Platform Installation Guides

Detailed instructions for installing the Web Analyzer App tracking snippet on every major website platform, framework, and CMS.

The tracking snippet

Every platform guide below uses the same two-part snippet. Copy it from your website detail page in the dashboard, or use the template below and replace YOUR_TRACKING_KEY with the key shown on your site settings page.

Web Analyzer App tracking snippet

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"></script>
Tip: The tracker is approximately 2 KB gzipped and loads asynchronously, so it will never block your page rendering.

1. HTML / Static Sites

The simplest integration. Paste the tracking snippet directly into your HTML file.

Steps

  1. Open the HTML file for your page (e.g. index.html).
  2. Locate the <head> section.
  3. Paste the tracking snippet just before the closing </head> tag.
  4. Repeat for every HTML file, or use a shared header include.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>

    <!-- Web Analyzer App -->
    <script>
      window.wa_key = 'YOUR_TRACKING_KEY';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
</head>
<body>
    ...
</body>
</html>
Verification: Open your page in a browser, open DevTools (F12), go to the Network tab, and search for t.js. You should see a 200 response. Then check your Web Analyzer App dashboard for incoming data.

2. WordPress

There are three ways to add the tracker to WordPress. Choose whichever method you are most comfortable with.

Option A: functions.php (recommended)

  1. In your WordPress admin, go to Appearance → Theme File Editor.
  2. Select functions.php from the file list on the right.
  3. Add the following code at the bottom of the file.
  4. Click Update File.

functions.php

function webanalyzer_tracking_snippet() {
    ?>
    <script>
      window.wa_key = 'YOUR_TRACKING_KEY';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
    <?php
}
add_action('wp_head', 'webanalyzer_tracking_snippet');

Option B: header.php

  1. Go to Appearance → Theme File Editor.
  2. Open header.php.
  3. Paste the tracking snippet just before the closing </head> tag.
  4. Click Update File.

Option C: Plugin (Insert Headers and Footers)

  1. Install and activate the Insert Headers and Footers plugin (by WPCode).
  2. Go to Code Snippets → Header & Footer.
  3. Paste the tracking snippet into the Header section.
  4. Click Save Changes.
Verification: Visit your WordPress site in an incognito window, open DevTools, and confirm t.js loads with a 200 status. Check the Web Analyzer App dashboard within a minute or two for your first session.

3. Shopify

Add the tracker to your Shopify store via the theme editor.

Steps

  1. In your Shopify admin, go to Online Store → Themes.
  2. Click the ... button on your current theme and select Edit code.
  3. In the Layout folder, open theme.liquid.
  4. Find the </head> tag.
  5. Paste the tracking snippet immediately before </head>.
  6. Click Save.

theme.liquid (inside <head>)

    ...
    {{ content_for_header }}

    <!-- Web Analyzer App -->
    <script>
      window.wa_key = 'YOUR_TRACKING_KEY';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
</head>
Verification: Visit your live storefront, open DevTools, and confirm t.js is loaded. Browse a few pages and check your Web Analyzer App dashboard.

4. Wix

Wix allows custom code injection via site settings. A Wix Premium plan is required to add custom code.

Steps

  1. In your Wix dashboard, go to Settings → Custom Code (under Advanced).
  2. Click + Add Custom Code.
  3. Paste the tracking snippet into the code box.
  4. Set Name to "Web Analyzer App".
  5. Under Add Code to Pages, select All pages.
  6. Under Place Code in, select Head.
  7. Click Apply.

Wix Custom Code

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"></script>
Verification: Publish your site, then visit it in an incognito browser. Open DevTools and check the Network tab for t.js. Note that custom code does not run in Wix preview mode — you must publish first.

5. Squarespace

Squarespace supports code injection on Business plans and higher.

Steps

  1. In your Squarespace admin, go to Settings → Advanced → Code Injection.
  2. In the Header field, paste the tracking snippet.
  3. Click Save.

Squarespace Code Injection — Header

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"></script>
Verification: Visit your live Squarespace site, open DevTools (F12), and search for webanalyzer in the page source. Confirm the script loads successfully.

6. Webflow

Webflow supports custom code in project settings for all paid site plans.

Steps

  1. Open your project in the Webflow Designer.
  2. Go to Project Settings (gear icon in the left sidebar).
  3. Click the Custom Code tab.
  4. In the Head Code section, paste the tracking snippet.
  5. Click Save Changes.
  6. Publish your site for the changes to take effect.

Webflow Project Settings → Custom Code → Head Code

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"></script>
Verification: After publishing, visit your Webflow site and open DevTools. Check the Network tab for a successful t.js request. Custom code does not run in the Webflow Designer preview.

7. Ghost

Ghost has a built-in code injection feature available on all plans.

Steps

  1. Log in to your Ghost admin panel.
  2. Go to Settings → Code injection.
  3. In the Site Header field, paste the tracking snippet.
  4. Click Save.

Ghost → Settings → Code injection → Site Header

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"></script>
Verification: Visit your Ghost blog in a new browser tab. Open DevTools and verify t.js is fetched. Navigate between posts to confirm multiple page views are recorded.

8. Next.js

Next.js provides the next/script component for loading third-party scripts efficiently.

Option A: App Router (app/layout.js)

  1. Open your root layout file at app/layout.js (or app/layout.tsx).
  2. Import the Script component from next/script.
  3. Add the tracker scripts inside the <body> tag.

app/layout.js (App Router)

import Script from 'next/script';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}

        <Script id="webanalyzer-config" strategy="afterInteractive">
          {`window.wa_key = 'YOUR_TRACKING_KEY';
            window.wa_auto = true;`}
        </Script>
        <Script
          src="https://webanalyzerapp.com/t.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Option B: Pages Router (_app.js)

  1. Open pages/_app.js (or pages/_app.tsx).
  2. Import Script from next/script.
  3. Add the tracker scripts after the <Component> element.

pages/_app.js (Pages Router)

import Script from 'next/script';

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />

      <Script id="webanalyzer-config" strategy="afterInteractive">
        {`window.wa_key = 'YOUR_TRACKING_KEY';
          window.wa_auto = true;`}
      </Script>
      <Script
        src="https://webanalyzerapp.com/t.js"
        strategy="afterInteractive"
      />
    </>
  );
}
Verification: Run your Next.js app locally with npm run dev, open your browser, and check the Network tab in DevTools for the t.js request. The tracker automatically handles SPA route changes in Next.js.

9. React (CRA / Vite)

For React apps created with Create React App or Vite, you can add the snippet to your HTML template or load it programmatically.

Option A: index.html (simplest)

  1. Open public/index.html (CRA) or index.html (Vite).
  2. Paste the tracking snippet inside the <head> section.
  3. Save the file.

index.html

<head>
    <meta charset="UTF-8" />
    <title>My React App</title>

    <!-- Web Analyzer App -->
    <script>
      window.wa_key = 'YOUR_TRACKING_KEY';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
</head>

Option B: useEffect hook

If you prefer to load the tracker from within your React code:

App.jsx

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    window.wa_key = 'YOUR_TRACKING_KEY';
    window.wa_auto = true;

    const script = document.createElement('script');
    script.src = 'https://webanalyzerapp.com/t.js';
    script.async = true;
    document.head.appendChild(script);
  }, []);

  return (
    <div>{/* Your app */}</div>
  );
}

export default App;
Verification: Start your dev server, navigate to your app, and check the Network tab for t.js. The tracker automatically detects pushState and popstate events for SPA navigation.

10. Vue.js

Add the tracker to your Vue.js application through the HTML template or the root component.

Option A: index.html (simplest)

  1. Open index.html in your project root (Vite) or public/index.html (Vue CLI).
  2. Add the tracking snippet inside the <head> section.
  3. Save the file.

index.html

<head>
    <meta charset="UTF-8" />
    <title>My Vue App</title>

    <!-- Web Analyzer App -->
    <script>
      window.wa_key = 'YOUR_TRACKING_KEY';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
</head>

Option B: App.vue mounted hook

Load the tracker programmatically from your root component:

App.vue

<script>
export default {
  mounted() {
    window.wa_key = 'YOUR_TRACKING_KEY';
    window.wa_auto = true;

    const script = document.createElement('script');
    script.src = 'https://webanalyzerapp.com/t.js';
    script.async = true;
    document.head.appendChild(script);
  }
};
</script>

<template>
  <div id="app">
    <router-view />
  </div>
</template>
Verification: Start your Vue dev server, open DevTools, and confirm t.js loads. Navigate between routes and verify that new page views appear in your Web Analyzer App dashboard.

11. Laravel

Add the tracker to your Laravel Blade layout file so it loads on every page.

Steps

  1. Open your main layout file (e.g. resources/views/layouts/app.blade.php).
  2. Locate the <head> section.
  3. Paste the tracking snippet before the closing </head> tag.
  4. Optionally, use an environment variable for the tracking key.

resources/views/layouts/app.blade.php

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ config('app.name') }}</title>

    <!-- Web Analyzer App -->
    <script>
      window.wa_key = '';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
</head>

config/services.php (optional)

'webanalyzer' => [
    'key' => env('WEBANALYZER_KEY'),
],

.env

WEBANALYZER_KEY=your_tracking_key_here
Verification: Run php artisan serve, visit your app, and check DevTools for the tracker script. Using an env variable keeps your tracking key out of version control.

12. PHP

For plain PHP sites, add the tracker to your shared header template or include file.

Steps

  1. Open your header template file (e.g. header.php or includes/head.php).
  2. Paste the tracking snippet inside the <head> section.
  3. Ensure this header is included on every page via include or require.

includes/head.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?php echo $pageTitle; ?></title>

    <!-- Web Analyzer App -->
    <script>
      window.wa_key = 'YOUR_TRACKING_KEY';
      window.wa_auto = true;
    </script>
    <script async src="https://webanalyzerapp.com/t.js"></script>
</head>

page.php (using the shared header)

<?php
$pageTitle = 'My Page';
require_once 'includes/head.php';
?>

<body>
    <h1>Welcome</h1>
    <!-- page content -->
</body>
</html>
Verification: Load any page that includes the header file, open DevTools, and confirm t.js is loaded. Check your Web Analyzer App dashboard for the incoming session data.

13. Google Tag Manager

If you already use Google Tag Manager, you can deploy the tracker without touching your site code.

Steps

  1. Log in to Google Tag Manager.
  2. Select your container and click Tags → New.
  3. Name the tag "Web Analyzer App".
  4. Click Tag Configuration and choose Custom HTML.
  5. Paste the tracking snippet into the HTML field (see below).
  6. Click Triggering and select All Pages.
  7. Click Save, then Submit and Publish your container.

GTM Custom HTML Tag

<script>
  window.wa_key = 'YOUR_TRACKING_KEY';
  window.wa_auto = true;
</script>
<script async src="https://webanalyzerapp.com/t.js"></script>
Tip: Use GTM's Preview mode to test the tag before publishing. You should see the "Web Analyzer App" tag fire on page load. Once confirmed, publish the container to make it live.
Verification: After publishing, visit your site, open DevTools, and search for t.js in the Network tab. You can also use the GTM debugger to confirm the tag fires correctly on every page.
Setup Guide Tracker Reference

Help & FAQ

Find answers instantly

Full FAQ Contact us