Last week the marketing guys asked me to include a Floodlight pixel on the website. From now everything looks fine, but then taking to the agency, they told me to fire the pixel only once per user.
First thing that came to my mind was “why they need me to fire it once per user if we can handle it in the Floodlight built-in pixel itself?”
But then, the agency said this feature only has a 24 hour’s timeframe. OK, don’t panic. We have the Google Analytics cookie (_ga by default) so my plan B was: Check if the user has the GA cookie and if not, fire the tag.
However, life is never like is planned and there are other dependencies, in my case, the Consent Management Platform. Let me give you summarize background to explain you how it works.
First time, user lands on the site, it gets the cookie disclaimer. If the user consent, then an event, let’s call it “consent” allows you to fire the pixels from the page.
So, my problem was that at the time the pixel should fire, I already had the _ga cookie, so I couldn’t evaluate if it was a new user or not. Then I saw this article from Simo Ahava and got the update from dusoft and Stephen Harris talking about the set of the dataLayer, try to make it work but it didn’t.
However, I started to spike about the set method of the dataLayer and ended in this article of Dan Wilkerson written more than 5 years ago with this beautiful code:
<script>
(function(window) {
var gtm = window.google_tag_manager[{{Container ID}}];
try {
gtm.dataLayer.set('balloonsPopped', undefined);
// Notifies GTM our HTML Tag has finished
gtm.onHtmlSuccess({{HTML ID}});
} catch(e) {
if({{Debug Mode}}) throw e;
// Notifies GTM our HTML Tag has failed
return gtm.onHtmlFailure({{HTML ID}});
}
})(window);
</script>
And this is where I saw the light: maybe I can’t control when something is going to fire because is asynchronous, but I can say to GTM if the pixel has succeeded or it has failed.
OK, so let’s get into the hot:
First we create the variable for reading the Google Analytics cookie (_ga):
Then what I did was to create a custom HTML tag for evaluating if the _ga exists, when the GTM is loaded, and therefore, before the “consent” event happens.
This is the code
<script>
(function() {
var gtm = window.google_tag_manager[{{Container ID}}];
try {
if ({{Cookie - _ga}}) {
// if _ga exists is NOT a new user and we fail the tag
gtm.onHtmlFailure({{HTML ID}});
return false;
} else {
// if _ga does NOT exist is a new user and he tag succeed
gtm.onHtmlSuccess({{HTML ID}});
return true;
}
} catch(e) {
if({{Debug Mode}}) throw e;
return gtm.onHtmlFailure({{HTML ID}});
}
})();
</script>
And this is when the GTM container loads
Reader, one advice here: PLEASE, USE THE F*CKING NOTES on GTM to help your mates.
Then, once we have the 2 tags set up, we have to arrange the sequence of firing. This is where Tag sequencing come into scene:
With these 2 checkboxes I don’t know at what exactly time the Floodlight tag is going to be fire. But, I can be 100% sure, that is going to be fired after checking if it’s a new user, and if the tag hasn’t failed.
Finally, don’t forget to include the built-in variables needed for the custom HTML tag:
And that’s all folks. There are also a lot of things you can do like create a function name for checking if it’s a new user and call it in another tags or variables but that’s another topic.
Live long and prosper.
