cancel
Showing results for 
Search instead for 
Did you mean: 

Would like to fire Twitter conversion on success response

All Star

Would like to fire Twitter conversion on success response

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 -->

4 REPLIES 4
Moderator

Re: Would like to fire Twitter conversion on success response

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

All Star

Re: Would like to fire Twitter conversion on success response

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?

Moderator

Re: Would like to fire Twitter conversion on success response

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

All Star

Re: Would like to fire Twitter conversion on success response

Thank you again.