{"webLayers":[{"_id":"69400016b38d56545704e5b0","date_filter":{"enabled":false,"from_date":null,"to_date":null},"trigger":{"include_pages":[{"url":"atptour.com/en?thank-you","type":"contains"}],"exclude_pages":null},"device_target":{"type":"any"},"frequency":"always","uses_personalization":false,"data":"return (function insertBanner(data) {\ninsertBanner.inPreview = false;\ninsertBanner.sdk = window.exponea;\ninsertBanner.data = data;\ninsertBanner.html = \"\u003cdiv\u003e\\n\\t\u003cdiv class=\\\"thank-you-banner\\\"\u003e\\n    \u003cbutton aria-label=\\\"Close\\\" class=\\\"close\\\"\u003e\\n\\t\u003csvg width=\\\"20\\\" height=\\\"20\\\" viewBox=\\\"0 0 20 20\\\" fill=\\\"none\\\" xmlns=\\\"http://www.w3.org/2000/svg\\\"\u003e\\n\\t    \u003cpath d=\\\"M4 4L16 16\\\" stroke=\\\"#000\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"/\u003e\\n\\t    \u003cpath d=\\\"M4 16L16 4\\\" stroke=\\\"#000\\\" stroke-width=\\\"2\\\" stroke-linecap=\\\"round\\\" stroke-linejoin=\\\"round\\\"/\u003e\\n\\t\u003c/svg\u003e\\n    \u003c/button\u003e\\n\\t\u003cdiv class=\\\"content-wrapper\\\"\u003e\\n\\t\\t\u003cimg class=\\\"weblayer__img\\\" src=\\\"https://brxcdn.com/eng-app-storage/bfbfcfc0-ba2c-11ee-a3f9-c6fa5202914d/media/original/3aad43da-d9b0-11f0-9fb8-024adce56214\\\" alt=\\\"You're in! | ATP\\\" /\u003e\\n        \u003cdiv class=\\\"text-wrapper\\\"\u003e\\n\\t        \u003ch2 class=\\\"heading\\\"\u003e\\n\\t            Thanks for signing up for newsletters from ATP\u0026nbsp;Tour. Get ready to receive updates about your favourite players and tournaments!\\n\\t        \u003c/h2\u003e\\n\\t    \\t\u003ch3 class=\\\"heading__second\\\"\u003e\\n\\t            To make sure our mailings reach your inbox, you\\u2019ll want to add \u003cb\u003ecredential@email.atptour.com\u003c/b\u003e to your address book.\\n\\t        \u003c/h3\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/div\u003e\\n\u003cdiv class=\\\"grayout\\\"\u003e\u003c/div\u003e\\n\u003c/div\u003e\";\ninsertBanner.style = \".grayout{\\n\\tposition: fixed;\\n\\ttop: 0;\\n\\tleft: 0;\\n\\tright: 0;\\n\\tbottom: 0;\\n\\twidth: 100vw;\\n\\theight: 100vh;\\n\\tbackground-color: rgba(0, 0, 41, 0.7);\\n\\tz-index: 1000;\\n}\\n\\n.thank-you-banner{\\n\\t/*margin: 2px;*/\\n\\tz-index: 999999;\\n\\tposition: fixed;\\n\\tmax-width: 660px;\\n\\t/*width: 100%;*/\\n\\t/*background-color: #fff;*/\\n\\tborder-radius: 12px;\\n\\ttop: 50%;\\n\\tleft: 50%;\\n\\ttransform: translate(-50%, -50%);\\n\\tdisplay: flex;\\n\\talign-items: center;\\n\\tfont-family: inherit;\\n\\tbox-sizing: border-box;\\n\\toverflow: hidden;\\n\\tmax-height: calc(100vh - 16px);\\n}\\n\\n.thank-you-banner * {\\n\\tbox-sizing: border-box;\\n}\\n\\n.thank-you-banner .close{\\n\\tbackground: white !important;\\n\\tborder: none !important;\\n\\tborder-radius: 4px;\\n\\tposition: absolute !important;\\n\\tright: 10px !important;\\n\\ttop: 10px !important;\\n\\tcursor: pointer !important;\\n\\tz-index: 99999 !important;\\n\\tpadding-top: 4px;\\n}\\n\\n.content-wrapper{\\n\\tpadding: 0px;\\n\\twidth: 100%;\\n\\tdisplay: flex;\\n\\tflex-direction: column;\\n\\talign-items: flex-start;\\n\\tz-index: 999;\\n\\ttext-align: center;\\n}\\n\\n.text-wrapper {\\n\\tpadding: 1.5rem;\\n\\talign-items: center;\\n\\tbackground-color: #fff;\\n}\\n\\n.weblayer__img--box{\\n\\tposition: absolute;\\n    right: -9%;\\n    top: 15%;\\n    display: flex;\\n    width: 46%;\\n}\\n\\n.weblayer__img{\\n\\twidth: 100%;\\n\\tdisplay: block;\\n}\\n\\n.heading,\\n.heading__second{\\n\\tcolor: #000000;\\n    letter-spacing: 0.5px;\\n    margin: 0;\\n}\\n\\n.heading{\\n\\tfont-size: 24px;\\n\\tfont-weight: 600;\\n\\tmargin-bottom: 8px;\\n}\\n\\n.heading__second{\\n\\tfont-size: 16px;\\n\\t/*width: 77%;*/\\n\\tfont-weight: 500;\\n\\tmargin: auto;\\n}\\n\\n.button{\\n\\tmargin-top: 24px;\\n\\tpadding: 16px 20px 16px 20px;\\n\\tborder: 0;\\n\\tfont-size: 18px;\\n\\tfont-family: inherit;\\n\\tborder-radius: 6.944vw;\\n\\tfont-weight: 500;\\n\\tcolor: white;\\n\\tbackground: linear-gradient(90deg, #0037EB -26.47%, #7850FA 97.77%);\\n\\tline-height: 1;\\n\\ttext-decoration: none;\\n\\tcursor: pointer;\\n\\tmin-width: 150px;\\n}\\n\\n.special-color{\\n\\tcolor: #ffffff;\\n\\tfont-weight: 700;\\n}\\n\\n.show-mobile{\\n\\tdisplay: none;\\n}\\n\\n@media screen and (max-width: 875px) {\\n\\t.show-mobile{\\n\\t\\tdisplay: block;\\n\\t}\\n\\t\\n\\t.thank-you-banner{\\n\\t\\tmax-width: 600px;\\n\\t\\twidth: 95%;\\n        /*min-height: 500px;*/\\n        overflow: hidden;\\n        align-items: flex-start;\\n\\t}\\n\\t\\n\\t.heading{\\n\\t\\tfont-size: 20px;\\n\\t}\\n\\t\\n\\t.heading__second{\\n\\t\\tfont-size: 16px;\\n\\t\\twidth: 100%;\\n\\t\\tmargin-top: 8px;\\n\\t}\\n\\t\\n\\t.button{\\n\\t\\tfont-size: 16px;\\n\\t\\tmargin-top: 8px;\\n\\t    width: 100%;\\n\\t}\\n\\t\\n\\t.content-wrapper{\\n\\t\\twidth: 100%;\\n\\t\\talign-items: center;\\n\\t\\ttext-align: center;\\n\\t}\\n\\n\\t.text-wrapper {\\n\\t\\tpadding: 1rem;\\n\\t}\\n\\t\\n\\t.weblayer__img--box{\\n\\t    right: 0%;\\n        top: 54%;\\n        width: 100%;\\n\\t}\\n\\t\\n\\t.weblayer__img{\\n\\t\\twidth: 100%;\\n\\t}\\n}\";\ninsertBanner.script = function() { /**\n * Universal parameters\n */\nvar PARAM_showAfter = parseInt(\"0\", 10);\nvar PARAM_removeAfter = parseInt(\"0\", 10);\nvar PARAM_trigger = \"On entry\";\nvar PARAM_parentElement = \"body\";\n\n/**\n * Initialization\n */\nvar self = this;\n\nvar webLayerID = self.data.banner_id;\nvar WEB_LAYER_EVENT_STORAGE_KEY_PREFIX = \"__exponea_banner_event__\";\nvar localStorageEnabled = false;\ntry {\n    if (!window.localStorage) {\n        localStorageEnabled = false;\n    } else {\n        var key = \"__\" + webLayerID + \"_storage_test__\";\n        window.localStorage.setItem(key, key);\n        window.localStorage.removeItem(key);\n        localStorageEnabled = true;\n    }\n} catch (e) {\n    localStorageEnabled = false;\n}\n\n// Helper Id used to identify the banner on the website, not actual ID of the banner\nvar bannerSemiId = Math.random().toString(36).substring(5);\n\n// Used in onExit banners to mark if the banner was triggered already\nwindow['__exp_triggered-' + bannerSemiId] = false;\n\n// Resetting some of the parameters while previewing the banner in the app to easily see its appearance\nif (self.inPreview) {\n    // reset the show delay while editing the banner in editor\n    PARAM_showAfter = 0;\n\n    // always show the banner right away\n    PARAM_trigger = 'On entry';\n}\n\n/**\n * Basic functions\n */\n\n/**\n * Function used to register listener for the trigger that will display the banner\n */\nfunction registerStartTrigger() {\n    if (PARAM_trigger === 'On exit') {\n        document.body.addEventListener('mouseout', onExitMouseOutHandler);\n    } else if (PARAM_trigger === 'On scroll') {\n        window.addEventListener('scroll', scheduleShowBanner);\n    } else {\n        // If 'On entry' or anything unknown start the banner right away\n        scheduleShowBanner();\n    }\n}\n\n/**\n * This function starts the showAfter timer and then displays the banner\n */\nfunction scheduleShowBanner() {\n    window.removeEventListener('scroll', scheduleShowBanner);\n\n    setTimeout(function() {\n        // Track show event after timer expired\n        trackEvent('show', false);\n\n        // Create and display the banner\n        requestAnimationFrame(createBanner);\n\n        // If removeAfter is provided start the removal timer\n        if (PARAM_removeAfter \u003e 0) {\n            setTimeout(function() {\n                removeBanner();\n            }, PARAM_removeAfter);\n        }\n    }, PARAM_showAfter);\n}\n\n/**\n * Function used to insert the banner contents into the HTML and adding basic functionality\n */\nfunction createBanner() {\n    var placeholder = document.createElement('div');\n    placeholder.insertAdjacentHTML('afterbegin', self.html);\n\n    // get the banner reference\n    var banner = placeholder.firstElementChild;\n\n    // add close functionality to the close button\n    banner.querySelector('.close').onclick = handleCloseButtonClick;\n    banner.querySelector('.grayout').onclick = handleCloseButtonClick; \n\n    // insert banner CSS into the website\n    banner.insertAdjacentHTML('afterbegin', '\u003cstyle\u003e' + self.style + '\u003c/style\u003e');\n\n    // track clicking on the banner itself\n    trackLink(banner, 'click', true);\n\n    // track clicking on \u003ca\u003e in the banner\n    var links = banner.querySelectorAll('a');\n    for (var i = 0; i \u003c links.length; i++) {\n        trackLink(links[i], 'click', true);\n    }\n\n    attachBannerToDom(banner);\n}\n\n/**\n * Function used to insert the banner HTML to the DOM\n * @param banner - html content of the banner\n */\nfunction attachBannerToDom(banner) {\n    var parentElement = document.querySelector(PARAM_parentElement);\n\n    // use shadow DOM if browser suports it\n    if (parentElement.attachShadow) {\n        createBannerInShadowDom(banner, parentElement);\n    } else {\n        parentElement.insertAdjacentElement('afterbegin', banner);\n        self.banner = banner;\n    }\n}\n\n/**\n * Creates banner in shadow dom\n * @param parentElement\n */\nfunction createBannerInShadowDom(banner, parentElement) {\n    var shadowHost = document.createElement('div');\n    shadowHost.innerHTML = getFontsImport();\n\n    var shadowRoot = shadowHost.attachShadow({ mode: 'open' });\n    shadowRoot.appendChild(banner);\n    parentElement.insertAdjacentElement('afterbegin', shadowHost);\n    self.banner = shadowHost;\n}\n\n/**\n * Function used to add fonts imports and font faces to element\n * The font import does not work inside shadow DOM, it has to be declared outside\n * @returns string - style tag with fonts import\n */\nfunction getFontsImport() {\n    var importsResult = self.style.match(/@import url\\([\"'].+?['\"]\\)/g);\n    var fontFacesResult = self.style.match(/@font-face( |\\n)*{(.|\\s)+?}/g);\n\n    var imports = importsResult \u0026\u0026 importsResult.length ? importsResult.join(';') : '';\n    var fontFaces = fontFacesResult \u0026\u0026 fontFacesResult.length ? fontFacesResult.join('') : '';\n    var fonts = (imports ? imports + ';' : '') + fontFaces;\n\n    return imports || fontFaces ? '\u003cstyle\u003e' + fonts + '\u003c/style\u003e' : '';\n}\n\n/**\n * Function used to remove the banner from the website\n */\nfunction removeBanner() {\n    if (self.banner \u0026\u0026 self.banner.parentNode) {\n        self.banner.parentNode.removeChild(self.banner);\n    }\n}\n\n/**\n * Function triggered when the closing button is clicked\n * @param event - browser click Event\n * @returns {boolean}\n */\nfunction handleCloseButtonClick(event) {\n    removeBanner();\n    trackEvent('close', true);\n\n    // Stop the click event propagation onto parent HTML elements\n    event.preventDefault();\n    if (event.stopPropagation) {\n        event.stopPropagation();\n    } else {\n        event.cancelBubble = true;\n    }\n\n    return false;\n}\n\n/**\n * Function used to track single action\n * @param action - string\n * @param interactive - boolean\n */\nfunction trackEvent(action, interactive) {\n    if (action === 'show') {\n        trackAction('last_show');\n    }\n\n    if (interactive) {\n        trackAction('last_interaction')\n    }\n\n    self.sdk.track('banner', getEventProperties(action, interactive));\n}\n\n/**\n * Function used to add action tracking to element\n * @param link - element\n * @param action - string\n * @param interactive - boolean\n */\nfunction trackLink(link, action, interactive) {\n    var linkClickHandler = function() {\n        if (interactive) {\n            trackAction('last_interaction');\n        }\n    }\n    link.addEventListener('click', linkClickHandler);\n\n    var eventData = getEventProperties(action, interactive);\n    eventData.link = link.href;\n    self.sdk.trackLink(link, 'banner', eventData);\n}\n\n/**\n * Default attributes tracked with every banner event\n * @param action - string\n * @param interactive - boolean\n * @returns object - object to be tracked\n */\nfunction getEventProperties(action, interactive) {\n    return {\n        action: action,\n        action_id: self.data.node_id,\n        banner_id: self.data.banner_id,\n        banner_name: self.data.banner_name,\n        banner_type: self.data.banner_type,\n        campaign_id: self.data.campaign_id,\n        variant_id: self.data.variant_id,\n        variant_name: self.data.variant_name,\n        variant_origin: self.data.contextual_personalization != null ? 'contextual personalisation' : 'ABtest',\n        interaction: interactive !== false,\n    };\n}\n\n/**\n * Function used to start banners with onExit trigger\n * @param event - browser mouse event\n */\nfunction onExitMouseOutHandler(event) {\n    event = event ? event : window.event;\n    var vpWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);\n    if (event.clientX \u003e= (vpWidth)) {\n        return;\n    }\n    if (event.clientY \u003e= 50) {\n        return;\n    }\n    var from = event.relatedTarget || event.toElement;\n\n    if (!from \u0026\u0026 !window['__exp_triggered-' + bannerSemiId]) {\n        window['__exp_triggered-' + bannerSemiId] = true;\n        scheduleShowBanner();\n    }\n}\n\n/**\n * Track an action with current time into localStorage if localStorage exists.\n * @param action - action name\n */\nfunction trackAction(action) {\n    if (!localStorageEnabled) {\n        return;\n    }\n\n    var actionKey = WEB_LAYER_EVENT_STORAGE_KEY_PREFIX + webLayerID + '_' + action;\n    window.localStorage.setItem(actionKey, new Date().valueOf().toString());\n}\n\n/**\n * Register the start trigger and return required removal function\n */\n\nregisterStartTrigger();\nreturn {\n    remove: removeBanner,\n};\n };\ninsertBanner.remove = (insertBanner.script.call(insertBanner) || {} ).remove;\ninsertBanner.contextual_personalization = {};\nreturn insertBanner;\n})({\"banner_id\": \"69400016b38d56545704e5b0\", \"banner_name\": null, \"banner_type\": \"medium_rectangle\", \"banner_group\": \"\", \"variant_id\": 0, \"variant_name\": \"Variant A\"});","variables_target":null,"page_vars":[]}],"experiments":[],"constantManagedTags":[],"vars":{"data":[]}}