From 36696cfc5c83d89a5436779392c91789715dbd00 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Thu, 26 Sep 2024 08:36:48 +0800 Subject: [PATCH 1/3] refactor: isolated changes made in https://github.com/deriv-com/webflow-deriv-com-scripts/pull/152 to avoid undesired code (which was rollbacked) from being merged --- src/js/footer/analytics/index.js | 199 +++++++++++++++++++++++++++++++ src/js/footer/index.js | 1 + 2 files changed, 200 insertions(+) create mode 100644 src/js/footer/analytics/index.js diff --git a/src/js/footer/analytics/index.js b/src/js/footer/analytics/index.js new file mode 100644 index 0000000..73e5699 --- /dev/null +++ b/src/js/footer/analytics/index.js @@ -0,0 +1,199 @@ +// +const setEvent = (event) => { + let storedEvents = []; + let cacheCookie = parseCookies(document.cookie, "cached_analytics_events"); + if (cacheCookie) storedEvents = JSON.parse(cacheCookie); + + storedEvents.push(event); + document.cookie = `cached_analytics_events=${JSON.stringify( + storedEvents + )}; path=/; Domain=.deriv.com`; +}; + +const trackEventWithCache = (event) => { + if (Analytics) { + Analytics?.Analytics?.trackEvent(event.name, event.properties); + } else { + setEvent(event); + } +}; + +window.addClickListener = function (button, eventName, eventProperties) { + if (button) { + button.addEventListener("click", function () { + trackEventWithCache({ + name: eventName, + properties: eventProperties, + }); + }); + } +}; +document.addEventListener("DOMContentLoaded", () => { + var btnLiveChat = document?.getElementsByClassName("livechatbtn"); + var btnWhatsapp = document?.getElementsByClassName("whatsapp_chat"); + var btnTradershub = document?.getElementsByClassName("tradershub-btn"); + var btnTryFreeDemo = document.querySelectorAll(".btn-free-demo .w-button"); + var btnTryFreeDemoFooter = document.querySelectorAll( + '.btn-free-demo [data-class="w-button"]' + ); + + const btnNavbarPrimary = document.querySelectorAll( + '[data-attributes="btn-primary-nav"]' + ); + const btnLoginNavbar = document.querySelectorAll( + '[data-attributes="btn-secondary-nav"]' + ); + + if (btnLiveChat) { + Array.from(btnLiveChat).forEach((button) => { + window.addClickListener(button, "ce_widget_usage_form", { + action: "click", + widget_name: "livechat", + }); + }); + } + if (btnWhatsapp) { + Array.from(btnWhatsapp).forEach((button) => { + window.addClickListener(button, "ce_widget_usage_form", { + action: "click", + widget_name: "whatsapp", + }); + }); + } + if (btnTradershub) { + Array.from(btnTradershub).forEach((button) => { + window.addClickListener(button, "ce_cta_clicks", { + action: "click", + cta_name: "Traders Hub", + }); + }); + } + if (btnTryFreeDemo) { + Array.from(btnTryFreeDemo).forEach((button) => { + window.addClickListener(button, "ce_cta_clicks", { + action: "click", + cta_name: "Try free demo", + }); + }); + } + if (btnTryFreeDemoFooter) { + Array.from(btnTryFreeDemoFooter).forEach((button) => { + window.addClickListener(button, "ce_cta_clicks", { + action: "click", + cta_name: "Try free demo", + }); + }); + } + + if (btnNavbarPrimary) { + Array.from(btnNavbarPrimary).forEach((button) => { + if (!button.classList.contains("tradershub-btn")) { + window.addClickListener(button, "ce_cta_clicks", { + action: "click", + cta_name: "Try free demo", + }); + } + }); + } + + if (btnLoginNavbar) { + Array.from(btnLoginNavbar).forEach((button) => { + window.addClickListener(button, "ce_cta_clicks", { + action: "click", + cta_name: "Login", + }); + }); + } + + const RUDDERSTACK_STAGING_KEY = process.env.RUDDERSTACK_STAGING_KEY; + const RUDDERSTACK_PRODUCTION_KEY = process.env.RUDDERSTACK_PRODUCTION_KEY; + const GB_STAGING_CLIENT_KEY = process.env.GB_STAGING_CLIENT_KEY; + const GB_STAGING_DECRYPTION_KEY = ""; + const GB_PROD_CLIENT_KEY = process.env.GB_PROD_CLIENT_KEY; + const GB_PROD_DECRYPTION_KEY = process.env.GB_PROD_DECRYPTION_KEY; + var GB_CLIENT_KEY, RUDDERSTACK_KEY, GB_DECRYPTION_KEY; + + if ( + window.location.hostname === "deriv.com" || + window.location.hostname === "deriv.be" || + window.location.hostname === "deriv.me" + ) { + GB_CLIENT_KEY = GB_PROD_CLIENT_KEY; + GB_DECRYPTION_KEY = GB_PROD_DECRYPTION_KEY; + RUDDERSTACK_KEY = RUDDERSTACK_PRODUCTION_KEY; + } else { + GB_CLIENT_KEY = GB_STAGING_CLIENT_KEY; + GB_DECRYPTION_KEY = GB_STAGING_DECRYPTION_KEY; + RUDDERSTACK_KEY = RUDDERSTACK_STAGING_KEY; + } + client_information = window.parseCookies( + document.cookie, + "client_information" + ); + const clientInfo = client_information ? JSON.parse(client_information) : null; + const utm_data_string = window.parseCookies(document.cookie, "utm_data"); + const utm_data = utm_data_string ? JSON.parse(utm_data_string) : {}; + const { utm_source, utm_medium, utm_campaign } = utm_data; + const cookies = window.parseCookies(document.cookie, "signup_device"); + let signupDevice = null; + const isBrowser = () => typeof window !== "undefined"; + const getLanguage = () => + isBrowser() ? localStorage.getItem("i18n") || navigator.language : null; + if (cookies) { + signupDevice = JSON.parse(cookies)?.signup_device || null; + } + const initialiseConfig = { + growthbookKey: GB_CLIENT_KEY, + growthbookDecryptionKey: GB_DECRYPTION_KEY, + rudderstackKey: RUDDERSTACK_KEY, + growthbookOptions: { + navigate: (url) => window.location.replace(url), + antiFlicker: false, + navigateDelay: 0, + attributes: { + country: + window.parseCookies(document.cookie, "clients_country") || + window.parseCookies(document.cookie, "website_status"), + user_language: + window.parseCookies(document.cookie, "user_language") || + getLanguage(), + device_language: + window.parseCookies(document.cookie, "language") || " ", + device_type: signupDevice, + utm_source: utm_data?.["utm_source"], + utm_medium: utm_data?.["utm_medium"], + utm_campaign: utm_data?.["utm_campaign"], + is_authorised: !!window.parseCookies( + document.cookie, + "client_information" + ), + loggedIn: !!window.parseCookies(document.cookie, "client_information"), + url: window.location.href, + }, + }, + }; + try { + Analytics?.Analytics.initialise(initialiseConfig); + // Analytics?.Analytics?.getInstances()?.ab?.GrowthBook?.loadFeatures(); + const userId = clientInfo?.user_id + ? clientInfo?.user_id + : Analytics?.Analytics?.getInstances?.().tracking?.getAnonymousId(); + Analytics?.Analytics?.identifyEvent(userId); + } catch (error) { + console.error("Error during initialisation:", error); + } + // Analytics?.Analytics?.getInstances()?.ab?.GrowthBook?.loadFeatures(); + Analytics?.Analytics?.pageView(location.pathname, "Deriv.com"); + // Analytics?.Analytics?.getInstances()?.ab?.GrowthBook?.setURL(window.location.href) + window.useGrowthbookFeatureFlag = function ({ featureFlag }) { + let featureFlagValue = Analytics?.Analytics?.getFeatureValue(featureFlag); + function updateFeatureFlagValue() { + const value = Analytics?.Analytics?.getFeatureValue(featureFlag); + featureFlagValue = value; + } + Analytics?.Analytics?.getInstances()?.ab?.GrowthBook?.setRenderer( + updateFeatureFlagValue + ); + return featureFlagValue; + }; +}); diff --git a/src/js/footer/index.js b/src/js/footer/index.js index 25b2573..5518635 100644 --- a/src/js/footer/index.js +++ b/src/js/footer/index.js @@ -16,3 +16,4 @@ import "./disclaimerAddClassname"; import "./mobileMenuAccordian"; import "./partnerAffiliate"; import "./loginFunctions"; +import "./analytics"; From 00794127300b04108230795b716a7a1525661756 Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Thu, 26 Sep 2024 08:41:31 +0800 Subject: [PATCH 2/3] refactor: migrated code which is responsible for updating signup links based on feature flag --- src/js/footer/index.js | 1 + .../singupRedirectionFeatureFlag/index.js | 75 +++++++++++++++++++ 2 files changed, 76 insertions(+) create mode 100644 src/js/footer/singupRedirectionFeatureFlag/index.js diff --git a/src/js/footer/index.js b/src/js/footer/index.js index 5518635..e0842fb 100644 --- a/src/js/footer/index.js +++ b/src/js/footer/index.js @@ -17,3 +17,4 @@ import "./mobileMenuAccordian"; import "./partnerAffiliate"; import "./loginFunctions"; import "./analytics"; +import "./singupRedirectionFeatureFlag"; diff --git a/src/js/footer/singupRedirectionFeatureFlag/index.js b/src/js/footer/singupRedirectionFeatureFlag/index.js new file mode 100644 index 0000000..68520bf --- /dev/null +++ b/src/js/footer/singupRedirectionFeatureFlag/index.js @@ -0,0 +1,75 @@ +document.addEventListener("DOMContentLoaded", function () { + const updateLinkHrefs = () => { + const featureFlagValue = Analytics?.Analytics?.getFeatureValue( + "trigger_os_signup_wf" + ); + const handleOutSystemsRedirection = () => { + const currentDomain = window.location.hostname; + let env; + if ( + currentDomain === "deriv.com" || + currentDomain === "deriv.be" || + currentDomain === "deriv.me" + ) { + env = "production"; + } else if (currentDomain === "staging.deriv.com") { + env = "staging"; + } else { + env = "development"; + } + switch (env) { + case "production": + return "https://hub.deriv.com/tradershub/signup"; + case "staging": + return "https://staging-hub.deriv.com/tradershub/signup"; + default: + return "https://dev-hub.deriv.com/tradershub/signup"; + } + }; + + function isSafari() { + const ua = navigator.userAgent.toLowerCase(); + return /safari/.test(ua) && !/chrome/.test(ua) && !/crios/.test(ua); + } + + function isIOS() { + const ua = navigator.userAgent.toLowerCase(); + return /ipad|iphone|ipod/.test(ua); + } + + const newHref = featureFlagValue + ? isIOS() || isSafari() + ? `https://${window.location.host}/signup` + : handleOutSystemsRedirection() + : `https://${window.location.host}/signup`; + + // Update href attributes + const mainSignupButton = document.getElementById("cta-home-btn-navbar"); + if (mainSignupButton) { + mainSignupButton.href = newHref; + } + + const signupButtons = document.querySelectorAll(".logged-out-btn"); + signupButtons?.forEach((btn) => { + if (btn?.href?.indexOf("/signup") > 0) { + btn.href = newHref; + } + }); + + const signupButtonsPlatforms = + document.querySelectorAll(".logged-out-btn a"); + signupButtonsPlatforms?.forEach((btn) => { + if (btn?.href?.indexOf("/signup") > 0) { + btn.href = newHref; + } + }); + }; + + Analytics?.Analytics?.getInstances() + ?.ab?.GrowthBook?.loadFeatures() + .then(() => { + if (window.location.href.indexOf("/partners") > -1 === false) { + updateLinkHrefs(); + } + }); +}); From 7d3a9cb9666d60429782b19dde51b35c9cf96cba Mon Sep 17 00:00:00 2001 From: moiz-deriv Date: Thu, 26 Sep 2024 10:54:21 +0800 Subject: [PATCH 3/3] fix: removed non feature specific code --- .../singupRedirectionFeatureFlag/index.js | 75 ------------------- 1 file changed, 75 deletions(-) delete mode 100644 src/js/footer/singupRedirectionFeatureFlag/index.js diff --git a/src/js/footer/singupRedirectionFeatureFlag/index.js b/src/js/footer/singupRedirectionFeatureFlag/index.js deleted file mode 100644 index 68520bf..0000000 --- a/src/js/footer/singupRedirectionFeatureFlag/index.js +++ /dev/null @@ -1,75 +0,0 @@ -document.addEventListener("DOMContentLoaded", function () { - const updateLinkHrefs = () => { - const featureFlagValue = Analytics?.Analytics?.getFeatureValue( - "trigger_os_signup_wf" - ); - const handleOutSystemsRedirection = () => { - const currentDomain = window.location.hostname; - let env; - if ( - currentDomain === "deriv.com" || - currentDomain === "deriv.be" || - currentDomain === "deriv.me" - ) { - env = "production"; - } else if (currentDomain === "staging.deriv.com") { - env = "staging"; - } else { - env = "development"; - } - switch (env) { - case "production": - return "https://hub.deriv.com/tradershub/signup"; - case "staging": - return "https://staging-hub.deriv.com/tradershub/signup"; - default: - return "https://dev-hub.deriv.com/tradershub/signup"; - } - }; - - function isSafari() { - const ua = navigator.userAgent.toLowerCase(); - return /safari/.test(ua) && !/chrome/.test(ua) && !/crios/.test(ua); - } - - function isIOS() { - const ua = navigator.userAgent.toLowerCase(); - return /ipad|iphone|ipod/.test(ua); - } - - const newHref = featureFlagValue - ? isIOS() || isSafari() - ? `https://${window.location.host}/signup` - : handleOutSystemsRedirection() - : `https://${window.location.host}/signup`; - - // Update href attributes - const mainSignupButton = document.getElementById("cta-home-btn-navbar"); - if (mainSignupButton) { - mainSignupButton.href = newHref; - } - - const signupButtons = document.querySelectorAll(".logged-out-btn"); - signupButtons?.forEach((btn) => { - if (btn?.href?.indexOf("/signup") > 0) { - btn.href = newHref; - } - }); - - const signupButtonsPlatforms = - document.querySelectorAll(".logged-out-btn a"); - signupButtonsPlatforms?.forEach((btn) => { - if (btn?.href?.indexOf("/signup") > 0) { - btn.href = newHref; - } - }); - }; - - Analytics?.Analytics?.getInstances() - ?.ab?.GrowthBook?.loadFeatures() - .then(() => { - if (window.location.href.indexOf("/partners") > -1 === false) { - updateLinkHrefs(); - } - }); -});