UTM Tracking for vote.org Embeds

votedotorg.html

<div id="vdo-register-iframe"></div>
<script>
  // Set all the configuration parameters for you vote.org embed here. If you're
  // using a different tool, you'll need to change the `toolName`. Your partnerId
  // can be found on the embed page of the vip dashboard. Header colors and fonts
  // can be overridden here (no need to include the hash symbol on the hex codes).
  let config = {
    // The container in which we'll mount the form
    containerId: "vdo-register-iframe",
    // The ID of the partner
    partnerId: "111111",
    // The name of the tool we're using
    toolName: "verify",
    // The site on which this is hosted
    site: "example.com",
    // An override for the color of the header
    headerColor: null,
    // An override for the color of the header font
    headerFontColor: null,
    // Whether or not to show the header
    noHeader: false,
  };
  // Mappings between the name of the tool that would appear in the config block
  // above and the URL on which the tool is hosted.
  let tools = {
    register: "https://register.vote.org",
    verify: "https://verify.vote.org",
    absentee: "https://absentee.vote.org",
  };
  let toolUrl = tools[config.toolName];

  function appendVoteDotOrgEmbed(
    toolUrl /* The URL of the tool you want to embed */,
    config /* Mirror the type defined above */
  ) {
    // Grab the query string from the URL
    let params = new URLSearchParams(location.search);

    // Instantiate the iframe
    let iframe = document.createElement("iframe");
    iframe.style.width = "100%";
    iframe.style.marginheight = "0";
    iframe.style.border = "none";

    // Now we need to derive the URL.
    let iFrameParams = [];

    // We're going to go ahead and grab all the UTM parameters in the query string
    // and encode them using base64. This will be appended to the URL as a campaign
    // code.
    let utmParams = [
      "utm_source",
      "utm_medium",
      "utm_campaign",
      "utm_content",
      "utm_term",
    ];
    let tracking = {
      site: config.site,
      url: location.href,
    };
    utmParams.forEach((param) => {
      if (params.get(param)) {
        tracking[param] = params.get(param);
      }
    });
    if (Object.keys(tracking).length > 0) {
      iFrameParams.push("campaign=" + btoa(JSON.stringify(tracking)));
    }

    // Append the partnerId
    iFrameParams.push("partner=" + config.partnerId);

    // Append the header color
    if (config.headerColor) {
      iFrameParams.push("header_color=" + config.headerColor);
    }

    // Append the header font color
    if (config.headerFontColor) {
      iFrameParams.push("header_font_color=" + config.headerFontColor);
    }

    // Append the no header flag
    if (config.noHeader) {
      iFrameParams.push("no_header=true");
    }

    // Glue all to the given toolUrl
    iframe.src = `${toolUrl}?${iFrameParams.join("&")}`;

    // Append the iframe to the container
    document.getElementById(config.containerId).appendChild(iframe);
  }

  // Append the iframe to the container
  window.addEventListener("DOMContentLoaded", () => {
    appendVoteDotOrgEmbed(toolUrl, config);
    iFrameResize({ log: true, checkOrigin: false });
  });

  // Assuming you have a Meta Pixel installed on the site
  window.addEventListener("message", function (e) {
    if (e.origin === toolUrl) {
      fbq("track", e.data);
    }
  });
</script>
<script
  type="text/javascript"
  src="//cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.5.3/iframeResizer.min
.js"
></script>