Load VWO on every docs page and report cookie consent to it (GRO-1076)

_includes/marketing-vwo.html

@@ -1,4 +1,31 @@
-{% if page.vwo or include.force_enabled %}
+{% if jekyll.environment == "production" %}
+{% assign vwo_experiment_paths = "" | split: "," %}
+{% if vwo_experiment_paths contains page.url %}{% assign vwo_hide_element = "body" %}{% else %}{% assign vwo_hide_element = "" %}{% endif %}
+  <script type="text/javascript" id="vwoConsent">
+    // VWO "Partially Block" mode: variations apply right away, tracking waits
+    // for init(1). `public/docs/js/cookie-consent.js` updates it once the visitor decides.
+    {
+      window.VWO = window.VWO || [];
+      window.VWO.init =
+        window.VWO.init ||
+        function (state) {
+          window.VWO.consentState = state;
+        };
+      const ACCEPTED = 1;
+      const PENDING = 2;
+      const REJECTED = 3;
+      const stored = document.cookie.match(/(?:^|; )gdprcookienotice=([^;]*)/);
+      let analytics;
+      try {
+        analytics = stored && JSON.parse(decodeURIComponent(stored[1])).analytics;
+      } catch {
+        analytics = undefined;
+      }
+      window.VWO.init(
+        analytics === true ? ACCEPTED : analytics === false ? REJECTED : PENDING,
+      );
+    }
+  </script>
   <!-- Start VWO Async SmartCode -->
   <link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com" />
   <script type='text/javascript' id='vwoCode'>
@@ -9,7 +36,7 @@
     var account_id=576439,
     version=2.2,
     settings_tolerance=2000,
-    hide_element='body',
+    hide_element='{{ vwo_hide_element }}',
     hide_element_style = 'opacity:0 !important;filter:alpha(opacity=0) !important;background:none !important';
     /* DO NOT EDIT BELOW THIS LINE */
     var f=0, v;

public/docs/js/cookie-consent.js

@@ -211,6 +211,12 @@
 
   // analytics
 
+  // VWO consent states: 1 = accepted, 3 = rejected (2 = pending is the
+  // initial state set in `_includes/marketing-vwo.html`).
+  function setVwoConsent(accepted) {
+    window.VWO?.init?.(accepted ? 1 : 3);
+  }
+
   let hasAnalyticsScripts = false;
   let haveConsent;
   function loadAnalyticsScripts(accepted) {
@@ -260,6 +266,9 @@
       (gdprcookie.analytics === undefined &&
         !geolocation.hasCookiePolicyRestriction);
     loadAnalyticsScripts(accepted);
+    // A stored choice was already passed to VWO in `marketing-vwo.html`; this
+    // covers implied consent outside restricted countries.
+    if (accepted) setVwoConsent(true);
   }
 
   function checkBarDismissed() {
@@ -332,9 +341,10 @@
       loadMarketingScripts();
     }
 
-    loadAnalyticsScripts(
-      typeof e.detail === "boolean" ? e.detail : e.detail.analytics,
-    );
+    const analytics =
+      typeof e.detail === "boolean" ? e.detail : e.detail.analytics;
+    loadAnalyticsScripts(analytics);
+    setVwoConsent(analytics);
 
     document.body.classList.add("cookies-accepted");
     hideBar();

src/pages/docs/[version]/[...slug].astro

@@ -62,7 +62,12 @@ const page = { url, ...doc.data };
 
 // Process liquid first (e.g. control flow, includes, variables, etc)
 const lq = getLiquidRenderer({ page, dirname });
-const lqOutput = await lq.render(doc.body!, undefined, {
+// Standalone `.html` docs skip the shared head, so add VWO to their own `<head>`.
+const lqSource =
+  kind === "html"
+    ? doc.body!.replace("</head>", "{% include marketing-vwo.html %}</head>")
+    : doc.body!;
+const lqOutput = await lq.render(lqSource, undefined, {
   maxSyntaxErrors: version === "latest" ? 0 : 3,
 });