🚀 SitePopup - Google Tag Manager Implementatie

⚠️ Belangrijk: Google Tag Manager kan timing problemen veroorzaken. Deze guide helpt je om SitePopup correct te implementeren via GTM.

📋 Stap 1: GTM Tag Configuratie

1.1 Custom HTML Tag Maken

Maak een nieuwe Custom HTML tag in GTM:

<script src="https://sitepopup.com/sitepopup.js?v={{timestamp}}" data-popup-id="{{popup_id}}"></script>
            

1.2 Trigger Configuratie

Configureer de trigger voor wanneer de popup moet laden:

All Pages: Voor popups op alle pagina's
Page View: Voor specifieke pagina's
DOM Ready: Aanbevolen voor betere compatibiliteit

🔧 Stap 2: Variabelen Configureren

2.1 Popup ID Variabele

Maak een Data Layer Variable:

Variable Name: popup_id
Variable Type: Data Layer Variable
Data Layer Variable Name: popup_id
            

2.2 Timestamp Variabele

Maak een Custom JavaScript Variable voor cache busting:

Variable Name: timestamp
Variable Type: Custom JavaScript
Custom JavaScript:
function() {
  return Date.now();
}
            

⚙️ Stap 3: Data Layer Setup

3.1 Data Layer Push

Voeg dit toe aan je website (voor de GTM container):

<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  'popup_id': 'popup_1234567890_abc123',
  'event': 'sitepopup_trigger'
});
</script>
            

🎯 Stap 4: Advanced Configuratie

4.1 Conditional Loading

Voor geavanceerde controle, gebruik een Custom JavaScript Variable:

Variable Name: should_load_popup
Variable Type: Custom JavaScript
Custom JavaScript:
function() {
  // Check of popup al geladen is
  if (document.querySelector('[data-popup-id]')) {
    return false;
  }
  
  // Check specifieke voorwaarden
  var currentPath = window.location.pathname;
  var allowedPaths = ['/home', '/product', '/contact'];
  
  return allowedPaths.some(function(path) {
    return currentPath.indexOf(path) !== -1;
  });
}
            

🐛 Stap 5: Debugging & Monitoring

5.1 Console Logging

SitePopup logt automatisch naar de console. Check voor:

SitePopup: Loading popup popup_1234567890_abc123
SitePopup: Popup data retrieved for tracking: {...}
SitePopup: Tracking response: 200
            

5.2 GTM DataLayer Events

SitePopup stuurt events naar dataLayer:

// Success events
{
  'event': 'sitepopup_loaded',
  'timestamp': 1234567890
}

// Error events  
{
  'event': 'sitepopup_error',
  'error_type': 'tracking_fetch_error',
  'popup_id': 'popup_1234567890_abc123',
  'error_message': 'Network error'
}
            

✅ Stap 6: Testing

6.1 GTM Preview Mode

Gebruik GTM Preview mode om te testen:

Activeer GTM Preview mode
Ga naar je website
Check of de SitePopup tag wordt geactiveerd
Controleer console logs
Test popup functionaliteit

🚨 Veelvoorkomende Problemen

Probleem: Popup laadt niet

Oplossing:

Check of GTM tag correct is geconfigureerd
Controleer of popup_id variabele correct is
Test in GTM Preview mode
Check console voor errors

Probleem: Timing issues

Oplossing:

Gebruik "DOM Ready" trigger in plaats van "Page View"
Voeg extra delay toe aan GTM tag (100-200ms)
Test op verschillende pagina's

Probleem: Tracking werkt niet

Oplossing:

Check CORS settings op je server
Controleer of API endpoints bereikbaar zijn
Test fetch calls in console
Check network tab in developer tools

📞 Support

Als je problemen ondervindt met GTM implementatie:

Check de browser console voor error messages
Test de popup code direct in HTML (zonder GTM)
Controleer GTM Preview mode voor tag activatie
Neem contact op met support met specifieke error details