Home > Paid Traffic Sources > Facebook & Instagram

Firing an FB Pixel From Cake w/Dynamic Revenue. (6)

05-25-2019 10:47 PM #1 turnbill ()
Firing an FB Pixel From Cake w/Dynamic Revenue.

Has anyone in here successfully set up a FB pixel to fire from inside of Cake and also been able to pass the revenue back dynamically?

My pixel appears to be set up correctly, and it's firing leads back no problem...but revenue is only being passed when I hard code the amount. If I use the #price # variable, it breaks the whole thing.

Any ideas?

05-26-2019 02:56 AM #2 zeno (Administrator)

Can you show the exact code you have placed? Just replace your pixel ID with XXX.

Chances are its injecting #price # in some way that breaks the JS syntax. There will be ways around it with basic JS if that's the case but its hard to advise without seeing the exact existing situation.

05-26-2019 03:37 AM #3 turnbill ()

<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(argum ents)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version ='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXX');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXX&ev=PageView&noscript=1"
/></noscript>

<script>
fbq('track', 'Lead', {content_name: 'XXXXXXXXX', content_category: 'XXXXXXXXX',});
fbq('trackCustom', 'XXXXXXXXX');
fbq('track', 'Lead-Revenue', {value: #price #, currency: 'USD',});
</script>

Specifically the lead event 'Lead-Revenue' is where I'm trying to pass the revenue through w/the #price # token.

Also, I blanked out a few other things that I'd like to keep private, but they're all just pixel events and whatnot.

05-26-2019 08:54 AM #4 zeno (Administrator)

Ok, so the best thing you could do here is actually go through the conversion process yourself and inspect the code that gets injected on the thank you page. This will be the easiest way to technically debug this.

You could also look at the Facebook event debugger to see if any hints come through.

Aside from that, the likely problem is #price # is simply breaking syntax -- not getting replaced, or getting replaced but mangling things. Cake is great.

You could add some JS here to set price to some variable before the FB code, then use that variable insted.

E.g.

Code:

<script>


var cake_revenue = #price#;


!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(argum ents)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version ='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'XXXXXXXXX');
fbq('track', 'Lead', {content_name: 'XXXXXXXXX', content_category: 'XXXXXXXXX'});
fbq('trackCustom', 'XXXXXXXXX');
fbq('track', 'Lead-Revenue', {value: cake_revenue, currency: 'USD'});

</script>

<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=XXXXXXXXX&ev=PageView&noscript=1"
/></noscript>

Note there's no point in putting things in separate script blocks, just adds lines you don't need. Also, there was an extra comma in your track lead code at the end -- be sure to run any of this stuff through a JS syntax processor before using live as errors early in the code can break the JS. You then hunt for issues later in the code that are irrelvant as the code has been broken beforehand. I don't think that comma would actually cause an issue, but important to be pragmatic when debugging code.

Also, has been a while since I have dealt with FB JS, but is "Lead-Revenue" a valid track event? I would imagine so only if there was a custom conversion of the same name? Otherwise it would need to be under trackCustom or have hte revenue data passed in the track "Lead" event.

05-26-2019 03:38 PM #5 turnbill ()

Can you suggest a good site or method for verifying my JS syntax?

In case you can't tell, I'm not a developer lol.

05-27-2019 03:15 AM #6 zeno (Administrator)

You can use something like http://beautifytools.com/javascript-validator.php

In the case above, you can paste the entire code but remove the <script> tags and all the <noscript> part.

A few things to keep in mind:
- The #price # is going to cause errors, so just replace it with 1 when validating. The JS checker can't understand that "#price #" is a token that would be replaced by a real value before the JS processes the code
- The FB JS (starting with !function(f,b,e,v,n,t,s)) is also going to cause issues, since the JS checker can't check and understand this code that is pulling in JS from an external source

So, the actual code you would put in the JS validator is:

Code:

var cake_revenue = 1;


fbq('init', 'XXXXXXXXX');
fbq('track', 'Lead', {content_name: 'XXXXXXXXX', content_category: 'XXXXXXXXX'});
fbq('trackCustom', 'XXXXXXXXX');
fbq('track', 'Lead-Revenue', {value: cake_revenue, currency: 'USD'});

I.e. ignoring the FB initial JS, which is never modified, and removing the #price # token which makes no sense to the JS.

When you validate you can ignore the "'fbq' is not defined." error -- this is expected as the function "fbq" is defined by the Facebook JS and its external JS pulled in, which we have removed for convenience at the moment.

Using the format code option is also handy, as structured code is usually easier to read:

Code:

var cake_revenue = 1;


fbq('init', 'XXXXXXXXX');
fbq('track', 'Lead', {
	content_name: 'XXXXXXXXX',
	content_category: 'XXXXXXXXX'
});
fbq('trackCustom', 'XXXXXXXXX');
fbq('track', 'Lead-Revenue', {
	value: cake_revenue,
	currency: 'USD'
});

Home > Paid Traffic Sources > Facebook & Instagram