Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

All other Modules

Discuss all other Modules here.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

UserForms Module: JavaScript on After Submission Page?


Reply

4 Posts   1307 Views

Avatar
Worp

2 June 2011 at 11:29pm (Last edited: 3 June 2011 12:04am), Community Member, 11 Posts

I have been working on getting JavaScript Code to run on the page that appears after i successfully submitted a UserForms Form.

Background:
I have a contact form on the website. I want to add a conversion-tracking JS Code to it for SEO, so that every time someone submits a contact-form the code is called.

Problem:
Including JS in silverstripe works either via the controller or via the template. But with that i would call the script on pageload and not after successful submission of the contact-form. So if a visitor navigates to the site, the conversion tracking will count +1 user, even though he did not use the contact form but called the phone number instead.

What i have tried so far:
I have tried to add the script into the ReceivedFormSubmission.ss, which i assumed to be used to display the after submission message.
So my ReceivedFormSubmission.ss file looks like this:

$OnCompleteMessage <!-- Default content -->
<% require javascript(mysite/javascript/conversiontracking.js) %> <!-- My added content to include the javascript file located in mysite/javascript/ called "conversiontracking.js"-->


The content of conversiontracking.js is

// JavaScript Document
<!-- Google Code for Kontaktformular (hart) Conversion Page -->

<script type="text/javascript" src="http://www.googleadservices.com/pagead/conversion.js">
</script>

<script type="text/javascript">
   /* <![CDATA[ */
   var google_conversion_id = xxx;
   var google_conversion_language = "de";
   var google_conversion_format = "1";
   var google_conversion_color = "ffffff";
   var google_conversion_label = "xxxx";
   var google_conversion_value = 0;
   /* ]]> */
</script>

<noscript>
   <div style="display:inline;">
   <img height="1" width="1" style="border-style:none;" alt="" src=                        "http://www.googleadservices.com/pagead/conversion/xxx;script=0"/>
   </div>
</noscript>

// JavaScript Document
<!-- Google Code for Kontaktformular (hart) Conversion Page -->

(Sorry for the xxx-es but there is some user specific content in there.

Question:
How or where do i best add the conversion-tracking to make it a) work and b) only be called on successful submission of the contact form?

Reference:
If the website i am referring to is needed, i will send the link via private message to prevent spam.

Attached files:
Screenshots of the userforms backend and the site i would like the conversion tracking to appear.

Thanks in advance for any helping comment!
Worp

Avatar
Willr

6 June 2011 at 3:27pm Forum Moderator, 5511 Posts

You could define a custom template file for the submission page. All finished forms are directed to page-name/finished (https://github.com/silverstripe/silverstripe-userforms/blob/master/code/UserDefinedForm.php#L766) so if you create a template layout such as Page_finished.ss or UserDefinedForm_finished.ss (make sure you flush) the success page will now use that template layout.

You can then alter that template has much as you want to (include js, call new functions etc).

Avatar
Worp

6 June 2011 at 7:36pm (Last edited: 6 June 2011 7:37pm), Community Member, 11 Posts

Thank Willr,

you're the greatest. Sorry i didn't find that passage. I though I'd looked everywhere.

Will try your solution and report back :D

*edit:
Deleted my double post. It was posted because of frustration anyways.

Avatar
Worp

12 June 2011 at 10:29pm Community Member, 11 Posts

Thank you Willr!

I added the full JS code (see above) into the "ReceivedFormSubmission.ss" file in ../userforms/templates/ which added the JS code to every submission of the contact formular.

For everyone who is getting this problem in the future: It did not work via the silverstripe requirements. So writing the ReceivedFormSubmission.ss like this

<% require javascript(mysite/javascript/yourscript.js) %>
<% require javascript(http://www.googleadservices.com/pagead/conversion.js) %>

<div style="display:inline;">
   <img height="1" width="1" style="border-style:none;" alt="" src="http://www.googleadservices.com/pagead/conversion/973315624/?label=9WMsCMjF3AIQqLyO0AM&amp;guid=ON&amp;script=0"/>
   </div>

and then write the Javscript in "mysite/javscript/yourscript.js" will not do the job. I just put it hardcoded in the template file, which worked fine.

This can be marked as solved! =)