Analytics Architecture on SITE123
SITE123 uses a pre-designed layout system where users select a template and populate content through structured forms rather than a freeform drag-and-drop editor. Pages are generated server-side and served as static HTML from SITE123's CDN. Each page loads independently as a full HTML document with no SPA routing.
The platform provides limited template-level access. Users cannot edit raw HTML templates or modify the page structure directly. Custom code injection is available through the Settings > Custom Code area, which provides a single injection point for scripts loaded on all pages.
SITE123 includes its own built-in analytics dashboard. For custom analytics implementation, the platform supports Google Analytics natively and allows custom script injection on paid plans. Free plans restrict or entirely disable custom code.
Installing Tracking Scripts
Built-In Google Analytics Integration
Navigate to Settings > Marketing Tools > Google Analytics and enter the Measurement ID:
G-XXXXXXXXXX
SITE123 auto-injects the standard gtag.js snippet on all pages:
<!-- Injected by SITE123 -->
<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>
This method provides zero configuration control. Enhanced measurement settings, consent mode, and custom dimensions cannot be modified through this integration.
Custom Code Injection (Header Scripts)
For GTM or other tracking platforms, use Settings > Custom Code (available on paid plans). SITE123 provides a Header Code field that injects into <head> on all pages:
<!-- 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>
Some SITE123 plans also expose a Footer Code field for the GTM noscript container:
<!-- 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>
Facebook Pixel Integration
SITE123 provides a dedicated Facebook Pixel field under Settings > Marketing Tools > Facebook Pixel. Enter the Pixel ID and SITE123 injects the script automatically. For full Pixel control (custom events, advanced matching), use the Custom Code injection with the full Pixel snippet instead.
Data Layer Implementation
Base Data Layer
Add to the Header Code injection:
<script>
window.dataLayer = window.dataLayer || [];
var path = window.location.pathname;
var pageType = 'content';
if (path === '/' || path === '') pageType = 'home';
if (path.indexOf('/blog/') > -1) pageType = 'blog_post';
if (path.indexOf('/store') > -1 || path.indexOf('/product') > -1) pageType = 'product';
if (path.indexOf('/contact') > -1) pageType = 'contact';
dataLayer.push({
page_type: pageType,
page_path: path,
page_title: document.title,
platform: 'site123',
language: document.documentElement.lang || 'en'
});
</script>
Multi-Language Page Tracking
SITE123 supports multi-language sites natively. Each language version lives under a language prefix (/es/, /fr/, /de/). Track the active language:
<script>
var langMatch = window.location.pathname.match(/^\/([a-z]{2})\//);
var activeLang = langMatch ? langMatch[1] : (document.documentElement.lang || 'en');
dataLayer.push({
content_language: activeLang,
is_translated: langMatch ? true : false,
original_path: langMatch ?
window.location.pathname.replace(/^\/[a-z]{2}\//, '/') :
window.location.pathname
});
</script>
E-Commerce Tracking
SITE123's built-in store renders product data in the DOM:
<script>
document.addEventListener('DOMContentLoaded', function() {
var productTitle = document.querySelector('.product-page-title, [class*="product-name"]');
var productPrice = document.querySelector('.product-page-price, [class*="product-price"]');
if (productTitle && productPrice) {
dataLayer.push({
event: 'view_item',
ecommerce: {
items: [{
item_name: productTitle.textContent.trim(),
price: parseFloat(productPrice.textContent.replace(/[^0-9.]/g, ''))
}]
}
});
}
// Product list tracking
var productCards = document.querySelectorAll('[class*="product-card"], [class*="store-item"]');
if (productCards.length > 0 && !productTitle) {
var items = Array.prototype.map.call(productCards, function(card, i) {
var name = card.querySelector('[class*="name"], [class*="title"]');
var price = card.querySelector('[class*="price"]');
return {
item_name: name ? name.textContent.trim() : '',
price: price ? parseFloat(price.textContent.replace(/[^0-9.]/g, '')) : 0,
index: i
};
});
dataLayer.push({ event: 'view_item_list', ecommerce: { items: items } });
}
});
</script>
Form Submission Tracking
document.addEventListener('click', function(e) {
var submitBtn = e.target.closest('button[type="submit"], input[type="submit"]');
if (submitBtn && submitBtn.closest('form')) {
dataLayer.push({
event: 'form_submit_attempt',
form_page: window.location.pathname
});
}
});
Common Issues
Built-In Analytics vs Custom Analytics Discrepancies
SITE123's built-in analytics dashboard (under Dashboard > Statistics) counts visitors differently from Google Analytics. SITE123 counts bot traffic, preview hits, and editor visits that GA typically filters out. Treat SITE123's built-in numbers as approximate. Use GA or GTM-based tracking for accurate reporting.
Custom Code Blocked on Free Plans
Free SITE123 plans disable the Custom Code injection fields. The only analytics option on free plans is the built-in Google Analytics Measurement ID field under Marketing Tools. GTM and arbitrary script injection require a paid plan.
Template Switching Preserves Code Injection
Unlike some platforms, switching templates on SITE123 does not remove custom code from Settings. However, DOM class names and structure may change, breaking any selectors used in your tracking scripts. After a template switch, verify all DOM-dependent tracking.
Limited DOM Selector Stability
SITE123 generates class names that are semi-stable but can change between platform updates. Use broad selectors and fallbacks:
// Use multiple selectors with fallbacks
var productName = document.querySelector(
'.product-page-title, ' +
'[class*="product-name"], ' +
'[class*="product"] h1, ' +
'[class*="product"] h2'
);
No Per-Page Code Injection
SITE123 does not support page-level script injection. All custom code applies to every page. Use URL-based conditionals to scope tracking to specific pages:
// Only fire on blog pages
if (window.location.pathname.indexOf('/blog/') > -1) {
dataLayer.push({ event: 'blog_view' });
}
// Only fire on store pages
if (window.location.pathname.indexOf('/store') > -1) {
dataLayer.push({ event: 'store_view' });
}
Contact Form Success Detection
SITE123 contact forms submit via AJAX and show an inline success message. The page does not redirect. Detect success through DOM observation:
document.querySelectorAll('form').forEach(function(form) {
var observer = new MutationObserver(function() {
var successMsg = form.closest('[class*="form"]') ?
form.closest('[class*="form"]').querySelector('[class*="success"], [class*="thank"]') : null;
if (successMsg && successMsg.offsetHeight > 0) {
dataLayer.push({ event: 'form_success', form_page: window.location.pathname });
observer.disconnect();
}
});
observer.observe(form.parentElement, { childList: true, subtree: true, attributes: true });
});
Platform-Specific Considerations
Pre-Designed Layout Constraints: SITE123 does not allow users to move elements freely on the page. Content lives within predefined layout blocks. This means you cannot place custom HTML elements at arbitrary positions. All tracking code must go through the site-wide Settings injection or GTM.
Multi-Language Sites: SITE123's built-in translation system creates separate URL paths per language. Each language version loads the same Header Code. If you need language-specific tracking configurations (separate GA properties per language), implement conditional logic in your scripts:
var lang = window.location.pathname.match(/^\/([a-z]{2})\//);
var gaId = 'G-DEFAULT';
if (lang && lang[1] === 'es') gaId = 'G-SPANISH';
if (lang && lang[1] === 'fr') gaId = 'G-FRENCH';
gtag('config', gaId);
Blog Section: SITE123 blogs generate pages under /blog/ paths. Blog listing pages and individual posts are separate page loads. Track blog engagement:
if (window.location.pathname === '/blog' || window.location.pathname === '/blog/') {
dataLayer.push({ content_type: 'blog_index' });
} else if (window.location.pathname.indexOf('/blog/') === 0) {
var title = document.querySelector('h1, [class*="blog-title"], [class*="post-title"]');
dataLayer.push({
content_type: 'blog_post',
article_title: title ? title.textContent.trim() : document.title
});
}
Mobile Rendering: SITE123 uses responsive design. The same HTML serves all devices. No separate mobile site exists.
Cookie Consent: SITE123 includes a built-in cookie consent banner. The banner controls SITE123's own cookies but does not gate third-party analytics scripts. Implement consent management through GTM consent mode if required:
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('consent', 'default', {
analytics_storage: 'denied',
ad_storage: 'denied'
});
// Update consent when user accepts via SITE123's banner or custom consent UI
SSL: All SITE123 sites serve over HTTPS on both default subdomains and custom domains. Analytics endpoints must use HTTPS to avoid mixed-content blocking.