I'm currently using an embedded jq sign up form. Would like to trigger a Twitter conversion tag when someone signs up. Either on submit or success response(better). Twitter tags typically trigger on a page load which won't work in this case. Thank you for looking!
Embedded CC form below:
<!-- I've put the script inside the body, so that it doesn't slow down the initial loading of the page -->
<body>
<!-- 2. The script that processes the form -->
<script>
$(document).ready(function() {
// process the form
$("#ctct_signup").submit(function(event) {
// get the form data
var formData = $("#ctct_signup").serialize();
// process the form
$.ajax({
type : 'POST', // HTTP method, always use POST for our form
url : 'https://visitor2.constantcontact.com/api/signup',
data : formData, // serialized form data
dataType : 'json', // the type of data we expect back from the server
success: function(data){
$("#ctct_signup").replaceWith("<p>Thank you for joining our mailing list!</p>");
},
error: function(response) {
$("#ctct_signup").replaceWith("<p>The server returned an error: Status " + response.status + ": " + response.responseText + "</p>");
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
</script>
<!-- 3. The HTML form that the contact sees -->
<form id="ctct_signup" action="https://visitor2.constantcontact.com/api/signup" method="post">
<p>Subscribe to our Weekly Newsletter!</p>
<input name="email" type="email" placeholder="Email" size="30" required>
<br/><br/>
<input name="first_name" placeholder="First name" size="30">
<br/><br/>
<input type="hidden" name="ca" value="***************">
<input type="submit">
</form>
</body>
This is the Twitter tag:
<!-- Twitter single-event website tag code -->
<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
<script type="text/javascript">twttr.conversion.trackPid('nyerj', { tw_sale_amount: 0, tw_order_quantity: 0 });</script>
<noscript>
<img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=nyerj&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
<img height="1" width="1" style="display:none;" alt="" src="//t.co/i/adsct?txn_id=nyerj&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" />
</noscript>
<!-- End Twitter single-event website tag code -->
Hello,
Thank you for reaching out to Constant Contact API Support.
I'm happy to help in any way I can, but because I'm not familiar with the Twitter conversion I may not be able to provide advanced assistance with it.
In looking at the Twitter tag, it looks like it runs a script on page load or loads a tracking image if noscript. I think you might be able to take the Twitter tag and execute it within your signup success. Example:
<!-- I've put the script inside the body, so that it doesn't slow down the initial loading of the page -->
<body>
<!-- 2. The script that processes the form -->
<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
// process the form
$("#ctct_signup").submit(function(event) {
// get the form data
var formData = $("#ctct_signup").serialize();
// process the form
$.ajax({
type : 'POST', // HTTP method, always use POST for our form
url : 'https://visitor2.constantcontact.com/api/signup',
data : formData, // serialized form data
dataType : 'json', // the type of data we expect back from the server
success: function(data){
$("#ctct_signup").replaceWith("<p>Thank you for joining our mailing list!</p><noscript><img height='1' width='1' style='display:none;' alt='' src='https://analytics.twitter.com/i/adsct?txn_id=nyerj&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0' /><img height='1' width='1' style='display:none;' alt='' src='//t.co/i/adsct?txn_id=nyerj&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0' /></noscript>");
twttr.conversion.trackPid('nyerj', { tw_sale_amount: 0, tw_order_quantity: 0 });
},
error: function(response) {
$("#ctct_signup").replaceWith("<p>The server returned an error: Status " + response.status + ": " + response.responseText + "</p>");
}
});
// stop the form from submitting the normal way and refreshing the page
event.preventDefault();
});
});
</script>
<!-- 3. The HTML form that the contact sees -->
<form id="ctct_signup" action="https://visitor2.constantcontact.com/api/signup" method="post">
<p>Subscribe to our Weekly Newsletter!</p>
<input name="email" type="email" placeholder="Email" size="30" required>
<br/><br/>
<input name="first_name" placeholder="First name" size="30">
<br/><br/>
<input type="hidden" name="ca" value="***************">
<input type="submit">
</form>
</body>
Please let me know if you have any other questions!
Sincerely,
David B.
Tier II API Support Engineer
Thank you for such a quick response. I will give it a try. It looks like I need to load a small library as well.
<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
Should this go in the head?
Hi,
Because I'm not familiar with this specific integration, I'm not sure if that would change the speed in which the page loads. I would personally put it in the equivalent place to where it would normally go. In the code you provided it was right above the other Twitter tag content, so I just put it right above where the form script would go.
Sincerely,
David B.
Tier II API Support Engineer
Thank you again.