An error has occurred

{{terminalError}}

Angebot auswählen
und weiterlesen oder weiterhören

Probeabo Basis

11,99 € 0,00 €

Nach 4 Wochen kostet das Abo 11,99 € mtl., nach 12 Monaten 16,99 € mtl.

Alle Artikel lesen
4 Wochen kostenlos
Monatlich kündbar

Jetzt kostenlos testen Probeabo Basis für Studierende

Jahresabo Basis

119,00 €

Nach 12 Monaten kostet das Abo 16,99 € mtl.

Alle Artikel lesen
Ein Jahr zum Vorteilspreis
Danach monatlich kündbar

Jetzt bestellen Jahresabo Basis für Studierende für 99 €

Alle Abos vergleichen

function sendLogToParent(logMessage, status, error, context) { var { message, code, cause, name, stack } = error ? error : {}; var contextWithParams = {...context, pianoParams: { ...{{params}} }, templateError: { message, code, cause, name, stack } }; var sendLogMessage = { name: 'sendLog', payload: { status, message: logMessage, context: contextWithParams } }; console.log(sendLogMessage); parent.postMessage(JSON.stringify(sendLogMessage), contextWithParams.url); } try { var EVENT_PAYWALL_LOADED = 'paywallInit'; var EVENT_PAYWALL_OFFER_CLICKED = 'paywallOfferClick'; var EVENT_ALL_OFFERS_COMPARE_CLICKED = 'paywallOfferLpClick'; var EVENT_LOGIN_CLICKED = 'paywallLoginButtonClicked'; var EVENT_DROPDOWN_CLICKED = 'offerpageDropdownClick'; // Content fields are registered here once. The rest of the code below should stay content-field agnostic. var ContentFields = { plenigoBaseUrl: 'https://checkout.sueddeutsche.de', osc3BaseUrl: 'https://abo.sueddeutsche.de', offer1CheckoutProvider: 'plenigo'.toLowerCase(), offer1CheckoutWT: 'P2STA11', offer1CheckoutWA: 'DSB4WN', offer1DiscountCheckoutProvider: 'osc3'.toLowerCase(), offer1DiscountWT: 'P2STA11', offer1DiscountWA: 'DSBS4WK3', offer2CheckoutProvider: 'osc3'.toLowerCase(), offer2CheckoutWT: 'P2STA11', offer2CheckoutWA: 'DSB12MNO', offer2DiscountCheckoutProvider: 'osc3'.toLowerCase(), offer2DiscountWT: 'P2STA11', offer2DiscountWA: 'DSB12MNS', allOffersBaseUrl: 'https://produkte.sueddeutsche.de/angebotsseite/', allOffersWT: 'P2STA11LP', allOffersOfferId: '', } function addEventListenerWithErrorHandler(htmlElement, eventName, handler) { try{ var fn = function() { try { return handler.bind(htmlElement)(...arguments); } catch (err) { sendLogToParent(`error in ${eventName} event handler`, 'error', err, {args: arguments}); } } htmlElement.addEventListener(eventName, fn); } catch (e) { sendLogToParent('addEventListenerWithErrorHandler: error registering event listener', 'error', e, { htmlElement, eventName, handler }); } } function setClickListeners() { var offerElements = document.querySelectorAll('#offerpage-offer-top, #offerpage-offer-bottom'); if(offerElements.length === 0) { sendLogToParent('setClickListeners: offer elements are not defined', 'error'); } else { offerElements.forEach(element => addEventListenerWithErrorHandler(element, "click", (event) => toggleActive(event, element))); } var checkoutButtons = document.querySelectorAll('#offer-1-checkout-link, #offer-1-checkout-discount-link, #offer-2-checkout-link, #offer-2-checkout-discount-link'); if(checkoutButtons.length === 0) { sendLogToParent('setClickListeners: checkout button elements are not defined', 'error'); } else { checkoutButtons.forEach((element) => { addEventListenerWithErrorHandler(element, 'click', trackCheckoutButtonClick); addEventListenerWithErrorHandler(element, 'click', checkoutBtnClick); }); } var loginButton = document.querySelector('#login-button'); if (loginButton) { addEventListenerWithErrorHandler(loginButton, 'click', onLoginClick); } } function sendTrackingEvent(partialData = {}) { var { url } = {{ params }}; var staticData = getStaticTrackingData(); var trackingPayload = { ...staticData, ...partialData }; var message = JSON.stringify({ name: 'sendTrackingData', payload: trackingPayload }); parent.postMessage(message, urlParams.url); } function getStaticTrackingData() { var { experienceId, templateId, templateVariantId } = {{ params }}; var { offer1CheckoutWA, offer1DiscountWA, offer2CheckoutWA, offer2DiscountWA, offer1CheckoutWT, offer1DiscountWT, offer2CheckoutWT, offer2DiscountWT } = ContentFields; var wtIds = [offer1CheckoutWT, offer1DiscountWT, offer2CheckoutWT, offer2DiscountWT]; var waIds = [offer1CheckoutWA, offer1DiscountWA, offer2CheckoutWA, offer2DiscountWA]; var paywallWTList = wtIds.join(','); var paywallOffers = waIds.map(offer => `offer_${offer}`).toString(); var trackingData = { paywallOffers, paywallWTList, paywallExperienceId: experienceId, paywallTemplateId: templateId, paywallTemplateVariantId: templateVariantId, paywallType: 'piano-paywall' }; return trackingData; } function toggleActive(event, elemToToggle) { var isActive = elemToToggle.classList.contains("active"); var isDisclosureButton = event.target.closest(".offerpage-offer-disclosure-button"); if (isActive && !isDisclosureButton) return; if (!isActive) { var activeElements = document.querySelectorAll(".offerpage-offer.active"); activeElements.forEach((elem) => { elem.classList.toggle("active"); }); var offer_id; if (elemToToggle.id === 'offerpage-offer-top') { offer_id = ContentFields.offer1CheckoutWA; } else if (elemToToggle.id === 'offerpage-offer-bottom') { offer_id = ContentFields.offer2CheckoutWA; } else { sendLogToParent('offerpage-offer container: id unexpected or missing', 'warn', undefined, { id: elemToToggle.id }); } sendTrackingEvent({ event: EVENT_DROPDOWN_CLICKED, offer_id, }); } elemToToggle.classList.toggle("active"); } function getParentSiteUrlWithoutReduced() { var embeddingUrlString = document.getElementById('piano-data').getAttribute('data-embedding-url'); var embeddingUrl = new URL(embeddingUrlString); embeddingUrl.searchParams.delete('reduced'); return embeddingUrl.toString(); } function createOfferUrlPlenigo(wt, wa, htmlElement, plenigoBaseUrl) { var embeddingUrl = getParentSiteUrlWithoutReduced(); var url = new URL('/checkout', plenigoBaseUrl); if (wt) { url.searchParams.append('wt', wt); } if (wa) { url.searchParams.append('wa', wa); } if (embeddingUrl) { url.searchParams.append('returnto', embeddingUrl); } htmlElement.href = url.href; } function createOfferUrlOsc3(wt, wa, htmlElement, osc3BaseUrl) { var embeddingUrlString = getParentSiteUrlWithoutReduced(); var url = new URL('/neubestellung/abo/', osc3BaseUrl); if (wt) { url.searchParams.append('wt', wt); } if (wa) { url.searchParams.append('wa', wa); } url.searchParams.append('sourceurl', embeddingUrlString); htmlElement.href = url.href; } function trackCheckoutButtonClick() { var wa = 'offer_' + this.dataset.wa; var wt = this.dataset.wt; sendTrackingEvent({ event: EVENT_PAYWALL_OFFER_CLICKED, 'paywallClickedOfferId': wa, 'paywallClickedWT': wt }); } function checkoutBtnClick(event) { event.preventDefault(); parent.postMessage(JSON.stringify({ name: 'handlePaywallCheckout', payload: { href: this.dataset.href }}), urlParams.url); } function initCheckoutButton(htmlElementId, provider, wt, wa, contentFields) { var htmlElement = document.getElementById(htmlElementId); var { plenigoBaseUrl, osc3BaseUrl } = contentFields; if (provider === 'plenigo') { createOfferUrlPlenigo(wt, wa, htmlElement, plenigoBaseUrl); } else if (provider === 'osc3') { createOfferUrlOsc3(wt, wa, htmlElement, osc3BaseUrl); } else { sendLogToParent('initCheckoutButton: cannot create checkout url - provider unknown', 'error', undefined, { provider }); } htmlElement.dataset.wa = wa; htmlElement.dataset.wt = wt; htmlElement.dataset.href = htmlElement.href; } function initCheckoutLinks(contentFields) { var { offer1CheckoutProvider, offer1CheckoutWT, offer1CheckoutWA, offer1DiscountCheckoutProvider, offer1DiscountWT, offer1DiscountWA, offer2CheckoutProvider, offer2CheckoutWT, offer2CheckoutWA, offer2DiscountCheckoutProvider, offer2DiscountWT, offer2DiscountWA, } = contentFields; initCheckoutButton('offer-1-checkout-link', offer1CheckoutProvider, offer1CheckoutWT, offer1CheckoutWA, contentFields); initCheckoutButton('offer-1-checkout-discount-link', offer1DiscountCheckoutProvider, offer1DiscountWT, offer1DiscountWA, contentFields); initCheckoutButton('offer-2-checkout-link', offer2CheckoutProvider, offer2CheckoutWT, offer2CheckoutWA, contentFields); initCheckoutButton('offer-2-checkout-discount-link', offer2DiscountCheckoutProvider, offer2DiscountWT, offer2DiscountWA, contentFields); } function handleOfferCompareButtonClick() { sendTrackingEvent({ event: EVENT_ALL_OFFERS_COMPARE_CLICKED }); } function createOfferLandingPageUrl(contentFields) { var embeddingUrlString = getParentSiteUrlWithoutReduced(); var url = new URL(contentFields.allOffersBaseUrl); if (contentFields.allOffersWT) { url.searchParams.append('wt', contentFields.allOffersWT); } url.searchParams.append('returnToUrl', embeddingUrlString); if (contentFields.allOffersOfferId) { url.searchParams.append('offersId', contentFields.allOffersOfferId); } url.searchParams.append('serviceId', 'szde'); url.searchParams.append('articleUrl', embeddingUrlString); var offerCompareLinkElement = document.getElementById('offer-compare-link'); offerCompareLinkElement.href = url.href; offerCompareLinkElement.onclick = handleOfferCompareButtonClick; } function setUrls() { initCheckoutLinks(ContentFields); createOfferLandingPageUrl(ContentFields); } function setupUrlMutationListener() { var callback = ([mutation]) => { if (mutation.attributeName === 'data-embedding-url') { setUrls(); } }; var observer = new MutationObserver(callback); observer.observe(document.getElementById('piano-data'), {attributes: true}); } function validateContentFields() { for (const [contentFieldKey, contentFieldValue] of Object.entries(ContentFields)) { if(contentFieldValue.length === 0) { sendLogToParent('content field not set', 'warn', undefined, { contentFieldKey, contentFieldValue }); } } } function onLoginClick() { sendTrackingEvent({ event: EVENT_LOGIN_CLICKED }); parent.postMessage(JSON.stringify({name: 'paywallLogin'}), urlParams.url); } validateContentFields(); setUrls(); setClickListeners(); setupUrlMutationListener(); sendTrackingEvent({ event: EVENT_PAYWALL_LOADED }); } catch (e) { sendLogToParent('unhandeled error in template', 'error', e); }