Analytics Architecture on Strikingly
Strikingly builds section-based websites. Each page is composed of vertically stacked sections (hero, about, gallery, contact, etc.) that the user selects and configures through the editor. The platform focuses on single-page sites, though multi-page sites are supported on higher plans.
Pages render as static HTML with Strikingly's JavaScript framework handling interactive elements (image lightboxes, form submissions, mobile menu). Navigation within a single-page site uses anchor scrolling (hash links), not page loads. Multi-page navigation triggers full page loads.
Code injection is available under Settings > Custom Code on paid plans. Strikingly also provides dedicated analytics integration fields for Google Analytics, Facebook Pixel, and a few other platforms. Custom code injection gives Header and Footer access.
Installing Tracking Scripts
Analytics Integration Settings
Strikingly provides direct integration fields under Settings > Analytics:
- Google Analytics: Enter Measurement ID (
G-XXXXXXXXXX) - Facebook Pixel: Enter Pixel ID
- Google Ads: Enter Conversion ID
These auto-inject the respective scripts. For Google Analytics, Strikingly injects:
<!-- Auto-injected by Strikingly -->
<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>
Custom Code Injection
For GTM or other tracking platforms, use Settings > Custom Code:
Header 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>
Footer Code:
<!-- GTM noscript -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Inline Code via Custom HTML Section
Strikingly allows adding an App Store / HTML section type. This renders custom HTML inline within the page:
<div style="display:none;">
<script>
dataLayer.push({
event: 'section_reached',
section_name: 'pricing'
});
</script>
</div>
Wrap in a hidden div to prevent layout disruption. The script executes when the DOM parses this section.
Data Layer Implementation
Base Data Layer
Place in Header Code under Custom Code settings:
<script>
window.dataLayer = window.dataLayer || [];
// Detect single-page vs multi-page site
var isSinglePage = document.querySelectorAll('[data-section-type]').length > 3;
var path = window.location.pathname;
var hash = window.location.hash;
var pageType = 'content';
if (path === '/' && !hash) pageType = 'home';
if (path.indexOf('/blog/') > -1) pageType = 'blog_post';
if (path.indexOf('/store') > -1 || path.indexOf('/product') > -1) pageType = 'product';
dataLayer.push({
page_type: pageType,
page_path: path + (hash || ''),
site_layout: isSinglePage ? 'single_page' : 'multi_page',
platform: 'strikingly'
});
</script>
Section Visibility Tracking
Critical for single-page Strikingly sites where all content is on one URL:
<script>
(function() {
var sections = document.querySelectorAll('[data-section-type], .s-section');
var tracked = {};
var observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var sectionType = entry.target.getAttribute('data-section-type') ||
entry.target.id ||
'section_' + Array.prototype.indexOf.call(sections, entry.target);
if (!tracked[sectionType]) {
tracked[sectionType] = true;
dataLayer.push({
event: 'section_view',
section_type: sectionType,
section_index: Array.prototype.indexOf.call(sections, entry.target)
});
}
}
});
}, { threshold: 0.3 });
sections.forEach(function(s) { observer.observe(s); });
})();
</script>
Blog Post Tracking
Strikingly's built-in blog generates individual pages under /blog/:
<script>
if (window.location.pathname.indexOf('/blog/') > -1) {
var postTitle = document.querySelector('.blog-post-title, .s-blog-post-title, h1');
var postDate = document.querySelector('.blog-post-date, [class*="post-date"]');
dataLayer.push({
content_type: 'blog_post',
article_title: postTitle ? postTitle.textContent.trim() : document.title,
publish_date: postDate ? postDate.textContent.trim() : ''
});
}
</script>
E-Commerce Order Tracking
Strikingly's Simple Store supports product listings and checkout. Track product views:
<script>
document.addEventListener('DOMContentLoaded', function() {
var productEl = document.querySelector('[class*="product-name"], .s-product-title');
var priceEl = document.querySelector('[class*="product-price"], .s-product-price');
if (productEl) {
dataLayer.push({
event: 'view_item',
ecommerce: {
items: [{
item_name: productEl.textContent.trim(),
price: priceEl ? parseFloat(priceEl.textContent.replace(/[^0-9.]/g, '')) : 0
}]
}
});
}
});
</script>
Track add-to-cart clicks:
document.addEventListener('click', function(e) {
var cartBtn = e.target.closest('[class*="add-to-cart"], [class*="buy-now"], .s-product-buy-btn');
if (cartBtn) {
var container = cartBtn.closest('[class*="product"]');
var name = container ? container.querySelector('[class*="name"], [class*="title"]') : null;
dataLayer.push({
event: 'add_to_cart',
ecommerce: {
items: [{
item_name: name ? name.textContent.trim() : 'unknown'
}]
}
});
}
});
Common Issues
Single-Page Anchor Navigation Not Tracked as Page Views
On single-page Strikingly sites, clicking navigation links scrolls to sections via hash anchors (#about, #contact). Google Analytics does not count anchor changes as page views by default. Track hash changes:
window.addEventListener('hashchange', function() {
dataLayer.push({
event: 'virtual_page_view',
virtual_path: window.location.pathname + window.location.hash,
section_name: window.location.hash.replace('#', '')
});
});
In GTM, fire a GA4 page_view event on this virtual_page_view trigger with the virtual_path as the page location.
Custom Code Requires Pro Plan
Free Strikingly plans do not have access to Custom Code injection. The built-in Analytics integration fields (GA, Facebook Pixel) are available on Limited plans and above, but GTM and arbitrary script injection require Pro.
Strikingly's Built-In Analytics
Strikingly includes a basic analytics dashboard under Statistics showing page views and unique visitors. This data comes from Strikingly's internal tracking and does not sync with Google Analytics. Expect different numbers between the two systems.
Form Submission Tracking
Strikingly forms (contact, signup, custom) submit via AJAX. The form does not redirect or reload. Detect form submission attempts:
document.addEventListener('click', function(e) {
var submitBtn = e.target.closest('[class*="form"] button[type="submit"], [class*="form-submit"]');
if (submitBtn) {
dataLayer.push({
event: 'form_submit_attempt',
form_section: submitBtn.closest('[data-section-type]') ?
submitBtn.closest('[data-section-type]').getAttribute('data-section-type') : 'unknown'
});
}
});
For success detection, observe DOM changes after submission:
document.querySelectorAll('form').forEach(function(form) {
var observer = new MutationObserver(function(mutations) {
var success = form.parentElement.querySelector('[class*="success"], [class*="thank"]');
if (success && success.offsetHeight > 0) {
dataLayer.push({ event: 'form_success' });
observer.disconnect();
}
});
observer.observe(form.parentElement, { childList: true, subtree: true, attributes: true });
});
Editor Preview Does Not Execute Custom Code
Like most website builders, Strikingly's editor preview does not run custom scripts. Publish and test on the live site.
Platform-Specific Considerations
Section-Based DOM: Strikingly pages use [data-section-type] attributes on section containers. Common values include header, about, gallery, contact, store, blog. These attributes are reliable selectors for section-based tracking.
Navigation Structure: Single-page sites use a sticky navigation bar with hash links. Multi-page sites use standard navigation. Detect the navigation type:
var navLinks = document.querySelectorAll('nav a, .s-nav a');
var isHashNav = Array.prototype.every.call(navLinks, function(a) {
return a.getAttribute('href') && a.getAttribute('href').charAt(0) === '#';
});
Mobile Rendering: Strikingly uses responsive CSS. Mobile and desktop share the same HTML structure. The mobile menu is a hamburger overlay that does not change DOM structure.
Custom Domain: Strikingly supports custom domains on paid plans. Ensure analytics properties use the custom domain. Strikingly-hosted URLs (*.strikingly.com) and custom domains serve identical content.
Image Gallery and Lightbox: Strikingly's gallery section opens images in a lightbox overlay. Track lightbox opens:
var galleryObserver = new MutationObserver(function(mutations) {
var lightbox = document.querySelector('[class*="lightbox"].active, [class*="lightbox"][style*="display: block"]');
if (lightbox) {
dataLayer.push({ event: 'lightbox_open' });
}
});
galleryObserver.observe(document.body, { childList: true, subtree: true });
Third-Party App Integrations: Strikingly's App Market offers integrations (live chat, email marketing) that inject their own scripts. These run independently from your analytics tracking. Verify they do not conflict with GTM or produce duplicate page view events.