Install Google Analytics 4 on Strikingly | OpsBlu Docs

Install Google Analytics 4 on Strikingly

How to install GA4 on Strikingly using custom code injection and configure tracking for one-page sites.

Strikingly requires manual code injection to add Google Analytics 4. This guide covers direct GA4 implementation and the recommended GTM approach.

Prerequisites

Before you begin:

  • Strikingly Plan: Limited, Pro, or VIP plan (custom code access required)
  • GA4 Property: Created in Google Analytics with Measurement ID (G-XXXXXXXXXX)
  • Site Access: Admin access to your Strikingly site settings

Note: Free plan users cannot add custom code and must upgrade to use GA4.

Method Comparison

Method Difficulty Flexibility Recommended For
Direct GA4 Code Easy Low Basic page view tracking
Google Tag Manager Medium High Most sites (recommended)

Method 1: Direct GA4 Implementation

Add GA4 directly to your Strikingly site for basic tracking.

Step 1: Get Your Measurement ID

  1. Log in to Google Analytics
  2. Select your GA4 property
  3. Go to Admin → Data Streams
  4. Select your web data stream
  5. Copy your Measurement ID (format: G-XXXXXXXXXX)

Step 2: Access Strikingly Custom Code

  1. Log in to your Strikingly dashboard
  2. Select your site
  3. Click Settings in the left sidebar
  4. Scroll to Advanced section
  5. Find Custom Code settings

Step 3: Add GA4 Code to Header

In the Header Code field, add:

<!-- Google Analytics 4 -->
<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', {
    'send_page_view': true,
    'page_title': document.title
  });
</script>

Replace G-XXXXXXXXXX with your actual Measurement ID.

Step 4: Save and Publish

  1. Click Save in the Custom Code section
  2. Return to your site editor
  3. Click Publish in the top right
  4. Wait 30-60 seconds for changes to propagate

Step 5: Verify Installation

Real-time Verification:

  1. Open Google Analytics
  2. Go to Reports → Realtime
  3. Visit your Strikingly site in another tab
  4. You should see yourself as an active user within 30 seconds

Debug Mode: Add debug mode temporarily to see detailed data:

gtag('config', 'G-XXXXXXXXXX', {
  'debug_mode': true
});

Then check Admin → DebugView in GA4.

What Gets Tracked (Basic Implementation)

Automatic Events:

  • page_view - When someone visits your site
  • first_visit - First time visitor
  • session_start - New session begins
  • user_engagement - User is actively engaged

Automatic Parameters:

  • Page URL
  • Page title
  • Referrer
  • User language
  • Screen resolution
  • Device category

NOT Automatically Tracked:

  • Section scrolling on one-page sites
  • Button clicks
  • Form submissions
  • Outbound link clicks
  • File downloads
  • Video plays

See GA4 Event Tracking for custom event implementation.

GTM provides more flexibility and easier management of tracking codes.

Why Use GTM for Strikingly?

  • Easier updates: Change tracking without republishing site
  • Multiple tags: Manage GA4, Meta Pixel, and more in one place
  • Custom events: Easier to implement advanced tracking
  • Testing: Preview mode to verify before publishing
  • Non-technical updates: Marketers can update tags without code access

Setup Steps

  1. Install GTM on Strikingly

    See Install Google Tag Manager for complete GTM installation.

  2. Create GA4 Configuration Tag

    Once GTM is installed on your Strikingly site:

    a. In GTM, go to Tags → New

    b. Click Tag Configuration

    c. Select Google Analytics: GA4 Configuration

    d. Enter your Measurement ID (G-XXXXXXXXXX)

    e. Configure settings (optional):

    • Add custom parameters
    • Enable debug mode for testing

    f. Triggering: Select All Pages

    g. Save and name it "GA4 - Configuration"

  3. Publish GTM Container

    • Click Submit in GTM
    • Add version name: "Initial GA4 setup"
    • Click Publish

  4. Verify in GTM Preview Mode

    • Click Preview in GTM
    • Enter your Strikingly site URL
    • Verify GA4 Configuration tag fires
    • Check for errors in console

  5. Verify in GA4

    • Open GA4 Realtime reports
    • Visit your site
    • Confirm traffic appears

Strikingly One-Page Site Configuration

Since many Strikingly sites are single-page, configure GA4 for better tracking:

Enhanced Measurement Settings

In GA4, enable Enhanced Measurement for automatic event tracking:

  1. Go to Admin → Data Streams
  2. Click your web data stream
  3. Toggle on Enhanced measurement
  4. Enable these events:
    • Page views (on by default)
    • Scrolls (tracks 90% scroll depth)
    • Outbound clicks (external links)
    • Site search (if applicable)
    • Video engagement (if using YouTube)
    • File downloads

Virtual Page Views for Sections

For one-page Strikingly sites, track section views as virtual page views:

