• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

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).

Chrome address bar color - before and after

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:

Untitled tag

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:

change android chrome address bar color - google tag manager custom html tag

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.

GTM Preview button

 

Things to Keep in Mind

  1. 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.
  2. 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.

 

 

Julius Fedorovicius
In Google Tag Manager Tips
5 COMMENTS
Kevin Treman - Trinacle Website Design
  • Oct 31 2018
  • Reply

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?

Satyam gupta
  • Nov 18 2018
  • Reply

Great information , But for blogger platform user this will work.

Jose
  • Nov 28 2018
  • Reply

duda por que cuando acciono el teclado el color cambia a blanco

Rahman Hidayat
  • Jul 26 2019
  • Reply

Can we add gradient colour?

    Julius Fedorovicius
    • Jul 26 2019
    • Reply

    No

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings