All click events fire on each page load

leactz

Hi there, 

I’m just getting started with exploring Amplitude instrumentation. I’m currently developing with static site generator Hugo using the Javascript SDK.

In my base html, I’m including the script as follows:

 

    <!-- AMPLITUDE  --><br />    <script type="text/javascript"><br />      (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")<br />      ;r.type="text/javascript"<br />      ;r.integrity="sha384-tzcaaCH5+KXD4sGaDozev6oElQhsVfbJvdi3//c2YvbY02LrNlbpGdt3Wq4rWonS"<br />      ;r.crossOrigin="anonymous";r.async=true<br />      ;r.src="https://cdn.amplitude.com/libs/amplitude-8.5.0-min.gz.js"<br />      ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){<br />      console.log("[Amplitude] Error: could not load SDK")}}<br />      ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)<br />      ;function s(e,t){e.prototype[t]=function(){<br />      this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}<br />      var o=function(){this._q=[];return this}<br />      ;var a=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove"]<br />      ;for(var c=0;c<a.length;c++){s(o,a[c])}n.Identify=o;var u=function(){this._q=[]<br />      ;return this}<br />      ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]<br />      ;for(var p=0;p<l.length;p++){s(u,l[p])}n.Revenue=u<br />      ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]<br />      ;function v(e){function t(t){e[t]=function(){<br />      e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}<br />      for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){<br />      e=(!e||e.length===0?"$default_instance":e).toLowerCase()<br />      ;if(!Object.prototype.hasOwnProperty.call(n._iq,e)){n._iq[e]={_q:[]};v(n._iq[e])<br />      }return n._iq[e]};e.amplitude=n})(window,document);<br /><br />      amplitude.getInstance().init("this is my api key of course");<br /><br />    </script>

 and then in my JS, I’m doing the following to test for click events:

function eLog(edef, props) {<br />    amplitude.getInstance().logEvent(edef)<br />}<br /><br />document.querySelector('#pricingBtn').addEventListener('click', eLog('Primary CTA Click'));<br />document.querySelector('#carmaCta').addEventListener('click', eLog('Learn More Click'));<br />document.querySelector('#getVoices').addEventListener('click', eLog('Get Library Click'));

My problem is that on every page load, before anything is clicked, all these events firing. I’m seeing this from my User Look-Up dashboard in Amplitude as well as in the event debugger chrome extension. What am I missing here?

Denis Holmes

Hi leactz ,

 

Thanks for writing into the Amplitude Community! Denis here, happy to help.

 

So you encounter this issue with Hugo where the script code is automatically being executed. While I cannot debug from my side as I do not have access to the code and infrastructure , my immediate suspicion would be that the code is calling the logEvents before the page is loaded. It seems it is reading and executing all the code immediately, rather than waiting for the site to load. 

 

I am hoping this stackoverflow article will help. It might be you have to pass reference to the function as listed in the first answer. This does seem to be an implementation issue so you would need to look up Hugo’s documentation and see why you are triggering these immediately. Looking at a separate Stackoverflow article here, you might need to follow their information. 

 

As I believe this is an implementation issue, you would need to see with the code and why it is triggering the script and log events immediately. I do think it might be that the page is not finishing loading yet. Another stackoverflow article related to this. 

 

I hope this helps for now with debugging at least! Let me know if I can in any other way.

 

Kind Regards.
Denis