UTM Parameters showing up more than once

Question

I have a web page and in it, I've embedded a donation form. When a donor visits, they do so with a link that has a source code at the end. I've figured out how to add the source code to the embedded URL. Here is my code:

$(document).ready(function(){  
//Step 1: this outputs the window URL source code
var results = null
$.urlParam = function(name){
    results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return results[1] || 0;
};
console.log(decodeURIComponent($.urlParam('source')));  
  
//Step 2: this outputs the full qGiv div and script copied from qGiv
var qGivURL = $("#donation-form").html();
console.log(qGivURL);
  
//Step 3: this replaces the source codes
var twoVar = $(".qgiv-embed-container").attr("data-embed");
var finalURL = twoVar + "?source=" + results;
console.log(finalURL);
});

And here is the embedded code:

<div id="donation-form">
<div class="qgiv-embed-container" data-qgiv-embed="true" data-embed-id="65951" data-embed="https://secure.qgiv.com/for/sote/embed/65951/" data-width="630"></div>
<script>(function(w, d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) return;js = d.createElement(s); js.id = id;js.src = "https://secure.qgiv.com/resources/core/js/embed.js";fjs.parentNode.insertBefore(js, fjs);})(window, document, 'script', 'qgiv-embedjs');</script>
</div>

My problem is event though this line of code works var finalURL = twoVar + "?source=" + results; it adds ?source=code twice.

Can someone help me understand why this is happening and how to fix?

TIA!

Answer 1

You have multiple problems in your code.

Your urlParam function has errors in it. Plus you never actually set results to the returned value of urlParam you are just logging it.

My solution uses the vanilla js function URLSearchParams

$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.href);
  const results = urlParams.get('source') || "";

  var twoVar = $(".qgiv-embed-container").attr("data-embed");
  var finalURL = twoVar + "?source=" + results;
  console.log(finalURL);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="donation-form">
  <div class="qgiv-embed-container" data-qgiv-embed="true" data-embed-id="65951" data-embed="https://secure.qgiv.com/for/sote/embed/65951/" data-width="630"></div>
  <script>
    (function(w, d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://secure.qgiv.com/resources/core/js/embed.js";
      fjs.parentNode.insertBefore(js, fjs);
    })(window, document, 'script', 'qgiv-embedjs');
  </script>
</div>