How to integrate fullres with your Substack publication for better analytics

Learn how to effortlessly connect fullres with your Substack publication to unlock detailed analytics and enhance your audience insights.

fullres is a powerful and lightweight analytics tool designed to help you gain deeper insights into your website's performance and audience engagement. Unlike traditional analytics platforms, fullres offers easy integration, real-time data tracking, and customizable event tracking, making it an ideal choice for publishers who want to optimize their content strategy. Whether you’re running a blog, a newsletter, or any other online publication, fullres provides the tools you need to understand your audience better and make data-driven decisions.

In this guide, we’ll walk you through the steps to integrate fullres with your Substack publication, allowing you to leverage its full potential seamlessly.

For this demo you will need three things:

1. A fullres account.

2. A Substack account that is utilizing a custom domain.

3. A Cloudflare account for DNS.

We will be utilizing Cloudflare’s DNS Proxy and Workers features to inject the fullres tag onto your Substack domain and seamlessly add some additional fullres features.

Step 1: Set Up Cloudflare Worker

1. Log in to Cloudflare: Go to your Cloudflare dashboard.

2. Navigate to Workers: Click on the Workers section.

3. Create a New Worker: Click on "Create a Worker" and name it (e.g., `substack-fullres-injector`).

Step 2: Inject Metadata Logging Script

Use the following Cloudflare Worker script to inject the custom metadata logging script into your Substack blog:

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const response = await fetch(request)
  const contentType = response.headers.get('content-type') || ''

  if (contentType.includes('text/html')) {
    let body = await response.text()

    // Inject the fullres script
    const fullresScript = `
      <script>
        (function(){
          var fullres = document.createElement('script');
          fullres.async = true;
          fullres.src = 'https://t.fullres.net/[YOUR_FULLRES_SITE_KEY].js?'+(new Date()-new Date()%43200000);
          document.head.appendChild(fullres);
        })();
      </script>
    `

    // Inject the event tracking and metadata script
    const eventScript = `
      <script>
        window.fullres ||= { events: [], metadata: {} };

        document.addEventListener('DOMContentLoaded', function() {
          // Extract post author metadata
          const authorLink = document.querySelector('.profile-hover-card-target a[href*="@"]');
          if (authorLink) {
            const authorHref = authorLink.getAttribute('href');
            window.fullres.metadata.postAuthor = authorHref ? authorHref.split('@')[1] : 'null';
          }

          // Determine if the user is logged in
          const signInLink = document.querySelector('.topbar .navbar-buttons [data-href*="sign-in"]');
          window.fullres.metadata.isLoggedIn = signInLink ? 'false' : 'true';

          // Check for subscription confirmation URL pattern
          const params = new URLSearchParams(window.location.search);
          if (window.location.pathname === '/subscribe' &&
              params.get('utm_source') === 'confirmation_email' &&
              params.get('just_signed_up') === 'true') {
            window.fullres.events.push({ key: 'email_subscription_confirmation' });
          }

          // Track button clicks
          const buttons = [
            { selector: '.navbar-buttons [data-testid="noncontributor-cta-button"]', key: 'subscribe_button_click', label: 'top_right_navbar_button' },
            { selector: '.end-cta-container .subscribe-btn', key: 'subscribe_button_click', label: 'end_of_post_cta_button' },
            { selector: '.subscribe-footer .subscribe-btn', key: 'subscribe_button_click', 'footer_subscribe_form'},
            { selector: '.subscription-widget-wrap:first-of-type .subscribe-btn', key: 'subscribe_button_click', 'beginning_of_post_subscribe_form'},
            { selector: '.subscribe-footer .subscribe-btn', key: 'subscribe_button_click', 'end_of_post_subscribe_form'},
            { selector: '.post-footer .like-button-container a:not(.state-liked)', key: 'post_like_click', label: 'end_of_post'},
            { selector: '.like-button-container.post-ufi-button a:not(.state-liked)', key: 'post_like_click', label: 'beginning_of_post'},
            { selector: '.pencraft .like-button-container a:not(.state-liked)', key: 'post_like_click', label: 'list_of_posts'},
          ];
          buttons.forEach(({ selector, key, label }) => {
            const button = document.querySelector(selector);
            if (button) {
              button.addEventListener('click', function() {
                window.fullres.events.push({ key: key, properties: { button: label } });
              });
            }
          });
        });
      </script>
    `

    body = body.replace('</body>', `${fullresScript}${eventScript}</body>`)
    return new Response(body, {
      headers: response.headers
    })
  }

  return response
}

Step 3: Deploy the Worker

1. Save and Deploy: Save the Worker script and deploy it.

2. Set Up a Route: Go to the Workers tab, click on "Add route," and enter the route pattern for your Substack custom domain (e.g., `blog.yourdomain.com/*`). Select the Worker you just created.

Step 4: Verify the Integration

1. Test the Integration: Visit your Substack blog at the custom domain (e.g., `blog.yourdomain.com`). Go to your fullres dashboard where stats should start to appear within a couple minutes.