Id like to fire our facebook pixel code for tracking clicks on our new app. Would would I go about firing this script below on each of the forms/pages I create
I suppose the easiest way would be to put all the Javascript code into another Javascript function, and then call that using anvil.js.call_js when you want to fire the code. The function itself can go into Native Libraries, but won’t get called unless you do it explicitly.
You wouldn’t need the actual tracking image, since that’s designed for users who have Javascript turned off. If they have that turned off, your entire app isn’t going to work.
For the first attempt, I put the FB code in assets and saved as a JS.
Just not sure how to call it now, or if its better to paste into native assets and call it by function name. If thats the case, the default function name is super weird to me. Not sure if I could rename it or if it has to be named like that "f,b,e,v,n,t,s)
Create a Javascript function in Native Libraries. In that function copy the code Facebook gave you (everything between the script tags). Let’s say you name the function facebook_pixel. Then in a form, use anvil.js.call('facebook_pixel') to trigger the function.
Edit: you can even give your function parameters, and replace some of the tracking bits in the Facebook code to use those parameters, if there are different ways of tracking. e.g. if there’s something you want passed to Facebook other than 'PageView'
I created the function below and put it in native. But I must have missed something because it doesnt run correctly. Tried replacing the content of the javascript with basic alerts and other tests but it just stops and prints the script out to the broweser like formatting issue or browser isnt running the code.
Yes, picture Native Libraries getting pasted in the head section of a page. You do need the script tags if you’re putting Javascript there. That allows you to put both Javascript and CSS in there.
Almost there. I thought I had it fixed, but if I put this below into native libraries it still automatically runs without me calling the function. Almost like it auto runs.
If you replace the body of the function with a Javascript alert, does it still trigger automatically? e.g.:
<script>
function FBPIXEL()
{
alert('Running');
}
</script>
If the alert shows, then you’re definitely calling that function from someplace. If the alert doesn’t show, then it’s down to the Facebook Javascript code doing something strange.
Good call. Yes that does work, and I can call it with Anvil. So its something weird with the facebook pixel javascript. Guessing since it has a function call at the top its auto running that for some reason. I dont know javascript, so will see if there are other options to call the pixel or have to play with the FB javascript code to see what its doing.
Yeah, that code’s beyond my Javascript knowledge. I can’t imagine you’re the first to have this issue, so hopefully someone else has a solution out there.
I wonder what happens if you forgo all the javascript and just put an image component on an anvil form and assign it to display the url of the contents of src= in the above code?
You can fiddle with sizing, displaying, and re-hiding the image later.
Tried it first by adding an image and use the source set to the get call to facebook and will see if that works first. I need to fire a view event on the landing page, and a lead event after form submission. So need to be able to call both of those events separately.
