|
| 1 | +import { DOMReady } from '../helpers/documentReady'; |
| 2 | +import { isMobile } from '../utils/isMobile'; |
| 3 | +import { getGeoloc, getAppBaseUrl } from 'geo-locate'; |
| 4 | +import { UTMCookies } from '../utms'; |
| 5 | +import { getSignupFailover } from 'signup-failover'; |
| 6 | +import Modal from 'bootstrap/js/dist/modal'; |
| 7 | + |
| 8 | +const signupIframe = document.querySelector('#signUpIframe'); |
| 9 | +const ddc = { |
| 10 | + lang: "", |
| 11 | + env: document.documentElement.dataset.env, |
| 12 | + getLanguage: function () { |
| 13 | + const langAttr = document.querySelector("html").lang; |
| 14 | + }, |
| 15 | +}; |
| 16 | + |
| 17 | +const getLanguageParam = () => { |
| 18 | + let lang = ""; |
| 19 | + let langParam = ""; |
| 20 | + |
| 21 | + if (document.documentElement.lang) { |
| 22 | + lang = document.documentElement.lang; |
| 23 | + } else { |
| 24 | + lang = ddc.lang; |
| 25 | + } |
| 26 | + |
| 27 | + // TODO this is likely broken if ddc.lang returns full name. Needs to be fixed |
| 28 | + if ( |
| 29 | + lang === "fr" || |
| 30 | + lang === "es" || |
| 31 | + lang === "de" || |
| 32 | + lang === "ja" || |
| 33 | + lang === "ko" |
| 34 | + ) { |
| 35 | + langParam = `lang=${lang}`; |
| 36 | + } else { |
| 37 | + langParam = ""; |
| 38 | + } |
| 39 | + |
| 40 | + return langParam; |
| 41 | +}; |
| 42 | + |
| 43 | +const appendUrlQueryParams = (url) => { |
| 44 | + let completeUrl = url; |
| 45 | + let operator = completeUrl.includes("?") ? "&" : "?"; |
| 46 | + const currentUrl = new URL(window.location.href); |
| 47 | + const currentParams = currentUrl.searchParams; |
| 48 | + |
| 49 | + // If non-english lang, append param |
| 50 | + if (getLanguageParam()) { |
| 51 | + completeUrl += `${operator}${getLanguageParam()}`; |
| 52 | + operator = "&"; |
| 53 | + } |
| 54 | + |
| 55 | + // If mobile, append param |
| 56 | + if (isMobile()) { |
| 57 | + completeUrl += `${operator}mobile=true`; |
| 58 | + operator = "&"; |
| 59 | + } |
| 60 | + |
| 61 | + const allCookies = UTMCookies.getAll(); |
| 62 | + let customSignupUTM = ["gclid", "MSCLKID", "_mkto_trk"]; // harcoded list of UTM params to preserve |
| 63 | + for (const [key, value] of Object.entries(allCookies)) { |
| 64 | + // If the cookie value exists in the pre-defined list of desired UTM params, append it to the URL |
| 65 | + if (customSignupUTM.includes(key)) { |
| 66 | + completeUrl += `${operator}${key}=${encodeURIComponent(value)}`; |
| 67 | + operator = "&"; |
| 68 | + } |
| 69 | + } |
| 70 | + |
| 71 | + // Rebuild UTM params from original query params |
| 72 | + let utmParam = false; |
| 73 | + currentParams.forEach((value, key) => { |
| 74 | + if (key.startsWith("utm")) { |
| 75 | + utmParam = true; |
| 76 | + completeUrl += `${operator}${`dd-${key.replace( |
| 77 | + "_", |
| 78 | + "-" |
| 79 | + )}`}=${encodeURIComponent(value)}`; |
| 80 | + operator = "&"; |
| 81 | + } |
| 82 | + }); |
| 83 | + |
| 84 | + // If no UTM values were detected in query params, check to see if they already exist as a cookie |
| 85 | + if (!utmParam) { |
| 86 | + const allCookies = UTMCookies.getAll(); |
| 87 | + for (const [key, value] of Object.entries(allCookies)) { |
| 88 | + if (key.includes("dd-utm")) { |
| 89 | + completeUrl += `${operator}${key}=${encodeURIComponent(value)}`; |
| 90 | + operator = "&"; |
| 91 | + } |
| 92 | + } |
| 93 | + } |
| 94 | + |
| 95 | + // Try to append RUM device ID and session ID |
| 96 | + if (window.DD_RUM) { |
| 97 | + const rumDeviceId = window.DD_RUM.getUser() |
| 98 | + ? window.DD_RUM.getUser().device_id |
| 99 | + : null; |
| 100 | + if (rumDeviceId) { |
| 101 | + completeUrl += `${operator}dd-device-id=${rumDeviceId}`; |
| 102 | + operator = "&"; |
| 103 | + } |
| 104 | + const rumSessionId = window.DD_RUM.getInternalContext() |
| 105 | + ? window.DD_RUM.getInternalContext().session_id |
| 106 | + : null; |
| 107 | + if (rumSessionId) { |
| 108 | + completeUrl += `${operator}dd-session-id=${rumSessionId}`; |
| 109 | + operator = "&"; |
| 110 | + } |
| 111 | + } |
| 112 | + |
| 113 | + // Attempt to extract sweepstakes URL |
| 114 | + const sweepstakesUrl = document.getElementById("signup") |
| 115 | + ? document.getElementById("signup").getAttribute("data-sweepstakes-url") |
| 116 | + : ""; |
| 117 | + if (sweepstakesUrl) { |
| 118 | + completeUrl += `${operator}sweepstakes_url=${encodeURIComponent( |
| 119 | + sweepstakesUrl |
| 120 | + )}`; |
| 121 | + operator = "&"; |
| 122 | + } |
| 123 | + |
| 124 | + return completeUrl; |
| 125 | +}; |
| 126 | + |
| 127 | +const loadSignupFormInFrame = (iframeElement, url) => { |
| 128 | + if (iframeElement) { |
| 129 | + iframeElement.src = url; |
| 130 | + |
| 131 | + // handle a loading issue |
| 132 | + let iframeLoadIssueHandler = () => { |
| 133 | + let newUrl = url.replace("_corp", ""); |
| 134 | + window.open(newUrl); |
| 135 | + |
| 136 | + const modalBody = document.querySelector( |
| 137 | + "#signupModal > div > .modal-content" |
| 138 | + ); |
| 139 | + modalBody.innerHTML = `<div class="text-center small w-100 my-3 p-5">Signup Form loading error. <a href="${newUrl}" class="text-underline text-purple-600" target=_blank>Click here</a> to open in a new window</div>`; |
| 140 | + }; |
| 141 | + |
| 142 | + // if adblock detected & we are trying to load eu signup iframe then show error and open in a new tab |
| 143 | + // until datadoghq.eu is removed from 3rd party blocking lists |
| 144 | + if (url.indexOf(".eu") !== -1 && !document.getElementById("TxFnCdowUQWB")) { |
| 145 | + iframeLoadIssueHandler(); |
| 146 | + } |
| 147 | + |
| 148 | + openSignupModal(); |
| 149 | + } |
| 150 | +}; |
| 151 | + |
| 152 | +document.querySelectorAll('.sign-up-trigger').forEach(item => { |
| 153 | + item.addEventListener('click', (event) => { |
| 154 | + event.preventDefault(); |
| 155 | + |
| 156 | + getSignupFailover().then((failoverEnabled) => { |
| 157 | + if (failoverEnabled) { |
| 158 | + const demoModal = document.querySelector('#signupDemo'); |
| 159 | + const signupDemoModal = demoModal ? new Modal(demoModal) : null; |
| 160 | + if(signupDemoModal) { |
| 161 | + signupDemoModal.show(item); |
| 162 | + } |
| 163 | + } else { |
| 164 | + initSignup(); |
| 165 | + } |
| 166 | + }); |
| 167 | + }) |
| 168 | +}) |
| 169 | + |
| 170 | +const initSignup = () => { |
| 171 | + let baseUrl = ""; |
| 172 | + let completeUrl = ""; |
| 173 | + let cleanCenter = "true"; |
| 174 | + let eventV2Param = "&event_v2=true"; |
| 175 | + |
| 176 | + if (document.querySelector(".clean-center-false")) { |
| 177 | + cleanCenter = "false"; |
| 178 | + } |
| 179 | + |
| 180 | + // Event v2 cannot simply be set to false, it must be omitted |
| 181 | + if (document.querySelector(".event-v2-false")) { |
| 182 | + eventV2Param = ""; |
| 183 | + } |
| 184 | + |
| 185 | + // Get users location and set the signup url accordingly |
| 186 | + getGeoloc().then((loc) => { |
| 187 | + baseUrl = `https://${getAppBaseUrl(loc.appRegion)}/signup_corp?lang=${ |
| 188 | + document.documentElement.lang |
| 189 | + }`; |
| 190 | + completeUrl = appendUrlQueryParams(baseUrl); |
| 191 | + loadSignupFormInFrame(signupIframe, completeUrl); |
| 192 | + }); |
| 193 | +}; |
| 194 | + |
| 195 | +const openSignupModal = () => { |
| 196 | + const signupModal = new Modal(document.getElementById('signupModal')); |
| 197 | + signupModal.show(); |
| 198 | +}; |
| 199 | + |
| 200 | +const handleDOMReady = () => { |
| 201 | + // Get users location during page load so dont have to wait on CTA click |
| 202 | + getGeoloc(); |
| 203 | +}; |
| 204 | + |
| 205 | +DOMReady(handleDOMReady); |
0 commit comments