Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Twitter Conversion Pixel on Button Click

vipinvijayan10
Level 2
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
StewSchilling
Correct answer by
Community Advisor
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
StewSchilling
Correct answer by
Community Advisor
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