DoubleClick floodlight tags and AngularJS

Question

I've been given the following doubleclick tags to implement in an angular application.

Clearly, the below approach doesn't lend itself to a single page application. Somehow, I need to translate the below snippet into something more befitting of angular.

<script type="text/javascript">
var axel = Math.random() + "";
var a = axel * 10000000000000;
document.write('<iframe src="https://xxxxxxx.fls.doubleclick.net/activityi;src=xxxxxxx;type=ret;cat=getaq0;u1=[Equipment Cost];u2=[Equipment Type];u3=[Company Type];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=' + a + '?" width="1" height="1" frameborder="0" style="display:none"></iframe>');
</script>
<noscript>
<iframe src="https://xxxxxxx.fls.doubleclick.net/activityi;src=xxxxxxx;type=ret;cat=getaq0;u1=[Equipment Cost];u2=[Equipment Type];u3=[Company Type];dc_lat=;dc_rdid=;tag_for_child_directed_treatment=;ord=1?" width="1" height="1" frameborder="0" style="display:none"></iframe>
</noscript>

I've used tools for achieving similar things for google conversion, however, for double click I can't find a thing.

Could anybody recommend a tool or approach to achieve what I'm after - for instance, can I simply do away with iframes and call the src url from an angular service?

Answer 1

What worked for me was implementing this tag within an Angular Directive as the code will be compiled and inserted onto the page when loading. Our marketing team confirmed it's working and they can see the hits.

The directive: floodlight-tag.directive.js

(function () {
'use strict';

angular.module('myApp')
    .directive('floodlightTag', floodlightDirective);

floodlightDirective.$inject = ['$log'];
function floodlightDirective($log) {
    return {
        restrict: 'E',
        template: '<div style="display: none"><img src="{{ trustedUrl }} " width="1" height="1" alt=""/></div>',
        link: floodlightLink
    };

    function floodlightLink(scope, element, attr) {
        var axel = Math.random() + "";
        var a = axel * 10000000000000;
        scope.trustedUrl = attr.src + a + '?';
    }
}
})();

And the HTML: some-page.html (it should be placed on the template NOT the index.html)

<floodlight-tag src="[your_floodlight_url]"></floodlight-tag>

One thing I have not figured out is how to get this working for when you want these tags bound to say a button (i.e. on click). I'm working on a solution currently. See what I did below to resolve the first issue.

Hope this helps!