Customise a Dynamic Favicon With Google Tag Manager

While browsing an e-commerce more and more often we have a tendency to add to cart several items, just to see if at the checkout we might come across additional shipping charges or further factors that could prevent us from completing a purchase.

Another interesting habit we observed about users behavior is that they usually open more than one tab where the same items are added to the cart to have benchmark comparisons.

The purchase often happens in the last open tabs (under equal conditions, e.g. shipping costs, price, etc.) and the others are forgotten in the chaos of the open tabs.

In this regard, is it possible to draw the attention of the users to the tab of a specific e-commerce even if it stands in the middle of the tabs which a potential customer is browsing? Presumably so, let’s see how we’ll figure out.

Include the number of products in the cart inside the favicon

By testing we performed, with a number of open tabs exceeding 5, the users try to figure out the tabs of interest looking at Favicon and Title, in this specific order.

We thus could try to “hack” the Favicon in order to attract the gaze and as a consequence the attention of the user towards our tab? Or in other terms, how can we definitely stand out form the others?

The answer is absolutely yes, as long as we include in the Favicon not only an eye-catching but also useful element.

Talking about E-commerce we could add inside the miniature of our logo the number of items added to cart. Thereby, among all the different tabs opened in the browser, ours would stand out as against all the others and it will be more useful too!

Dynamic Favicon with Google Tag Manager

Let’s have a look at the steps to follow to obtain a dynamic favicon.

Custom HTML: Favicon Manipulation

First of all we need to build a custom HTML to be triggered in all the pages of our website.

You won’t find below the entire code, because it is too long. Find at this link the javascript function that you have to include into the custom HTML (be sure to include it between <script></script>; the code is built under license by MIT and GitHub ejci).

Name the tag (e.g. Favicon Manipulator) and save.

Note: as a default the code adds a red bubble with a white label inside. You can customise the default fields to change text and background colours, font and position.

Here’s the code:

Custom HTML & Upload Variables

In order to update the favicon with the items added to the cart by the user you need to use anothe custom HTML that will be triggered once the counter of the cart will be updated. The update data must be passed into a custom variable that will be recalled into the cHTML you have just built. Find the code below:

Instead of #MyVar you have to put your real counter variable that include the number of items inside the cart.

The “notification” inside the favicon will appear in popFade mode; but you can test different kind of popups replacing popFade with the values: slide, fade, pop, up, none.

The final result will be something similar to:

Keyfindings

During the testing we performed, we realised that few ecommerce customise the favicon including eye-catching elements, such as the items added to cart or a “blink” of any kind of element to draw the user’s attention.

Now, as a consequence, having a “badge” that helps your tab to stand out among others and reminding the users the number of items in the shopping cart could lead to significantly obtain an increase in visibility/usefulness compared to competitors. As a rule you always need to test it!

The code in the post allows you to upload into the favicon almost anything, from the items to the total price of the cart up to a html5 video. But remember the the dimensions are minimal and the goal here is to provide a facility to users not to introduce a disturbing element.

Note: the manipulation works for Chrome and Firefox, not for Safari (it has no favicon J). If the favicon has some kind of restriction the code won’t be executed.