Ucraft Analytics Implementation

Technical guide to implementing analytics on Ucraft's drag-and-drop builder using code injection, app integrations, and e-commerce tracking.

Analytics Architecture on Ucraft

Ucraft is a closed drag-and-drop website builder with two primary injection points for analytics code:

Custom Code Injection (Head) -- Site-wide code added via Dashboard > Settings > Custom Code > Head Code
Custom Code Injection (Body) -- Site-wide code added via Dashboard > Settings > Custom Code > Body Code (before closing </body>)

There is no per-page code injection. All custom code applies globally across the entire site. Ucraft does not expose its template system or provide a theme file editor, so all tracking implementation goes through the settings panel or app integrations.

Rendering Pipeline

Ucraft generates pages server-side and delivers fully rendered HTML. The builder injects its own framework scripts before any custom code. Your HEAD injection runs after Ucraft's base styles but before DOM content renders. BODY injection runs after all page content.

Plan Restrictions

Custom code injection is only available on Pro Website plans and above. Free and basic plans do not allow HEAD/BODY code injection. E-commerce tracking requires the Pro Shop plan or higher.

Installing Tracking Scripts

Head Code Injection

Navigate to Dashboard > Settings > Custom Code > 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>

Body Code Injection

Navigate to Dashboard > Settings > Custom Code > Body Code:

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

Built-in App Integrations

Ucraft provides native integrations for select platforms under Dashboard > Apps > Marketing:

Google Analytics -- Enter the Measurement ID (G-XXXXXXX) directly
Facebook Pixel -- Enter the Pixel ID
Google Ads -- Enter the conversion ID

These integrations inject tracking code automatically but do not support custom configurations, consent mode, or event-level customization. For full control, use the custom code injection instead.

Data Layer Implementation

Ucraft does not provide a native data layer. Initialize one manually in the Head Code section:

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    platform: 'ucraft',
    page_path: window.location.pathname,
    page_title: document.title
  });
</script>

Page Type Detection

Ucraft uses predictable URL structures. Detect page types from the URL path:

<script>
  window.dataLayer = window.dataLayer || [];

  var path = window.location.pathname;
  var pageType = 'page';

  if (path === '/' || path === '') pageType = 'home';
  else if (path.indexOf('/blog/') === 0) pageType = 'blog_post';
  else if (path.indexOf('/shop/') === 0) pageType = 'product';
  else if (path.indexOf('/cart') === 0) pageType = 'cart';
  else if (path.indexOf('/checkout') === 0) pageType = 'checkout';

  window.dataLayer.push({
    page_type: pageType,
    content_group: pageType
  });
</script>

E-commerce Event Tracking

On Pro Shop plans, Ucraft renders product and cart pages with structured DOM elements. Extract product data from the page:

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Product page detection
  var productName = document.querySelector('.product-title, .uc-product-name');
  var productPrice = document.querySelector('.product-price, .uc-product-price');

  if (productName && productPrice) {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'view_item',
      ecommerce: {
        items: [{
          item_name: productName.textContent.trim(),
          price: parseFloat(productPrice.textContent.replace(/[^0-9.]/g, ''))
        }]
      }
    });
  }

  // Add to cart button tracking
  var addToCartBtns = document.querySelectorAll('[data-action="add-to-cart"], .uc-add-to-cart');
  addToCartBtns.forEach(function(btn) {
    btn.addEventListener('click', function() {
      window.dataLayer.push({ event: 'add_to_cart' });
    });
  });
});
</script>

Form Submission Tracking

Ucraft forms do not expose submission events natively. Use a MutationObserver or form submit listener:

<script>
document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('form').forEach(function(form) {
    form.addEventListener('submit', function(e) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'form_submit',
        form_action: form.getAttribute('action') || 'unknown'
      });
    });
  });
});
</script>

Common Issues

Custom Code Not Appearing

Custom code injection changes require the site to be republished. After adding or modifying code in Settings, click the Publish button. Changes to Custom Code fields are not applied to the live site until republishing.

App Integration Conflicts with Custom Code

If you use both the built-in Google Analytics app integration AND custom GTM code that also loads GA4, you will get duplicate pageview events. Disable the native app integration before deploying GTM-based tracking.

No Per-Page Code Injection

Ucraft applies all custom code globally. To run scripts on specific pages only, use conditional logic in your injected code:

if (window.location.pathname === '/landing-page') {
  // Page-specific tracking logic
  window.dataLayer.push({ event: 'landing_view', campaign: 'spring_2026' });
}

E-commerce Selectors Change Between Themes

Ucraft's product page DOM structure varies by template. The selectors .product-title and .product-price may not work on all themes. Inspect the live page to identify the correct selectors for your specific template before deploying e-commerce tracking.

Free Plan Limitations

Free and basic plans strip custom code injection entirely. There is no workaround -- upgrading to a Pro plan is the only way to implement custom analytics beyond the built-in app integrations.

Platform-Specific Considerations

No developer API for analytics: Ucraft does not expose a public API for reading page content or configuration. Analytics auditing must be done by inspecting the rendered HTML of the live site.

Multilingual site tracking: Ucraft supports multiple languages via URL prefixes (/en/, /fr/). Account for language prefixes in page path matching and ensure your data layer strips or normalizes language codes for consistent reporting.

SSL and domain configuration: Ucraft provides free SSL on all plans. Custom domains are supported on paid plans. Analytics scripts that reference http:// resources will be blocked by mixed content policies on Ucraft's HTTPS-only pages.

Limited JavaScript access: Ucraft's builder does not expose window events for page lifecycle hooks. Standard DOM events (DOMContentLoaded, load) work normally, but there are no builder-specific JavaScript APIs or SDK methods available for tracking integration.

Cookie consent: Ucraft includes a configurable cookie banner under Dashboard > Settings > Cookie Consent. It does not integrate with Google Consent Mode or other analytics consent frameworks. Implement consent logic manually if required.

शीर्ष पर वापस जाएँ