Install Google Tag Manager on Strikingly | OpsBlu Docs

Install Google Tag Manager on Strikingly

How to install and configure Google Tag Manager on Strikingly sites using custom code injection.

Google Tag Manager (GTM) provides a centralized way to manage all tracking codes on your Strikingly site without repeatedly editing custom code.

Why Use GTM on Strikingly?

Benefits:

  • Easier management: Update tracking without republishing your site
  • Multiple tags: Manage GA4, Meta Pixel, ads pixels in one place
  • Testing: Preview mode to verify tags before publishing
  • Non-technical updates: Marketers can manage tags without code access
  • Better performance: One container load instead of multiple scripts
  • Version control: Roll back changes if needed

Without GTM: Each tracking change requires editing Strikingly custom code and republishing.

With GTM: Make changes in GTM interface and publish instantly.

Prerequisites

  • Strikingly Plan: Limited, Pro, or VIP (custom code access required)
  • GTM Account: Free account at tagmanager.google.com
  • Site Access: Admin access to Strikingly site settings

Step 1: Create GTM Container

  1. Create Account (if needed)

  2. Create Container

    • Enter container name (your site name)
    • Select Web as target platform
    • Click Create

  3. Accept Terms

    • Read and accept GTM Terms of Service

  4. Get Container Code

    After creating the container, GTM shows installation code in two parts:

    Part 1: Head code

    <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

    Part 2: Body code

    <!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

  5. Copy Both Codes - Keep this window open or copy to a text file

Step 2: Install GTM on Strikingly

Access Custom Code Settings

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

Add Header Code

  1. In Header Code field, paste GTM Part 1 (the <script> code)

    <!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

    Replace GTM-XXXXXX with your actual container ID.

Add Body Code

Strikingly doesn't have a body code injection area, so add the noscript fallback to the header:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Note: Ideally, the noscript part goes in <body>, but Strikingly's header placement works fine.

Save and Publish

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

Step 3: Verify GTM Installation

Method 1: GTM Preview Mode

  1. Open GTM Workspace

  2. Connect to Your Site

    • Enter your Strikingly site URL
    • Click Connect

  3. Verify Connection

    • Your site opens in new window with GTM banner
    • GTM Debugger panel shows "Connected"
    • Should see "Container Loaded" event

  4. Check Events

    • Navigate through your site
    • Watch events fire in debugger
    • Verify GTM is tracking page interactions

Method 2: Browser Console

  1. Open Developer Tools (F12)
  2. Console Tab
  3. Type: dataLayer
  4. Press Enter

Expected Result: Should see array with GTM events:

[{
  'gtm.start': 1234567890,
  event: 'gtm.js'
}, ...]

If undefined: GTM not installed correctly.

Method 3: View Page Source

  1. Right-click on your Strikingly site
  2. View Page Source
  3. Search (Ctrl+F) for your GTM ID: GTM-XXXXXX

Expected Result: Should find your container ID in the code.

Method 4: Tag Assistant Legacy

  1. Install Tag Assistant Legacy extension
  2. Visit your Strikingly site
  3. Click Tag Assistant icon
  4. Click Enable and reload page

Expected Result: Shows Google Tag Manager tag with your container ID.

Step 4: Configure GTM for Strikingly

Enable Built-in Variables

  1. In GTM, go to Variables
  2. Under Built-In Variables, click Configure
  3. Enable these variables:
    • Page URL
    • Page Hostname
    • Page Path
    • Referrer
    • Click Element
    • Click Classes
    • Click ID
    • Click Text
    • Form Element
    • Form Classes
    • Form ID

Create Basic Triggers

1. All Pages Trigger

  • Already exists by default
  • Used for tags that fire on every page view

2. Form Submission Trigger

  1. Go to Triggers → New
  2. Click Trigger Configuration
  3. Choose Form Submission
  4. Select All Forms or specific forms
  5. Save as "Form Submission - All"

3. Button Click Trigger

  1. Triggers → New
  2. Choose All Elements
  3. Configure:
    • Fire on: Some Clicks
    • Condition: Click Classes contains s-cta-button OR Click Element matches button
  4. Save as "Button Clicks"

4. Outbound Link Trigger

  1. Triggers → New
  2. Choose Link Click
  3. Check Wait for Tags
  4. Configure:
    • Fire on: Some Link Clicks
    • Condition: Click URL does not contain \{\{Page Hostname\}\}
  5. Save as "Outbound Links"

Create Strikingly-Specific Variables

1. Section Name Variable

For tracking which section user is in:

  1. Variables → New
  2. Choose Custom JavaScript
  3. Code:
    function() {
  var sections = document.querySelectorAll('section');
  var scrollPos = window.scrollY + window.innerHeight / 2;

  for (var i = 0; i < sections.length; i++) {
    var section = sections[i];
    var sectionTop = section.offsetTop;
    var sectionBottom = sectionTop + section.offsetHeight;

    if (scrollPos >= sectionTop && scrollPos < sectionBottom) {
      return section.id || 'section-' + i;
    }
  }
  return 'unknown';
}
  4. Save as "Section Name"

2. Site Type Variable

Track if it's a store, portfolio, etc:

  1. Variables → New
  2. Choose Constant
  3. Value: portfolio (or your site type)
  4. Save as "Site Type"

Step 5: Add Your First Tag (GA4 Example)

Now that GTM is installed, add Google Analytics 4:

Create GA4 Configuration Tag

  1. Tags → New
  2. Click Tag Configuration
  3. Choose Google Analytics: GA4 Configuration
  4. Enter Measurement ID: G-XXXXXXXXXX
  5. Triggering: Select All Pages
  6. Save as "GA4 - Configuration"
  7. Click Submit to publish

