Tracking a pixel with Angular.js

Question

We use the facebook tracking pixel to track the performance of our facebook ads. To do this, for each user who first comes to our service center, we need to enable the tracking pixel in the DOM. We do this by setting $ scope.newReg to true in the controller and with the following code in the template.

<div ng-if="newReg == true"> <img height="1" width="1" alt="" style="display:none" src="https://www.facebook.com/tr?ev=xxxxxx&amp;cd[value]=0.00&amp;cd[currency]=EUR&amp;noscript=1" /> </div> 

The question is what really happens if the $ scope.newReg parameter is set to false. I think the tracking pixel should be running, but according to the documentation, it seems like it could be running. "If the condition is false, then the element is removed from the DOM tree." This means that the tracking pixel appears in the DOM for a very short time and then is deleted. And this will trigger the tracking counter, even if the condition does not work.

Answer 1

No one else is dealing with this problem?

This answer seems to work for me: Facebook Custom Audience Pixel on SinglePageApplication SPA Server

But I believe that there are more ways to handle this.

Answer 2

I suggest you not depend on the ng-if documentation, which may change the next version due to performance requirements or just some errors.

I suggest you create your own tracking pixel directive, which introduces html if the conditions are good.