MutationObserver + URLSearchParams

So I had the opportunity to work with third party scripts that trigger changes in my web page that in turn would affect data being sent to another third party. Enter these handy dandy Javascript objects: MutationObserver and URLSearchParams.

Real-world testing and use-case:
http://class.smartermoneynow.com/registernow-2-rttest/
https://class.smartermoneynow.com/thank-you-1/
(http://localhost/smartermoneynow.com/RT/test.html)

---

MutationObserver
https://www.smashingmagazine.com/2019/04/mutationobserver-api-guide/
https://javascript.info/mutation-observer/

function reloadJS() {
	var script= document.createElement('script');
    script.src= 'https://kindlepublishingincome.com/alexell/alexell_webcast_deps.js';
    body.appendChild(script);
}
  
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    //console.log(mutation);
    if (mutation.type === "attributes") {
        //CID
        var mutatedHref = mutation.target
        var mutatedHrefStr = mutatedHref.toString();
        //console.log("new href: " + mutatedHref);
        //if (mutatedHref != 'https://clk.smartermoneynow.com/click') {
        if (mutatedHrefStr.includes('clickid')) {
          var params = new URLSearchParams(mutatedHref.search.slice(1));
          var clickid = params.get('clickid');
          console.log("new clickid: " + clickid);
          $('#cid').val(clickid);
        }
    
      //dynamic rev id
      titulo = mutation.target.title;
      if (titulo != null || titulo != '') {
      	//console.log("title: " + titulo);
        var tituloStr = titulo.toString();
        //console.log('titulo: ' + tituloStr);
        var tyurl = "";
        var reloadScript = false;
        
        if (tituloStr.includes("United Kingdom")) {
        	//console.log("UK");   
            tyurl = "https://class.smartermoneynow.com/thank-you-1/?ctry=UK&";
            reloadScript = true;
        }
        else if (tituloStr.includes("Australia")) {
        	//console.log("AU");   
            tyurl = "https://class.smartermoneynow.com/thank-you-1/?ctry=AU&";
            reloadScript = true;
        }
        else {
         	//console.log("nada"); 
        }
        
        if (reloadScript == true) {
          	console.log(tyurl);
            //update config obj
            alexell.thankYouPage = tyurl
          	console.log(alexell);
        	//reload script
            reloadJS();
        } 
        
      }   
      
    }
    
  });
});

observer.observe(idgrab, {
  attributes: true,
  attributeFilter: ['href'],
  attributeOldValue: true
});

var parentOfList = document.body;
observer.observe(parentOfList, {
  attributes: true,
  childList: true,
  subtree: true,
  characterData: true
});

---

URLSearchParams
https://googlechrome.github.io/samples/urlsearchparams/index.html
https://developers.google.com/web/updates/2016/01/urlsearchparams

---

Javascript Variables
var, let, const
https://www.w3schools.com/js/js_variables.asp
https://www.w3schools.com/js/js_let.asp

Variables defined with let cannot be Redeclared.
Variables defined with let must be Declared before use.
Variables defined with let have Block Scope.

Variables defined with const cannot be Redeclared.
Variables defined with const cannot be Reassigned.
Variables defined with const have Block Scope.

---

Javasript Objects:
var person = {firstName:”John”, lastName:”Doe”, age:46};
person.firstName = “Paul”;

---

Javascript ES6
https://www.w3schools.com/js/js_es6.asp