Skip to main content

​
Google Analytics Plugin

The Google Analytics plugin allows you to integrate Google Analytics tracking into your Scully-generated static site using the Global Site Tag (gtag) method.

​
Overview

  • Type: Post-Render Plugin
  • Function: Injects Google Analytics tracking script into HTML
  • Method: Global Site Tag (analytics.js)

​
Installation

Install the plugin as a dev dependency: 
npm install -D @scullyio/scully-plugin-google-analytics

​
Configuration

Configure the plugin in your Scully configuration file: 
// scully.<project-name>.config.ts
import { setPluginConfig, ScullyConfig, prod } from '@scullyio/scully';
import { GoogleAnalytics } from '@scullyio/scully-plugin-google-analytics';

const defaultPostRenderers = [];

if (prod) {
  setPluginConfig(GoogleAnalytics, { 
    globalSiteTag: 'UA-XXXXXXXXX-X' 
  });
  defaultPostRenderers.push(GoogleAnalytics);
}

export const config: ScullyConfig = {
  projectRoot: './src',
  projectName: 'my-app',
  outDir: './dist/static',
  defaultPostRenderers,
  routes: {}
};

​
Usage

​
Basic Setup

  1. Get your Google Analytics tracking ID from the Google Analytics Dashboard
  2. Configure the plugin with your tracking ID
  3. Run Scully in production mode
# Build your app
npx ng build --configuration production

# Run Scully in production mode
npx scully --prod

​
Production-Only Tracking

It’s recommended to only include Google Analytics in production builds: 
import { prod } from '@scullyio/scully';

if (prod) {
  setPluginConfig(GoogleAnalytics, { 
    globalSiteTag: 'UA-XXXXXXXXX-X' 
  });
  defaultPostRenderers.push(GoogleAnalytics);
}

​
Route-Specific Configuration

Apply the plugin to specific routes: 
export const config: ScullyConfig = {
  routes: {
    '/': {
      type: 'default',
      postRenderers: [GoogleAnalytics]
    },
    '/blog/:slug': {
      type: 'contentFolder',
      slug: {
        folder: './blog'
      },
      postRenderers: [GoogleAnalytics]
    }
  }
};

​
Configuration Options

​
globalSiteTag (required)

Your Google Analytics tracking ID. 
setPluginConfig(GoogleAnalytics, { 
  globalSiteTag: 'UA-XXXXXXXXX-X' 
});
You can find this in your Google Analytics account:
  1. Go to Admin > Property > Tracking Info > Tracking Code
  2. Copy the Tracking ID (format: UA-XXXXXXXXX-X)

​
How It Works

The plugin injects the following script into the <head> section of each rendered HTML page: 
<!-- Google Analytics -->
<script sk>
  window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
  ga('create', 'UA-XXXXXXXXX-X', 'auto');
  ga('send', 'pageview');
</script>
<script sk async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->
The sk attribute prevents Scully from removing the script during the build process.

​
Environment Variables

For security, use environment variables for your tracking ID: 
// scully.<project-name>.config.ts
import { setPluginConfig, ScullyConfig, prod } from '@scullyio/scully';
import { GoogleAnalytics } from '@scullyio/scully-plugin-google-analytics';

const defaultPostRenderers = [];

if (prod) {
  setPluginConfig(GoogleAnalytics, { 
    globalSiteTag: process.env.GA_TRACKING_ID || 'UA-XXXXXXXXX-X'
  });
  defaultPostRenderers.push(GoogleAnalytics);
}

export const config: ScullyConfig = {
  defaultPostRenderers,
  routes: {}
};
Then set the environment variable: 
export GA_TRACKING_ID=UA-XXXXXXXXX-X
npx scully --prod

​
Verification

After building your site with Scully:
  1. Open a generated HTML file from the dist/static directory
  2. Verify the Google Analytics script is present in the <head> section
  3. Deploy your site and check the Google Analytics Real-Time reports to confirm tracking is working

​
Testing

To test the plugin without waiting for real traffic:
  1. Build and serve your static site: 
    npx scully serve
  2. Open your site in a browser
  3. Check the Google Analytics Real-Time view
  4. You should see your visit tracked

​
Migrating to GA4

This plugin uses Universal Analytics (analytics.js). For Google Analytics 4 (GA4), you may need to:
  1. Create a custom plugin using the gtag.js format
  2. Or manually add the GA4 tracking code to your Angular app’s index.html
Example GA4 configuration: 
// Custom GA4 plugin (you'll need to create this)
const GA4Plugin = async (html: string): Promise<string> => {
  const ga4Script = `
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    </script>
  `;
  return html.replace(/<\/head/i, `${ga4Script}</head`);
};

​
Troubleshooting

​
Scripts Removed from HTML

If Google Analytics scripts are missing from the output:
  1. Ensure you’re running Scully in production mode (--prod)
  2. Check that the plugin is in the defaultPostRenderers or route-specific postRenderers
  3. Verify the sk attribute is present on the script tags

​
No Tracking Data

  1. Verify your tracking ID is correct
  2. Check browser console for errors
  3. Confirm you’re not blocking analytics with ad blockers
  4. Review Google Analytics Real-Time reports

​
Multiple Tracking Scripts

If you have analytics in both your Angular app and Scully:
  1. Remove analytics from your Angular index.html
  2. Let Scully inject it via this plugin
  3. Or configure analytics only in your Angular app and skip this plugin

​
Repository

  • Package: @scullyio/scully-plugin-google-analytics
  • Repository: GitHub
  • Author: Israel Guzman

​
See Also

Build docs developers (and LLMs) love

Get started for freeTalk to us