June 15, 2017
Change Chrome Address Bar Color with Google Tag Manager
Today’s blog post will be a quick one. Yesterday, I stumbled upon Simo Ahava’s old blog post – Dynamically Added Meta Data Indexed By Google Crawlers. It describes how you can inject SEO metadata to website’s <head> with Google Tag Manager, such as description or keywords. So I thought, what about changing Google Chrome address bar color?
If you’re not familiar with I am talking about, let me illustrate. If you’re using Google Chrome browser on your Android device, you already the default color address bar – gray. But with a little piece of code that color can be easily changed (like in the example below).
P.S. This setting does not affect the color of Incognito window.
Technical Requirements
Starting with version 39 of Chrome for Android on Lollipop, developers are now able to use the theme-color meta tag to set the toolbar color—this means no more gray toolbars!
The syntax is pretty simple: add a meta tag to your page’s <head> with the name=”theme-color”, and set the content to any valid CSS color.
For example:
<meta name="theme-color" content="#db5945">
By default, Google Tag Manager injects all codes from custom HTML tags to the end of website’s <body>, but you can simply overcome this.
In his blog post, Simo shares a little piece of code which injects meta tag into <head>. So I borrowed it and modified a bit. Here’s the result:
<script>
var m = document.createElement('meta');
m.name = 'theme-color';
m.content = '#152126';
document.head.appendChild(m);
</script>
This tag creates a new <meta name=”theme-color” content=”#152126″> tag and adds it as the last child of the head HTML element.
Now, all you need to do is change the #152126 color code into the one you need. If you don’t know what it is, here’s an online tool for you.
Create a Custom HTML tag
Head over to your Google Tag Manager account, click Tags and then New button. You should see something like this:
Click Tag Configuration block (anywhere on it) and choose tag type: Custom HTML. Paste the code I posted above.
In Triggering section, also click anywhere on the block and choose All pages as a trigger. The final result should look like this:
Don’t forget to test the tag with Preview and Debug mode. Finally, publish all the changes in the container (by clicking the Submit button in the top right corner and following all the steps.
Things to Keep in Mind
- After you add the code and test it on your website (with Android Chrome), you’ll notice that, for few moments, the address bar is displayed in gray color and only then changes to your desired color.This happens because Google Tag Manager needs some time to load. So if you have the opportunity to add theme-color meta tag as a plain text directly to website’s source code, do that. This way you’ll avoid a flashing effect.
- If you want to experiment with colors and change it multiple times, every time you do some changes and publish them, clear Android Chrome’s cache. Otherwise, your mobile browser will keep showing the same color (regardless of published GTM tag’s settings).
Conclusion
So there you have it. A quick way to change Android Chrome address bar color with help of Google Tag Manager. All it takes is just a little piece of code which injects <meta name=”theme-color” content=”#152126″> as the last child of the head HTML element.
If you have direct access to website’s code, I recommend adding this metadata as plain text directly. This way you’ll avoid flashing effect.
But if you don’t have any other way around and still want to change Chrome address bar color, Google Tag Manager is a pretty good option.
5 COMMENTS
Thank you for letting me know would like to see this in action. Do you know any websites that are using this feature? Does it work on Chrome for Desktop?
Great information , But for blogger platform user this will work.
duda por que cuando acciono el teclado el color cambia a blanco
Can we add gradient colour?
No