Test the Tag

  1. Click Preview
  2. Enter your Strikingly site URL
  3. Verify GA4 Configuration tag fires on page load
  4. Check GA4 Realtime reports for data

Common GTM Tags for Strikingly

Google Analytics 4

Configuration Tag:

  • Tag Type: GA4 Configuration
  • Measurement ID: G-XXXXXXXXXX
  • Trigger: All Pages

Event Tags:

  • Form Submission event
  • Button Click event
  • Scroll Depth event

See GA4 Event Tracking for implementation.

Meta Pixel

Base Code Tag:

  • Tag Type: Custom HTML
  • Add Meta Pixel base code
  • Trigger: All Pages

See Meta Pixel Setup for details.

Conversion Tag:

  • Tag Type: Google Ads Conversion Tracking
  • Conversion ID and Label
  • Trigger: Form Submission or Purchase

Advanced GTM Configuration

Data Layer Events for Strikingly

Push custom events to GTM from Strikingly:

Add to Header Code (after GTM installation):

<script>
// Wait for GTM to load
window.addEventListener('load', function() {
  // Push section view events
  var sections = document.querySelectorAll('section');
  var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
          'event': 'sectionView',
          'sectionId': entry.target.id || 'unknown',
          'sectionName': entry.target.querySelector('h1, h2, h3')?.textContent || 'Unknown'
        });
      }
    });
  }, { threshold: 0.5 });

  sections.forEach(function(section) {
    observer.observe(section);
  });
});
</script>

Create Data Layer Variable in GTM

  1. Variables → New
  2. Choose Data Layer Variable
  3. Variable Name: sectionId
  4. Save

Create Custom Event Trigger

  1. Triggers → New
  2. Choose Custom Event
  3. Event Name: sectionView
  4. Save as "Section View"

Use in Tags

Create tags that fire on your custom triggers:

  1. Tags → New
  2. Choose tag type (GA4 Event, etc.)
  3. Configure with Data Layer Variables
  4. Triggering: Select "Section View"

GTM Container Organization

Naming Conventions

Tags:

  • GA4 - Configuration
  • GA4 - Event - Form Submit
  • Meta - Base Pixel
  • Meta - Event - Purchase

Triggers:

  • All Pages
  • Form Submission - Contact
  • Click - CTA Buttons
  • Custom Event - Section View

Variables:

  • Section Name
  • Form ID
  • Click Text

Folders

Organize with folders:

  • Analytics (GA4 tags)
  • Advertising (Meta, Google Ads)
  • Custom (Strikingly-specific)

Version Control

Always:

  • Name versions clearly
  • Add description of changes
  • Test in Preview before publishing
  • Can rollback if issues occur

Performance Optimization

Minimize Tag Load Impact

Best Practices:

  • Use async tags when possible
  • Combine similar tags
  • Remove unused tags
  • Limit number of tags firing on page load

Tag Firing Priority

Set tag priority for load order:

  1. GTM Configuration tags (highest priority)
  2. Analytics base tags
  3. Marketing pixels
  4. Event tags (lowest priority)

Tag Sequencing

For dependent tags:

  1. Click tag name
  2. Advanced Settings → Tag Sequencing
  3. Set tags that must fire before/after

Troubleshooting GTM on Strikingly

GTM Container Not Loading

Check:

  1. Container ID is correct (GTM-XXXXXX)
  2. Code saved in Strikingly Settings → Advanced → Custom Code
  3. Site was republished after adding code
  4. Check browser console for errors

Fix:

  • Verify code is in Header Code, not Footer
  • Check for JavaScript errors blocking execution
  • Clear browser cache and reload
  • Test in incognito mode

Tags Not Firing

Diagnose in Preview Mode:

  1. Open GTM Preview
  2. Navigate to page where tag should fire
  3. Check if trigger conditions met
  4. Review Variables tab for expected values

Common Issues:

  • Trigger conditions too specific
  • Required variables undefined
  • JavaScript errors preventing execution
  • Ad blockers blocking requests

Data Layer Errors

Problem: dataLayer is undefined or events missing.

Check:

// In console
console.log(window.dataLayer);

Fix:

  • Ensure GTM code loads before custom code
  • Initialize dataLayer before GTM: window.dataLayer = window.dataLayer || [];
  • Check for JavaScript errors

Preview Mode Won't Connect

Possible Causes:

  • Site not published
  • Ad blocker interfering
  • Browser blocking third-party cookies
  • Wrong URL entered

Solutions:

  • Disable ad blockers
  • Allow cookies for tagmanager.google.com
  • Try different browser
  • Use exact site URL (https://)

Testing Checklist

Before going live with GTM:

  • Container loads without errors
  • dataLayer populates correctly
  • Preview mode connects successfully
  • All necessary triggers created
  • Variables return expected values
  • Tags fire on correct triggers
  • No JavaScript errors in console
  • Tested on mobile device
  • Analytics platforms receiving data
  • Performance impact acceptable
  • Version published with description

Security and Compliance

User Permissions

In GTM, manage who can edit:

  1. Admin → User Management
  2. Add users with appropriate permissions:
    • View: Can only view
    • Edit: Can edit but not publish
    • Approve: Can approve versions
    • Publish: Full access

Privacy Considerations

Consent Management:

  • Implement consent banner on Strikingly
  • Use GTM's Consent Mode
  • Block tags until consent given

Example Consent Code:

<script>
// Set default consent state
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

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

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

Next Steps

Now that GTM is installed:

For general GTM concepts, see Google Tag Manager Documentation.

Additional Resources

返回顶部