Builder client side A/B testing without flicker

builder.html

<div
  class="builder-component builder-component-b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
  data-name="global-nav"
  data-source="Rendered by Builder.io"
>
  <template
    data-template-variant-id="63f38278c320405da7a63b8d358c1172"
    ><div
      class="builder-content"
      builder-content-id="63f38278c320405da7a63b8d358c1172"
      builder-model="global-nav"
    >
      <div
        data-builder-component="global-nav"
        data-builder-content-id="b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
      >
        <style data-emotion-css="h47494">
          .css-h47494 {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            -webkit-align-items: stretch;
            -webkit-box-align: stretch;
            -ms-flex-align: stretch;
            align-items: stretch;
          }
        </style>
        <div class="builder-blocks css-h47494" builder-type="blocks">
          <style data-emotion-css="96q1si">
            .css-96q1si.builder-block {
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-flex-direction: column;
              -ms-flex-direction: column;
              flex-direction: column;
              position: relative;
              -webkit-flex-shrink: 0;
              -ms-flex-negative: 0;
              flex-shrink: 0;
              box-sizing: border-box;
              margin-top: 20px;
            }
          </style>
          <div
            class="builder-block builder-f7333ab96c094987a503a085784b83f2 builder-has-component css-96q1si"
            builder-id="builder-f7333ab96c094987a503a085784b83f2"
          >
            <div>Var B</div>
          </div>
          <style data-emotion-css="1qnwoh7">
            .css-1qnwoh7.builder-block {
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-flex-direction: column;
              -ms-flex-direction: column;
              flex-direction: column;
              position: relative;
              -webkit-flex-shrink: 0;
              -ms-flex-negative: 0;
              flex-shrink: 0;
              box-sizing: border-box;
              margin-top: 21px;
              height: auto;
              padding-bottom: 30px;
              margin-left: -1px;
            }
          </style>
          <div
            class="builder-block builder-d4a63a4bfd9248388c7d5c1d57741aaf css-1qnwoh7"
            builder-id="builder-d4a63a4bfd9248388c7d5c1d57741aaf"
          >
            <style data-emotion-css="hgfgng">
              .css-hgfgng.builder-block {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -webkit-flex-direction: column;
                -ms-flex-direction: column;
                flex-direction: column;
                position: relative;
                -webkit-flex-shrink: 0;
                -ms-flex-negative: 0;
                flex-shrink: 0;
                box-sizing: border-box;
                margin-top: 20px;
                line-height: normal;
                height: auto;
              }
            </style>
            <div
              class="builder-block builder-4c269a8bc78e4cf592f3b2b41480f705 builder-has-component css-hgfgng"
              builder-id="builder-4c269a8bc78e4cf592f3b2b41480f705"
            >
              <style data-emotion-css="1qggkls">
                .css-1qggkls {
                  outline: none;
                }
                .css-1qggkls p:first-of-type,
                .css-1qggkls .builder-paragraph:first-of-type {
                  margin: 0;
                }
                .css-1qggkls > p,
                .css-1qggkls .builder-paragraph {
                  color: inherit;
                  line-height: inherit;
                  -webkit-letter-spacing: inherit;
                  -moz-letter-spacing: inherit;
                  -ms-letter-spacing: inherit;
                  letter-spacing: inherit;
                  font-weight: inherit;
                  font-size: inherit;
                  text-align: inherit;
                  font-family: inherit;
                }</style
              ><span class="builder-text css-1qggkls"
                >Enter some text...</span
              >
            </div>
          </div>
          <style data-emotion-css="1mvsfya">
            .css-1mvsfya.builder-block {
              height: 0;
              width: 0;
              display: inline-block;
              opacity: 0;
              overflow: hidden;
              pointer-events: none;
            }</style
          ><img
            role="presentation"
            aria-hidden="true"
            src="https://cdn.builder.io/api/v1/pixel?apiKey=null"
            class="builder-block builder-pixel-vbpvtf2f9cb css-1mvsfya"
            builder-id="builder-pixel-vbpvtf2f9cb"
          />
        </div>
      </div></div
  ></template>
  <script
    id="variants-script-b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
  >
    (function () {
      if (window.builderNoTrack || !navigator.cookieEnabled) {
        return;
      }
      var variants = [
        { id: "63f38278c320405da7a63b8d358c1172", testRatio: 0.5 },
      ];
      function removeVariants() {
        variants.forEach(function (template) {
          document
            .querySelector(
              'template[data-template-variant-id="' +
                template.id +
                '"]'
            )
            .remove();
        });
        document
          .getElementById(
            "variants-script-b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
          )
          .remove();
      }
      if (
        typeof document.createElement("template").content ===
        "undefined"
      ) {
        removeVariants();
        return;
      }
      function setCookie(name, value, days) {
        var expires = "";
        if (days) {
          var date = new Date();
          date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
          expires = "; expires=" + date.toUTCString();
        }
        document.cookie =
          name +
          "=" +
          (value || "") +
          expires +
          "; path=/" +
          "; Secure; SameSite=None";
      }
      function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(";");
        for (var i = 0; i < ca.length; i++) {
          var c = ca[i];
          while (c.charAt(0) == " ") c = c.substring(1, c.length);
          if (c.indexOf(nameEQ) == 0)
            return c.substring(nameEQ.length, c.length);
        }
        return null;
      }
      var cookieName =
        "builder.tests.b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240";
      var variantInCookie = getCookie(cookieName);
      var availableIDs = variants
        .map(function (vr) {
          return vr.id;
        })
        .concat(
          "b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
        );
      var variantId;
      if (availableIDs.indexOf(variantInCookie) > -1) {
        variantId = variantInCookie;
      }
      if (!variantId) {
        var n = 0;
        var random = Math.random();
        for (var i = 0; i < variants.length; i++) {
          var variant = variants[i];
          var testRatio = variant.testRatio;
          n += testRatio;
          if (random < n) {
            setCookie(cookieName, variant.id);
            variantId = variant.id;
            break;
          }
        }
        if (!variantId) {
          variantId =
            "b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240";
          setCookie(
            cookieName,
            "b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
          );
        }
      }
      if (
        variantId &&
        variantId !==
          "b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
      ) {
        var winningTemplate = document.querySelector(
          'template[data-template-variant-id="' + variantId + '"]'
        );
        if (winningTemplate) {
          var parentNode = winningTemplate.parentNode;
          var newParent = parentNode.cloneNode(false);
          newParent.appendChild(winningTemplate.content.firstChild);
          parentNode.parentNode.replaceChild(newParent, parentNode);
        }
      } else if (variants.length > 0) {
        removeVariants();
      }
    })();
  </script>
  <div
    class="builder-content"
    builder-content-id="b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
    builder-model="global-nav"
  >
    <div
      data-builder-component="global-nav"
      data-builder-content-id="b86c37dbf5a74f00b1140749e979b128_e3b7b83ba76d4b1b859cda06103cf240"
    >
      <style data-emotion-css="h47494">
        .css-h47494 {
          display: -webkit-box;
          display: -webkit-flex;
          display: -ms-flexbox;
          display: flex;
          -webkit-flex-direction: column;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-align-items: stretch;
          -webkit-box-align: stretch;
          -ms-flex-align: stretch;
          align-items: stretch;
        }
      </style>
      <div class="builder-blocks css-h47494" builder-type="blocks">
        <style data-emotion-css="96q1si">
          .css-96q1si.builder-block {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            position: relative;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            margin-top: 20px;
          }
        </style>
        <div
          class="builder-block builder-77cc6e04679040099c44132a5a3510dc builder-has-component css-96q1si"
          builder-id="builder-77cc6e04679040099c44132a5a3510dc"
        >
          <div>Var A</div>
        </div>
        <style data-emotion-css="1qnwoh7">
          .css-1qnwoh7.builder-block {
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            position: relative;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            box-sizing: border-box;
            margin-top: 21px;
            height: auto;
            padding-bottom: 30px;
            margin-left: -1px;
          }
        </style>
        <div
          class="builder-block builder-1fbe09e0212845d28c67255b5c7dbcc4 css-1qnwoh7"
          builder-id="builder-1fbe09e0212845d28c67255b5c7dbcc4"
        >
          <style data-emotion-css="hgfgng">
            .css-hgfgng.builder-block {
              display: -webkit-box;
              display: -webkit-flex;
              display: -ms-flexbox;
              display: flex;
              -webkit-flex-direction: column;
              -ms-flex-direction: column;
              flex-direction: column;
              position: relative;
              -webkit-flex-shrink: 0;
              -ms-flex-negative: 0;
              flex-shrink: 0;
              box-sizing: border-box;
              margin-top: 20px;
              line-height: normal;
              height: auto;
            }
          </style>
          <div
            class="builder-block builder-a0c2ca27ca35498687563fc2d1102d81 builder-has-component css-hgfgng"
            builder-id="builder-a0c2ca27ca35498687563fc2d1102d81"
          >
            <style data-emotion-css="1qggkls">
              .css-1qggkls {
                outline: none;
              }
              .css-1qggkls p:first-of-type,
              .css-1qggkls .builder-paragraph:first-of-type {
                margin: 0;
              }
              .css-1qggkls > p,
              .css-1qggkls .builder-paragraph {
                color: inherit;
                line-height: inherit;
                -webkit-letter-spacing: inherit;
                -moz-letter-spacing: inherit;
                -ms-letter-spacing: inherit;
                letter-spacing: inherit;
                font-weight: inherit;
                font-size: inherit;
                text-align: inherit;
                font-family: inherit;
              }</style
            ><span class="builder-text css-1qggkls"
              >Enter some text...</span
            >
          </div>
        </div>
        <style data-emotion-css="1mvsfya">
          .css-1mvsfya.builder-block {
            height: 0;
            width: 0;
            display: inline-block;
            opacity: 0;
            overflow: hidden;
            pointer-events: none;
          }</style
        ><img
          src="https://cdn.builder.io/api/v1/pixel?apiKey=b86c37dbf5a74f00b1140749e979b128"
          aria-hidden="true"
          alt=""
          role="presentation"
          width="0"
          height="0"
          class="builder-block builder-pixel-cd1ojig80k6 css-1mvsfya"
          builder-id="builder-pixel-cd1ojig80k6"
        />
      </div>
    </div>
  </div>
</div>