Pass variables to script content in stache files

CanJS
1

We have third party tracking pixels that we have to include. These tracking pixels are on all pages but have various values that depend on contents either within the page, or the environment itself (staging vs production).

So far I have been unable to make this work. I filed a bug but I’m not sure it’s going to be solved at all/ in time for when we need to launch. Does anyone know how to work around this?

For example, we have a Twitter tracking pixel. I’ve included it in the index.stache file. I tried moving the twttr.conversion.trackPid call to the app.js file but encountered a race condition. How do I do this properly?

<script src="//platform.twitter.com/oct.js" type="text/javascript"></script>
<script type="text/javascript">
twttr.conversion.trackPid({{id}}, {
	tw_sale_amount: {{saleAmount}},
	tw_order_quantity: {{orderQuantity}}
});
</script>
2

If there’s a way to do this without an embedded script, you should do that.

Some approaches might include:

  • Have a tracking component that accepts amount/quantity/pid on the tag
  • Add this information to your session, create an endpoint that returns said session and have a component that does tracking based off of your session.
  • Use routing to pass in order information, look up the remainder

In any case, you’re almost assuredly best off handling this through an API; if you’re doing SSR, it’ll be embedded as an inline cache anyway.

can.Component’s that lack templates aren’t something to be scared of.