Expand my Community achievements bar.

SOLVED

Twitter Conversion Pixel on Button Click

Avatar

Level 2

I'm trying to add a Twitter conversion pixel onto a button click using DTM. I've set the pixel to fire on a click event rule as non-sequential HTML. I see the rule being triggered on the button click, however I get a console error saying _satellite is not defined. So I tried saving the code has non-sequential JavaScript, however the UI won't save as the pixel is actually HTML.

Is there a way to workaround this?

<!-- Twitter single-event website tag code --> <script src="//platform.twitter.com/oct.js" type="text/javascript"></script> <script type="text/javascript">twttr.conversion.trackPid('XXXX', { 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=nzz8s&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=XXXX&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" /> </noscript> <!-- End Twitter single-event website tag code -->

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

This is pretty much the same as the other one you asked about here: Re: Google Conversion Tracking On a Button .

There are two parts to consider:

1) The code library to be loaded when the page loads.

-and-

2) The function call that happens when the button is clicked.

The library should get loaded in a page top rule as sequential HTML.  I added an async attribute to the script tag for performance sake.

<script async src="//platform.twitter.com/oct.js" type="text/javascript"></script>

Then there is the function call which should be in sequential JS called from your DTM click event rule.

  twttr.conversion.trackPid('XXXX', {

    tw_sale_amount: 0,

    tw_order_quantity: 0

  });

This is not the only way to do it, but it's a pretty efficient pattern to follow.

Note that I completely ignored the <noscript> tag (as shown below).

<noscript> <img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=nzz8s&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=XXXX&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" /> </noscript>

Please understand that <noscript> tags were designed to run in the case that the browser cannot (or will not) run javascript.  Since DTM requires javascript to do anything (along with the rest of the modern internet) there is absolutely no point in including this tag other than to fool tag validators...

If this response answers your question, please mark it as correct.  THANKS!

-Stew

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

This is pretty much the same as the other one you asked about here: Re: Google Conversion Tracking On a Button .

There are two parts to consider:

1) The code library to be loaded when the page loads.

-and-

2) The function call that happens when the button is clicked.

The library should get loaded in a page top rule as sequential HTML.  I added an async attribute to the script tag for performance sake.

<script async src="//platform.twitter.com/oct.js" type="text/javascript"></script>

Then there is the function call which should be in sequential JS called from your DTM click event rule.

  twttr.conversion.trackPid('XXXX', {

    tw_sale_amount: 0,

    tw_order_quantity: 0

  });

This is not the only way to do it, but it's a pretty efficient pattern to follow.

Note that I completely ignored the <noscript> tag (as shown below).

<noscript> <img height="1" width="1" style="display:none;" alt="" src="https://analytics.twitter.com/i/adsct?txn_id=nzz8s&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=XXXX&p_id=Twitter&tw_sale_amount=0&tw_order_quantity=0" /> </noscript>

Please understand that <noscript> tags were designed to run in the case that the browser cannot (or will not) run javascript.  Since DTM requires javascript to do anything (along with the rest of the modern internet) there is absolutely no point in including this tag other than to fool tag validators...

If this response answers your question, please mark it as correct.  THANKS!

-Stew

Avatar

Level 2

makes perfect sense, thanks a lot!