@oneuptime/common 12.0.19 → 12.0.20

package/Server/Views/Partials/AnalyticsConsent.ejs

@@ -0,0 +1,533 @@
+<%#
+    Consent Mode v2 and attribution capture, shared by every OneUptime-owned
+    origin that loads the Google Tag Manager container.
+
+    This lived only in Home/Views/head-basic.ejs, which meant the marketing site
+    denied storage by default and asked the visitor, while /accounts and
+    /dashboard loaded the same container with no consent signal at all and
+    captured nothing. Two consequences, both bad: somebody who pressed "Reject
+    all" on the marketing site was tracked anyway the moment they reached the
+    signup page — which is exactly where the conversion fires — and an ad
+    pointed straight at /accounts/register?gclid=... stored no click id, so
+    that signup was permanently unattributable.
+
+    It is one file rather than a copy per origin because the storage contract
+    has to stay byte-identical: the same 'cookiesAccepted' values, the same
+    'clickIds' and 'firstTouch' JSON shapes. Three copies is how those stop
+    agreeing.
+
+    Include this BEFORE the Google Tag Manager snippet. Consent Mode defaults
+    are only meaningful if they are on the dataLayer before the container reads
+    it.
+
+    Home resolves this as ../../Common/Server/Views/Partials/AnalyticsConsent
+    and the App FeatureSets as ../../../../Common/Server/Views/Partials/...;
+    /usr/src/Common is present in both images.
+
+    Deliberately NOT here: the PostHog loader (its project key is Home's) and
+    the home/-prefixed page view and CTA listeners. Those are Home's alone and
+    stay in head-basic.ejs. Reporting on a captured touch is handed back to
+    the page through window.oneUptimeOnAttributionCaptured for the same
+    reason. The Cal booking helper does live here: it is a pure reader over
+    the shared attribution store, and splitting it from the store it reads
+    would be worse than sharing an unused function definition.
+-%>
+<!--
+    Consent.
+
+    This block runs BEFORE Google Tag Manager and before PostHog, because both
+    of the things it does are only meaningful ahead of them: Consent Mode's
+    defaults have to be on the dataLayer before the container reads it, and
+    PostHog must not be loaded at all until there is consent to load it.
+
+    Three states, not two. `granted` and `denied` are the visitor's explicit
+    choices; `unset` is the state before they have answered, and it is treated
+    as denied for storage purposes rather than as permission-by-silence.
+
+    What that costs, stated plainly: a visitor who never touches the banner is
+    not measured, and their attribution is not stored. What stops that from
+    losing an ad click outright is the pending-attribution buffer further
+    down — attribution seen on this page is held in memory and written the
+    moment consent is granted, so accepting the banner on the landing page
+    keeps everything the click carried.
+-->
+<% if(typeof enableGoogleTagManager !== 'undefined' ? enableGoogleTagManager : false){ %>
+<!--
+    The dataLayer and the gtag shim, defined before both the consent signals
+    below and the container itself.
+
+    Deliberately inside the enableGoogleTagManager gate. A self-hosted install
+    loads no Google tag at all, and every OneUptime event guards on
+    `typeof dataLayer !== 'undefined'` — so creating the array there would turn
+    those no-ops into an array that grows for the life of the page and that
+    nothing will ever read.
+-->
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() { dataLayer.push(arguments); }
+</script>
+<% } %>
+
+<script>
+    window.oneUptimeConsent = (function () {
+        var STORAGE_KEY = 'cookiesAccepted';
+        var listeners = [];
+
+        function readRaw() {
+            try {
+                return window.localStorage.getItem(STORAGE_KEY);
+            } catch (e) {
+                /*
+                 * Private mode, disabled storage, or a cross-origin sandbox.
+                 * Unreadable storage is not consent.
+                 */
+                return null;
+            }
+        }
+
+        function state() {
+            var raw = readRaw();
+            if (raw === 'true') { return 'granted'; }
+            if (raw === 'false') { return 'denied'; }
+            return 'unset';
+        }
+
+        function isGranted() {
+            return state() === 'granted';
+        }
+
+        /*
+         * Consent Mode v2. `security_storage` is granted because it covers
+         * things like fraud prevention that are not analytics; everything that
+         * feeds advertising or measurement starts denied.
+         *
+         * wait_for_update gives the container half a second to see an update
+         * before it decides how to behave, which is what makes a visitor who
+         * accepts immediately still count.
+         */
+        function pushConsentSignal(mode, granted) {
+            /*
+             * No tag, nothing to tell. On a self-hosted install gtag is never
+             * defined, and consent is still tracked — it gates the attribution
+             * capture and PostHog either way.
+             */
+            if (typeof window.gtag !== 'function') {
+                return;
+            }
+
+            window.gtag('consent', mode, {
+                ad_storage: granted ? 'granted' : 'denied',
+                ad_user_data: granted ? 'granted' : 'denied',
+                ad_personalization: granted ? 'granted' : 'denied',
+                analytics_storage: granted ? 'granted' : 'denied',
+                functionality_storage: granted ? 'granted' : 'denied',
+                personalization_storage: granted ? 'granted' : 'denied',
+                security_storage: 'granted',
+                wait_for_update: 500
+            });
+        }
+
+        pushConsentSignal('default', false);
+
+        // An earlier visit already answered: tell Google before the tag loads.
+        if (isGranted()) {
+            pushConsentSignal('update', true);
+        }
+
+        function set(granted) {
+            try {
+                window.localStorage.setItem(STORAGE_KEY, granted ? 'true' : 'false');
+            } catch (e) {
+                // Nothing to persist to. The in-page decision still applies.
+            }
+
+            pushConsentSignal('update', granted);
+
+            for (var i = 0; i < listeners.length; i++) {
+                try {
+                    listeners[i](granted);
+                } catch (e) {
+                    // One bad listener must not stop the others.
+                }
+            }
+        }
+
+        return {
+            state: state,
+            isGranted: isGranted,
+            grant: function () { set(true); },
+            deny: function () { set(false); },
+            onChange: function (listener) {
+                if (typeof listener === 'function') {
+                    listeners.push(listener);
+                }
+            }
+        };
+    })();
+</script>
+
+<!--
+    Attribution capture (UTM parameters + ad platform click IDs), and the
+    readers that hand it on to the two places it has to reach: the signup form
+    (through localStorage, same origin) and a Cal.com booking (through the
+    embed's metadata).
+
+    STORAGE MODEL
+
+    - Last-touch UTM values live in the individual utm* localStorage keys, read
+      by the signup page and stored on the User record.
+    - Last-touch click IDs live as a JSON object under 'clickIds'.
+    - The visitor's first attributed visit is preserved as JSON under
+      'firstTouch' and never overwritten.
+
+    A visit counts as a new "touch" if it carries ANY utm parameter or ad click
+    ID — Google Ads auto-tagging sends only gclid, no UTMs.
+
+    CONSENT
+
+    Nothing is written without consent. Attribution seen before the visitor has
+    answered the banner is held in memory and flushed if they accept, so the
+    ordinary case — land on an ad, accept, sign up — keeps everything. An
+    explicit refusal clears anything a previous visit stored.
+-->
+<script>
+    (function () {
+        var UTM_KEY_MAP = {
+            'utm_source': 'utmSource',
+            'utm_medium': 'utmMedium',
+            'utm_campaign': 'utmCampaign',
+            'utm_term': 'utmTerm',
+            'utm_content': 'utmContent'
+        };
+
+        /*
+         * Must stay in step with AdClickIdKeys in
+         * Common/Types/Marketing/Attribution.ts — the server whitelists on that
+         * list, so a key sent from here that is missing there is silently
+         * dropped on arrival.
+         */
+        var CLICK_ID_PARAMS = ['gclid', 'wbraid', 'gbraid', 'fbclid', 'msclkid', 'li_fat_id', 'twclid', 'rdt_cid'];
+
+        // Mirrors MaxAttributionValueLength on the server.
+        var MAX_VALUE_LENGTH = 500;
+
+        // Mirrors MAX_FIRST_TOUCH_LENGTH in App/API/CalWebhook.ts.
+        var MAX_FIRST_TOUCH_LENGTH = 4000;
+
+        // Attribution seen on this page but not yet allowed to be stored.
+        var pending = null;
+
+        function canStore() {
+            return Boolean(window.oneUptimeConsent && window.oneUptimeConsent.isGranted());
+        }
+
+        function setItem(key, value) {
+            try {
+                window.localStorage.setItem(key, value);
+            } catch (e) {
+                // Storage unavailable; attribution is best-effort.
+            }
+        }
+
+        function removeItem(key) {
+            try {
+                window.localStorage.removeItem(key);
+            } catch (e) {
+                // Nothing to remove from.
+            }
+        }
+
+        function getItem(key) {
+            try {
+                return window.localStorage.getItem(key);
+            } catch (e) {
+                return null;
+            }
+        }
+
+        function bound(value) {
+            return String(value).slice(0, MAX_VALUE_LENGTH);
+        }
+
+        function readTouchFromUrl() {
+            var urlParams = new URLSearchParams(window.location.search);
+
+            var utmValues = {};
+            var hasUtm = false;
+            Object.keys(UTM_KEY_MAP).forEach(function (param) {
+                var value = urlParams.get(param);
+                if (value) {
+                    utmValues[UTM_KEY_MAP[param]] = bound(value);
+                    hasUtm = true;
+                }
+            });
+
+            var clickIds = {};
+            var hasClickId = false;
+            CLICK_ID_PARAMS.forEach(function (param) {
+                var value = urlParams.get(param);
+                if (value) {
+                    clickIds[param] = bound(value);
+                    hasClickId = true;
+                }
+            });
+
+            if (!hasUtm && !hasClickId) {
+                return null;
+            }
+
+            return {
+                utmValues: utmValues,
+                clickIds: clickIds,
+                hasClickId: hasClickId,
+                url: window.location.href,
+                referrer: document.referrer || '',
+                timestamp: new Date().toISOString()
+            };
+        }
+
+        function storeTouch(touch) {
+            // New touch: clear previous last-touch values, then store this visit's.
+            Object.keys(UTM_KEY_MAP).forEach(function (param) {
+                removeItem(UTM_KEY_MAP[param]);
+            });
+            Object.keys(touch.utmValues).forEach(function (key) {
+                setItem(key, touch.utmValues[key]);
+            });
+            setItem('utmUrl', touch.url);
+
+            if (touch.hasClickId) {
+                setItem('clickIds', JSON.stringify(touch.clickIds));
+            } else {
+                removeItem('clickIds');
+            }
+
+            // Preserve the first attributed touch forever.
+            if (!getItem('firstTouch')) {
+                var firstTouch = {};
+                Object.keys(touch.utmValues).forEach(function (key) {
+                    firstTouch[key] = touch.utmValues[key];
+                });
+                if (touch.hasClickId) {
+                    firstTouch.clickIds = touch.clickIds;
+                }
+                firstTouch.landingUrl = touch.url;
+                firstTouch.referrer = touch.referrer;
+                firstTouch.timestamp = touch.timestamp;
+                setItem('firstTouch', JSON.stringify(firstTouch));
+            }
+        }
+
+        function clearStoredAttribution() {
+            Object.keys(UTM_KEY_MAP).forEach(function (param) {
+                removeItem(UTM_KEY_MAP[param]);
+            });
+            removeItem('utmUrl');
+            removeItem('clickIds');
+            removeItem('firstTouch');
+        }
+
+        function parseStoredJson(key) {
+            var raw = getItem(key);
+            if (!raw) { return null; }
+            try {
+                var parsed = JSON.parse(raw);
+                return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : null;
+            } catch (e) {
+                return null;
+            }
+        }
+
+        /*
+         * Everything known about where this visitor came from, whether it has
+         * been written to storage yet or is still only in memory.
+         *
+         * The in-memory touch wins: it is this page load, and the stored copy
+         * is at best the same thing and at worst an older visit.
+         */
+        window.oneUptimeGetAttribution = function () {
+            var utm = {};
+            Object.keys(UTM_KEY_MAP).forEach(function (param) {
+                var key = UTM_KEY_MAP[param];
+                var value = (pending && pending.utmValues[key]) || getItem(key);
+                if (value && value !== 'null' && value !== 'undefined') {
+                    utm[key] = value;
+                }
+            });
+
+            var utmUrl = (pending && pending.url) || getItem('utmUrl');
+            if (utmUrl) {
+                utm.utmUrl = utmUrl;
+            }
+
+            var clickIds = (pending && pending.hasClickId ? pending.clickIds : null) || parseStoredJson('clickIds') || {};
+
+            var firstTouch = parseStoredJson('firstTouch');
+
+            if (!firstTouch && pending) {
+                firstTouch = {};
+                Object.keys(pending.utmValues).forEach(function (key) {
+                    firstTouch[key] = pending.utmValues[key];
+                });
+                if (pending.hasClickId) {
+                    firstTouch.clickIds = pending.clickIds;
+                }
+                firstTouch.landingUrl = pending.url;
+                firstTouch.referrer = pending.referrer;
+                firstTouch.timestamp = pending.timestamp;
+            }
+
+            return {
+                utm: utm,
+                clickIds: clickIds,
+                firstTouch: firstTouch
+            };
+        };
+
+        /*
+         * The same attribution, flattened into the scalar string map Cal.com
+         * accepts as booking metadata.
+         *
+         * Keys are the snake_case wire spelling the server parses in
+         * App/API/CalWebhook.ts. The first touch is a nested object, and Cal
+         * metadata values are scalars, so it travels as one JSON string under
+         * ou_first_touch — which is exactly what the webhook expects to parse.
+         *
+         * Returns {} when there is nothing to attribute, so a caller can spread
+         * it unconditionally without sending an empty metadata bag.
+         */
+        /*
+         * `bookingKind` says which conversation this embed books. All three
+         * embeds use the same Cal event type, so without it the webhook cannot
+         * tell a support call from an enterprise demo. It travels in the same
+         * bracketed metadata bag as the attribution and is read back by
+         * App/API/CalWebhook.ts, which allowlists the value.
+         */
+        window.oneUptimeCalAttributionMetadata = function (bookingKind) {
+            var attribution = window.oneUptimeGetAttribution();
+            var config = {};
+
+            /*
+             * Cal takes booking metadata as FLAT, BRACKETED keys on the embed
+             * config — `metadata[utm_source]` — and hands them back on the
+             * webhook as payload.metadata.utm_source.
+             *
+             * Not as a nested `metadata: { utm_source: ... }` object. Cal
+             * serialises each config value into a query parameter, so a nested
+             * object becomes the string "[object Object]" and every key inside
+             * it is lost. Nothing errors; bookings keep being recorded, they
+             * just arrive attributable to nothing — which is precisely the bug
+             * this whole path exists to fix, so getting the shape wrong here
+             * would have been indistinguishable from not having done the work.
+             *
+             * https://cal.com/help/embedding/prefill-booking-form-embed
+             */
+            function put(key, value, maxLength) {
+                if (value) {
+                    config['metadata[' + key + ']'] =
+                        String(value).slice(0, maxLength || MAX_VALUE_LENGTH);
+                }
+            }
+
+            Object.keys(UTM_KEY_MAP).forEach(function (param) {
+                put(param, attribution.utm[UTM_KEY_MAP[param]]);
+            });
+
+            put('utm_url', attribution.utm.utmUrl);
+
+            Object.keys(attribution.clickIds).forEach(function (param) {
+                put(param, attribution.clickIds[param]);
+            });
+
+            if (attribution.firstTouch) {
+                var serialized = JSON.stringify(attribution.firstTouch);
+                /*
+                 * The first touch is JSON, so it gets the JSON bound, NOT the
+                 * 500-char per-value one. A realistic first touch — five UTM
+                 * values, a click id, and a landing URL that repeats them all
+                 * as query parameters — runs past 500 characters easily, and
+                 * truncating JSON produces a string the webhook's JSON.parse
+                 * rejects. It would drop the whole first touch, silently.
+                 *
+                 * Mirrors MAX_FIRST_TOUCH_LENGTH in App/API/CalWebhook.ts.
+                 */
+                if (serialized.length <= MAX_FIRST_TOUCH_LENGTH) {
+                    put('ou_first_touch', serialized, MAX_FIRST_TOUCH_LENGTH);
+                }
+            }
+
+            /*
+             * Unconditional, unlike everything above it. The attribution keys
+             * describe the visitor and are absent when there is nothing to say
+             * about them; the booking kind describes the embed, which always
+             * knows what it is. A booking from a visitor who refused
+             * attribution storage still arrives knowing it was a demo.
+             */
+            if (bookingKind) {
+                config['metadata[ou_booking_kind]'] = String(bookingKind).slice(0, MAX_VALUE_LENGTH);
+            }
+
+            return config;
+        };
+
+        var touch = readTouchFromUrl();
+
+        if (touch) {
+            if (canStore()) {
+                storeTouch(touch);
+            } else {
+                /*
+                 * Held, not dropped. A visitor who accepts the banner on this
+                 * very page — the ordinary path for someone arriving from an
+                 * ad — keeps the click id that brought them here.
+                 */
+                pending = touch;
+            }
+        }
+
+        if (window.oneUptimeConsent) {
+            window.oneUptimeConsent.onChange(function (granted) {
+                if (granted) {
+                    if (pending) {
+                        storeTouch(pending);
+                    }
+                    return;
+                }
+
+                // Refused: forget what earlier visits stored, and this page's touch.
+                pending = null;
+                clearStoredAttribution();
+            });
+        }
+
+        /*
+         * Reporting is the including page's business, not this partial's.
+         *
+         * The marketing site emits a `home/`-prefixed PostHog event from here;
+         * the product origins emit nothing, and must not start emitting under
+         * a `home/` name just because they now share the capture code. So the
+         * touch is handed out and the page decides what, if anything, to do
+         * with it.
+         *
+         * Wire keys (utm_source), not property keys (utmSource): this is what
+         * arrived on the URL.
+         */
+        document.addEventListener('DOMContentLoaded', function () {
+            if (!touch || typeof window.oneUptimeOnAttributionCaptured !== 'function') {
+                return;
+            }
+
+            var eventProps = { utm_url: touch.url };
+            Object.keys(UTM_KEY_MAP).forEach(function (param) {
+                if (touch.utmValues[UTM_KEY_MAP[param]]) {
+                    eventProps[param] = touch.utmValues[UTM_KEY_MAP[param]];
+                }
+            });
+            Object.keys(touch.clickIds).forEach(function (param) {
+                eventProps[param] = touch.clickIds[param];
+            });
+
+            window.oneUptimeOnAttributionCaptured(eventProps);
+        });
+    })();
+</script>