// Add to Header Code (after GA4 initialization)
document.addEventListener('DOMContentLoaded', function() {
  // Track section visibility
  const sections = document.querySelectorAll('section[data-title]');

  const observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        const sectionTitle = entry.target.getAttribute('data-title');

        // Send virtual page view
        gtag('event', 'page_view', {
          page_title: sectionTitle,
          page_location: window.location.href + '#' + entry.target.id
        });
      }
    });
  }, { threshold: 0.5 }); // Fires when 50% of section is visible

  sections.forEach(function(section) {
    observer.observe(section);
  });
});

Note: This requires adding data-title attributes to your sections or using section IDs.

User Properties and Custom Dimensions

Enhance GA4 data with Strikingly-specific information:

Template Type

Track which Strikingly template the site uses:

gtag('config', 'G-XXXXXXXXXX', {
  'custom_map': {
    'dimension1': 'template_name'
  }
});

// Set the template (requires identifying template manually)
gtag('event', 'page_view', {
  'template_name': 'startup' // Or whatever template you're using
});

Site Type

Identify site purpose:

gtag('set', 'user_properties', {
  'site_type': 'portfolio', // or 'business', 'store', 'blog'
  'strikingly_plan': 'pro' // track your plan level
});

Strikingly Simple Store Tracking

If using Strikingly's e-commerce features:

Basic E-commerce Setup

// Add after GA4 configuration
gtag('config', 'G-XXXXXXXXXX', {
  'currency': 'USD', // Or your currency
  'send_page_view': true
});

Product Views

Track when users view products:

// Add click handlers to product elements
document.querySelectorAll('.product-item').forEach(function(item) {
  item.addEventListener('click', function() {
    gtag('event', 'view_item', {
      currency: 'USD',
      value: parseFloat(item.dataset.price),
      items: [{
        item_id: item.dataset.id,
        item_name: item.dataset.name,
        price: parseFloat(item.dataset.price)
      }]
    });
  });
});

Note: This requires custom code to access product data. See GA4 Event Tracking for detailed e-commerce implementation.

Strikingly doesn't have built-in consent management, so implement your own:

// Add BEFORE GA4 initialization
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

// Set default consent state
gtag('consent', 'default', {
  'analytics_storage': 'denied',
  'ad_storage': 'denied'
});

// Initialize GA4
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');

// Update consent when user accepts
function grantConsent() {
  gtag('consent', 'update', {
    'analytics_storage': 'granted',
    'ad_storage': 'granted'
  });
}

// Check for consent before tracking
if (localStorage.getItem('analyticsConsent') === 'true') {
  // Initialize GA4
  gtag('config', 'G-XXXXXXXXXX');
} else {
  // Show consent banner and wait
  showConsentBanner();
}

Troubleshooting

GA4 Not Showing Data

Check 1: Code Location

  • Ensure code is in Header Code, not Footer
  • Verify you clicked Save in Custom Code settings
  • Confirm you Published the site after adding code

Check 2: Measurement ID

  • Verify Measurement ID is correct (starts with G-)
  • Copy directly from GA4 to avoid typos
  • Check no extra spaces or characters

Check 3: Browser Console

  • Open browser DevTools (F12)
  • Check Console tab for JavaScript errors
  • Look for gtag is not defined or similar errors

Check 4: Network Requests

  • In DevTools, open Network tab
  • Filter by "collect" or "google-analytics"
  • Verify requests to www.google-analytics.com/g/collect

Check 5: Ad Blockers

  • Disable ad blockers for testing
  • Try incognito/private browsing
  • Test from different browser

Duplicate Events

Cause: GA4 code added in multiple locations.

Check for:

  • Code in both Header AND Footer
  • Code in Header AND custom HTML section
  • Native Strikingly analytics (doesn't exist, but check apps)
  • Multiple GTM containers

Fix: Remove all but one GA4 implementation.

Events Not Firing

See Events Not Firing for detailed debugging.

Quick checks:

  • Verify GA4 tag loads (check Network tab)
  • Check for JavaScript errors
  • Ensure Enhanced Measurement is enabled
  • Test in GA4 DebugView

One-Page Site Only Shows Homepage

This is expected behavior for Strikingly one-page sites.

Solutions:

  1. Implement virtual page views for sections (code above)
  2. Focus on event tracking instead of page views
  3. Use scroll depth tracking
  4. Track section engagement

Performance Considerations

GA4 can impact Strikingly site performance:

Optimize Loading

<!-- Use async attribute -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

<!-- Minimize inline code -->
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Monitor Impact

Check site speed after adding GA4:

Best Practices

  • Keep Header Code minimal
  • Use async for external scripts
  • Don't add multiple analytics platforms directly (use GTM)
  • Remove unused tracking code
  • Test on mobile devices

Testing Checklist

Before considering GA4 setup complete:

  • GA4 code added to Header Code
  • Settings saved and site published
  • Real-time data appears in GA4 within 60 seconds
  • No JavaScript errors in browser console
  • Network requests to google-analytics.com visible
  • Enhanced Measurement enabled in GA4
  • Tested on mobile device
  • GTM Preview shows tag firing (if using GTM)
  • DebugView shows events (if debug mode enabled)
  • Privacy/consent implemented (if required)

Next Steps

For general GA4 concepts, see Google Analytics 4 Overview.

Back to top