Would like to fire Twitter conversion on success response

Highlighted
Occasional Participant

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

Highlighted
Occasional Participant

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?

Highlighted
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

Highlighted
Occasional Participant

Re: Would like to fire Twitter conversion on success response

Thank you again.

Developer Portal

View API documentation, code samples, get your API key.

Visit Page

Register for our "Making Sense of Online Marketing for Retail" Webinar

Join us on Thursday, August 13th at 2pm ET for a free webinar where we'll discuss how to incorporate online marketing into your retail store.

Read More
Featured