Auto-submit a Form to Track User Page Views

[davidhshugar]

Hello,

I want to include a hidden form at the bottom of a web page with multiple datapages that auto-submits when a user enters a page. This is meant to track which user view which specific website pages.

All the other scripts I have tried have put my page into a infinite loop and are not working. For example, this script below does not work. 

<script type="text/javascript">
  if(document.getElementById("caspioform")) {
  document.getElementById("caspioform").style.display = 'none';
  setTimeout('document.forms["caspioform"].submit()',1000); } 
</script>

Any advice? 

[MayMusic]

You need to make sure to put this script in an HTML Block and NOT Header/Footer. Is that the issue?

[Hastur]

@davidhshugar

I suggest you using the custom event to fire scrip only if datapage is ready.

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
// do something  
});
</script>

Check this article to get familiar with this event - https://howto.caspio.com/release-notes/caspio-bridge-13-0/13-0-impacted-areas/

Also, you use the string as the first parameter of the setTimeout() method. setTimeout() works in a different way.
You need to use a function to do something inside setTimeout() method.

Please check this article: https://www.w3schools.com/jsref/met_win_settimeout.asp

<script type="text/javascript">
document.addEventListener('DataPageReady', function () {
 let submissionForm = document.querySelector('form[action~="your_deploy_url"]');
 submissionForm.style.display = 'none';
 setTimeout(
   function() {
     submissionForm.submit();
   }, 1000);
});
</script>

Use the Deploy URL link of your datapage instead of "your_deploy_url" within the code.

[davidhshugar]

Hello @MayMusic

Yes, I have the script in a HTML block, but the submission form still seems to be in a endless loop.

Interestingly, when the autosubmit form is the only datapage on the website, it works fine and without a loop, but when there are other datapages (which includes another submission form) the page goes into an endless loop. Are the other datapages causing this problem, and do you have any idea for a solution?

 

Also, thank you for your response @Andrew

I assume the script should be added to the website's HTML. I have tried this, but it doesn't seem to work. Any further suggestions for implementation?

Thanks for the support,

Best,

David

 

 

 

[davidhshugar]

Hello,

The problem was actually fixed when I placed the auto submit form above the other search forms on the page. Now the page does not go into an endless loop.

But, there is another slight problem that would be good to fix. When pressing submit on the other form on the page (not the autosubmit page), the entire webpage reloads. I have AJAX enabled and "stay on same page" and previously the page was able to update results without re-loading the entire page. Is it possible to alter the autosubmit form so that when another form is submitted on the page, the entire page doesn't need to be reloaded?

FYI, the autosubmit form has does not have the "disable AJAX" option selected, so I was hoping the page would not require being re-loaded, if the other's form submit is selected.

Best,

David

[douvega]

Hi @davidhshugar

I know you have sorted this partially, however, I would bring another solution for you.

You can use REST API to post (create) the record everytime a user opens the webpage. I recommend you using this service which lets you do these type of integrations very quick. No datapage autosubmit needed but it is either JS or jQuery dependant to accomplish your goal.

I hope you can explore this option, if you need help send your questions.

[Hastur]

@davidhshugar

I have improved the solution to work without reloading.

You need to add one additional HTML block with this code:

<p id="ancor"></p>

The following code should be int the Header:

<script type="text/javascript">
document.addEventListener('DataPageReady', submitHandler);

function submitHandler() {
	let submissionForm = document.querySelector('form[action^="your_deploy_URL"]');
    submissionForm.style.display = 'none';
    if(document.getElementById('ancor') !== null) {
        document.removeEventListener('DataPageReady', submitHandler);
        submissionForm.submit();    
 	}
   document.removeEventListener('DataPageReady', submitHandler);
}
</script>

To make it work, DataPage itself should either redirect OR show the message after the submission.

[ManonG]

Hello

 

I put the code in place and it's not working.
Here's the code I put in the header and the HTML Block. Did I miss anything?

<script type="text/javascript">
document.addEventListener('DataPageReady', submitHandler);

function submitHandler() {
let submissionForm = document.querySelector('form[action^="https://c1acf414.caspio.com/dp/676f7000f5c75c00f4aa45c18e6a"]');
submissionForm.style.display = 'none';
if(document.getElementById('ancor') !== null) {
document.removeEventListener('DataPageReady', submitHandler);
submissionForm.submit();
}
document.removeEventListener('DataPageReady', submitHandler);
}
</script>


 HTML BLOCK

<p id="ancor"></p>

 

Can someone guide me?

Thank you