https://www.sofort-gutschein.de/static/js/lead-switch.js

1/**
2 * SOFORT-Gutschein: Kaeufer/Unternehmer-Weiche fuer die Startseite (sofort-gutschein.de)
3 *
4 * Ablauf:
5 *   1) SOFORT beim Laden: Modal fragt "Kaeufer oder Unternehmer?" (einmal pro Session, danach
6 *      nicht mehr, sessionStorage merkt sich die Wahl).
7 *      - "Kaeufer" -> Weiterleitung zur Anwender-FAQ (brauchen die Unternehmer-Startseite nicht).
8 *      - "Unternehmer" -> Modal schliesst sich, Startseite (mit Unternehmer-Hero, siehe
9 *        hero-unternehmer.html) bleibt sichtbar.
10 *   2) NUR fuer Unternehmer (Wahl aus Schritt 1): beim Verlassen ein zweiter, kleinerer Hinweis
11 *      auf den Lead-Assistenten (Potenzial-Check) - Desktop per Exit-Intent (Maus Richtung
12 *      Browser-oben), Mobile per kleiner Ecken-CTA (kein Exit-Intent-Signal auf Touch moeglich).
13 *      Kaeufer sehen diesen zweiten Hinweis nie.
14 *
15 * Einbindung: <script src="leads2026/lead-switch.js" defer></script> nach Bootstrap 5 JS +
16 * <link href="leads2026/lead-switch.css" rel="stylesheet">. Kein zusaetzliches HTML noetig -
17 * beide Modals + Mobile-CTA werden per JS injiziert.
18 */
19(function () {
20	'use strict';
21
22	//var FAQ_URL  = 'https://www.sofort-gutschein.de/faq/anwender?mtm_campaign=link-website-modalhome-portal';
23	
24	var FAQ_URL  = 'https://www.sofort-gutscheine.de?mtm_campaign=portal&mtm_source=website&mtm_medium=modalhome';	
25	
26	var LEAD_URL = 'https://www.sofort-gutschein.app/lp/?mtm_campaign=potential_analyse&mtm_source=website&mtm_medium=modalexit';
27
28
29	var ROLE_KEY = 'sg_lead_role';       // 'buyer' | 'merchant' - Antwort aus dem 1. Modal
30	var HINT_KEY = 'sg_lead_hint_shown'; // Hinweis-Popup (Schritt 2) schon gezeigt?
31
32	var identModalEl, identModal;
33	var hintModalEl, hintModal;
34
35	function getRole() {
36		try { return sessionStorage.getItem(ROLE_KEY); } catch (e) { return null; }
37	}
38	function setRole(role) {
39		try { sessionStorage.setItem(ROLE_KEY, role); } catch (e) {}
40	}
41	function hintAlreadyShown() {
42		try { return sessionStorage.getItem(HINT_KEY) === '1'; } catch (e) { return false; }
43	}
44	function markHintShown() {
45		try { sessionStorage.setItem(HINT_KEY, '1'); } catch (e) {}
46	}
47
48	// ------------------------------------------------------------------
49	// Schritt 1: Identifikations-Modal - sofort beim Laden, einmal pro Session
50	// ------------------------------------------------------------------
51
52	function injectIdentModal() {
53		if (document.getElementById('sgIdentModal')) return;
54
55		var html =
56			'<div class="modal fade" id="sgIdentModal" tabindex="-1" aria-labelledby="sgIdentLabel" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">' +
57			'  <div class="modal-dialog modal-dialog-centered">' +
58			'    <div class="modal-content">' +
59			'      <div class="modal-body text-center p-4 p-md-5">' +
60			'        <h4 class="mb-3" id="sgIdentLabel">Was suchst du gerade?</h4>' +
61			'        <p class="text-muted mb-4">Dann zeigen wir dir direkt die passenden Infos.</p>' +
62			'        <div class="d-grid gap-3">' +
63			'          <button type="button" class="btn btn-sg-blue btn-lg" id="sgIdentBuyer">Ich möchte ein Gutschein/Ticket kaufen</button>' +
64			'          <button type="button" class="btn btn-sg-red btn-lg" id="sgIdentMerchant">Ich bin Verkäufer/Unternehmer(in)</button>' +
65			'        </div>' +
66			'      </div>' +
67			'    </div>' +
68			'  </div>' +
69			'</div>';
70
71		document.body.insertAdjacentHTML('beforeend', html);
72		identModalEl = document.getElementById('sgIdentModal');
73
74		document.getElementById('sgIdentBuyer').addEventListener('click', function () {
75			setRole('buyer');
76			_paq.push(['trackEvent', 'Website', 'Klick', 'Käufer-Button']);
77			window.location.href = FAQ_URL;
78		});
79		document.getElementById('sgIdentMerchant').addEventListener('click', function () {
80			setRole('merchant');
81			if (identModal) identModal.hide();
82			//matomo tracker
83			_paq.push(['trackEvent', 'Website', 'Klick', 'Verkäufer-Button']);
84			injectMobileHintCta();
85		});
86	}
87
88	function showIdentModal() {
89		if (typeof bootstrap === 'undefined' || !bootstrap.Modal) return; // Bootstrap 5 JS fehlt/noch nicht geladen
90		injectIdentModal();
91		if (!identModal) identModal = new bootstrap.Modal(identModalEl);
92		identModal.show();
93	}
94
95	// ------------------------------------------------------------------
96	// Schritt 2: Hinweis-Popup auf den Lead-Assistenten - NUR fuer Unternehmer, beim Verlassen
97	// ------------------------------------------------------------------
98
99	function injectHintModal() {
100		if (document.getElementById('sgHintModal')) return;
101
102		var html =
103			'<div class="modal fade" id="sgHintModal" tabindex="-1" aria-labelledby="sgHintLabel" aria-hidden="true">' +
104			'  <div class="modal-dialog modal-dialog-centered">' +
105			'    <div class="modal-content">' +
106			'      <div class="modal-body text-center p-4 p-md-5">' +
107			'        <h4 class="mb-3" id="sgHintLabel">Bevor du gehst...</h4>' +
108			'        <p class="text-muted mb-4">

108Hast du schon deinen kostenlosen Potenzial-Check gemacht? Dauert nur 2 Minuten und zeigt dir, wie viel Gutschein Umsatz du gerade liegen lässt.</p>' +
109			'        <div class="d-grid gap-2">' +
110			'          <a href="' + LEAD_URL + '" target="_blank" rel="noopener" class="btn btn-sg-red btn-lg">Jetzt Potenzial-Check starten</a>' +
111			'          <button type="button" class="btn btn-link text-muted" data-bs-dismiss="modal">Nein danke</button>' +
112			'        </div>' +
113			'      </div>' +
114			'    </div>' +
115			'  </div>' +
116			'</div>';
117
118		document.body.insertAdjacentHTML('beforeend', html);
119		hintModalEl = document.getElementById('sgHintModal');
120	}
121
122	function showHintModal() {
123		if (typeof bootstrap === 'undefined' || !bootstrap.Modal) return;
124		injectHintModal();
125		if (!hintModal) hintModal = new bootstrap.Modal(hintModalEl);
126		hintModal.show();
127
128		_paq.push(['trackEvent', 'Website', 'Popup beim Verlassen', 'potential_analyse']);
129		markHintShown();
130	}
131
132	function injectMobileHintCta() {
133		// Ersatz fuer Exit-Intent auf Touch-Geraeten (dort gibt es kein "Maus verlaesst
134		// Viewport"-Signal) - kleine feste Erinnerung, nur fuer Unternehmer sichtbar (d-lg-none)
135		if (document.getElementById('sgLeadHintCta')) return;
136
137		var html =
138			'<a href="' + LEAD_URL + '" target="_blank" rel="noopener" id="sgLeadHintCta" class="btn btn-sg-red sg-lead-switch-cta d-lg-none">' +
139			'Kostenloser Potenzial-Check' +
140			'</a>';
141
142		document.body.insertAdjacentHTML('beforeend', html);
143	}
144
145	function setupExitIntentHint() {
146		// nur Desktop/Maus - auf Touch-Geraeten gibt es kein zuverlaessiges "Maus verlaesst
147		// Viewport"-Signal, dort greift stattdessen die Ecken-CTA (injectMobileHintCta)
148		if (window.matchMedia && window.matchMedia('(hover: none)').matches) return;
149
150		document.addEventListener('mouseout', function (e) {
151			if (getRole() !== 'merchant') return; // Kaeufer sehen diesen Hinweis nie
152			if (hintAlreadyShown()) return;
153			if (e.clientY > 0) return; // nur wenn die Maus Richtung Browser-oben (Tabs/Adressleiste) verlaesst
154			if (e.relatedTarget || e.toElement) return; // Maus ist innerhalb der Seite geblieben (anderes Element)
155			showHintModal();
156		});
157	}
158
159	function ready(fn) {
160		// falls das Script erst spaet eingebunden wird (z.B. am Ende von <body> ohne defer),
161		// ist DOMContentLoaded zu dem Zeitpunkt oft schon durchgelaufen - der Listener wuerde
162		// dann NIE feuern. readyState pruefen und im Zweifel sofort ausfuehren.
163		if (document.readyState === 'loading') {
164			document.addEventListener('DOMContentLoaded', fn);
165		} else {
166			fn();
167		}
168	}
169
170	ready(function () {
171		var role = getRole();
172		if (!role) {
173			showIdentModal();
174		} else if (role === 'merchant') {
175			injectMobileHintCta();
176		}
177		setupExitIntentHint();
178	});
179})();