How do I change an inline script tag further down page before it fires

Question

I have an ecommerce thank you page that is sending an ecommerce.js hit to Google Analytics

<script>
        try{ga('require', 'ecommerce', 'ecommerce.js');
        ga('ecommerce:addTransaction', {
            'id': '082918-074143-128'
            , 'affiliation': ''
            , 'revenue': '2.09'
            , 'shipping': '0.00'
            , 'tax': '0.17'
        });ga('ecommerce:addItem',{ 
            'id': '082918-074143-128'
            , 'sku': ''
            , 'name': 'Cane Creek 1-1/8-inch Headset Shim Spacer .25mm'
            , 'category': 'Bicycling Catalog > Components > Headsets'
            , 'price': '1.08'
            , 'quantity': '1'
        });

        ga('ecommerce:addItem',{ 
            'id': '082918-074143-128'
            , 'sku': ''
            , 'name': 'Race Face X-Type BB Outer Race Seal Gray'
            , 'category': 'Bicycling Catalog > Components > Other > Other'
            , 'price': '0.84'
            , 'quantity': '1'
        }); ga('ecommerce:send');}catch(err){}
</script> 

I want to alter this script before it sends the data to GA by removing the first and last lines, as well as changing the code by changing the string 'ga(' to 'ga1(' so that the code won't send data to GA. and so that I can instead send the enhanced ecommerce hit instead.

I have inserted the following script higher on the page so that it would edit the tag lower on the page, but it fails to edit the tag before it fires.

I tried this:

<script>
  document.addEventListener("DOMContentLoaded", function(event) {

    function contains(selector, text) {
        var elements = document.querySelectorAll(selector);
        return [].filter.call(elements, function(element){
            return RegExp(text).test(element.textContent);
        });
    }
    function bsHit() {
        gaHit = contains('script', /try\{ga\(/g);
        var hit = gaHit[0].innerHTML;
        var tryer = "try{ga('require', 'ecommerce', 'ecommerce.js')\;";
        var hit = hit.replace(tryer, "");
        lastLine = "ga('ecommerce:send');}catch(err){}";
        hit = hit.replace(lastLine, "");
        hit = hit.replace(/ga\(/g,"ga1\(");
        console.log(hit);
    }

    bsHit();
  }
</script>

What do I need to / modify in my code to make it happen?

I appreciate your time and insights.

Answer 1

Try the code below. I don't fully understand what your 'contains' function is doing, so I can't vouch for that. In any case, if you use the GA debugger chrome extension, you should be able to see if your code executes before the autogenerated code, and troubleshoot from there.

 <script> (function() { //this wraps your sript in an IIFE, which will execute as soon as it's parsed function contains(selector, text) { var elements = document.querySelectorAll(selector); return [].filter.call(elements, function(element) { return RegExp(text).test(element.textContent); }); } function bsHit() { var gaHit = contains('script', /try\\{ga\\(/g); var hit = gaHit[0].innerHTML; hit = hit.replace("ga('ecommerce:send')", ""); gaHit[0].innerHTML = hit; //var hit is just a string - you need to rewrite the script element console.log("Replaced script content:\\n" + hit); //added string so it will show up on console even if 'hit' is null } bsHit(); })(); </script> 

Answer 2

Could you just stub the ga function with something else temporarily?

 window.ga1 = window.ga; window.ga = function(){}; setTimeout(function(){ window.ga = window.ga1; }, 3000);