Skip to main content

Global Code Implementation Guide

The DATA Reshape tracking library enables server-side tracking across all pages by collecting event data, managing user sessions, and streaming information to your analytics and marketing platforms.

Prerequisites​

Required Before Implementation

Only implement after receiving confirmation that your custom domain and SSL certificate are active.

Required Information:

  • Custom tracking subdomain (e.g., dre2.yourdomain.com)
  • Library ID provided by DATA Reshape team

Basic Implementation​

Add this code to your website's <head> section on all pages:

<script>
(function(R,e,s,h,a,p,E){
R[s+a]=a;E=e.getElementsByTagName(s)[0];p=e.createElement(s);p.async=true;p.src="https://"+h+"/main.js?id="+a; E.parentNode.insertBefore(p,E);
})(window,document,"script","dre2.yourdomain.com","YOUR_LIBRARY_ID");
</script>
Important Replacements
  • Replace dre2.yourdomain.com with your actual custom subdomain
  • Replace YOUR_LIBRARY_ID with the Library ID provided by the DATA Reshape team

HTML Template Example​

Here's how to implement it in a complete HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Your Website</title>
    
    <!-- DATA Reshape Tracking Code -->
    <script>
    (function(R,e,s,h,a,p,E){
    R[s+a]=a;E=e.getElementsByTagName(s)[0];p=e.createElement(s);p.async=true;p.src="https://"+h+"/main.js?id="+a; E.parentNode.insertBefore(p,E);
    })(window,document,"script","dre2.yourdomain.com","YOUR_LIBRARY_ID");
    </script>
    
    <!-- Your other head content -->
</head>
<body>
    <!-- Your website content -->
</body>
</html>

Implementation Verification​

After adding the code, verify successful implementation:

1. Browser Developer Tools Check​

Network Tab Verification:

  1. Open browser Developer Tools (F12)
  2. Go to the Network tab
  3. Reload your page
  4. Look for a successful request to: https://dre2.yourdomain.com/main.js?id=YOUR_LIBRARY_ID

Console Verification:

  1. Check the Console tab for any JavaScript errors
  2. No DATA Reshape related errors should appear

2. Visual Confirmation​

You should see:

  • Request to your custom subdomain loads successfully (Status: 200)
  • No CORS or SSL certificate errors
  • No JavaScript console errors related to DATA Reshape

Advanced Implementation Options​

Multiple Library IDs​

For websites with different sections requiring separate tracking:

<script>
// Determine Library ID based on page or subdomain
const getLibraryId = () => {
  const path = window.location.pathname;
  const hostname = window.location.hostname;
  
  // Example: Different IDs for different sections
  if (path.startsWith('/shop/')) return 'ECOMMERCE_LIBRARY_ID';
  if (path.startsWith('/blog/')) return 'BLOG_LIBRARY_ID';
  if (hostname.includes('support.')) return 'SUPPORT_LIBRARY_ID';
  
  return 'MAIN_LIBRARY_ID'; // Default Library ID
};

(function(R,e,s,h,a,p,E){
R[s+a]=a;E=e.getElementsByTagName(s)[0];p=e.createElement(s);p.async=true;p.src="https://"+h+"/main.js?id="+a; E.parentNode.insertBefore(p,E);
})(window,document,"script","dre2.yourdomain.com",getLibraryId());
</script>

Conditional Loading​

For loading the library only under specific conditions:

<script>
// Example: Only load on production or specific environments
const shouldLoadTracking = () => {
  // Don't load on localhost or staging
  if (window.location.hostname === 'localhost' || 
      window.location.hostname.includes('staging')) {
    return false;
  }
  
  // Don't load for admin users (if you have admin detection)
  if (window.isAdminUser) {
    return false;
  }
  
  return true;
};

if (shouldLoadTracking()) {
  (function(R,e,s,h,a,p,E){
  R[s+a]=a;E=e.getElementsByTagName(s)[0];p=e.createElement(s);p.async=true;p.src="https://"+h+"/main.js?id="+a; E.parentNode.insertBefore(p,E);
  })(window,document,"script","dre2.yourdomain.com","YOUR_LIBRARY_ID");
}
</script>

Content Security Policy (CSP) Configuration​

If your website uses Content Security Policy, add these directives:

<meta http-equiv="Content-Security-Policy" content="
  script-src 'self' 'unsafe-inline' https://dre2.yourdomain.com;
  connect-src 'self' https://dre2.yourdomain.com;
">

Or in your server configuration:

Content-Security-Policy: script-src 'self' 'unsafe-inline' https://dre2.yourdomain.com; connect-src 'self' https://dre2.yourdomain.com;

Troubleshooting Common Issues​

Library Not Loading​

Symptoms: No request to your subdomain in Network tab

Solutions:

  1. Check DNS Configuration: Verify your custom subdomain DNS records are correctly configured
  2. Verify SSL Certificate: Ensure SSL certificate is active and valid
  3. Check Domain Spelling: Confirm subdomain URL matches exactly

CORS Errors​

Symptoms: Console errors about Cross-Origin Resource Sharing

Solutions:

  1. SSL Certificate: Verify your subdomain has a valid SSL certificate
  2. DNS Propagation: Allow 24-48 hours for DNS changes to propagate globally
  3. Subdomain Configuration: Contact DATA Reshape team to verify server configuration

Events Not Tracking​

Symptoms: Library loads but events don't appear in your dashboard

Solutions:

  1. Library ID: Confirm Library ID matches your DATA Reshape configuration
  2. Event Implementation: Verify event tracking code is properly implemented
  3. Dashboard Access: Check if you're looking at the correct date range and filters

Console Errors​

Common Error Messages and Solutions:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Solution: DNS configuration issue - verify subdomain DNS records

Mixed Content: The page was loaded over HTTPS, but requested an insecure resource

Solution: Ensure your subdomain uses HTTPS (SSL certificate required)

Access to fetch at '...' has been blocked by CORS policy

Solution: SSL certificate or server configuration issue - contact DATA Reshape team

Testing Your Implementation​

1. Basic Functionality Test​

// Test in browser console after page load
console.log(window.dataReshape); // Should return tracking library object

2. Network Monitoring​

Monitor these requests in Developer Tools:

  • Initial library load: https://dre2.yourdomain.com/main.js?id=YOUR_LIBRARY_ID
  • Event tracking requests: https://dre2.yourdomain.com/track

3. Real-Time Verification​

  1. Implement the code on a test page
  2. Visit the page and perform test actions
  3. Check your DATA Reshape dashboard for incoming events
  4. Verify data appears within 5-10 minutes

Next Steps​

Once your global code is successfully implemented:

  1. Verify Implementation - Confirm library loads and no errors appear
  2. Implement Event Tracking - Add specific events for your business:
  3. Add Customer Data - Include customer data collection for better attribution
  4. Configure Integrations - Set up destination platforms for your data
Need Help?

Implementation Complete! Your DATA Reshape tracking is now active.

If you encounter any issues or need assistance with event implementation, contact the DATA Reshape team for technical support.

Platform-Specific Guides​

For detailed platform-specific implementation instructions, see our dedicated guides: