Skip to main content

Adding a Banner via Google Tag Manager

Updated

Banners are a great way to communicate important messages to website visitors—whether it's a promotion, service update, or urgent notice. They help capture user attention without disrupting the browsing experience and can be scheduled or customized as needed. Using GTM, you can add a banner across your site without editing the website’s code directly.

 

 

Step 1: Log in to Google Tag Manager

  1. Go to https://tagmanager.google.com/.

  2. Select the appropriate container for your website.

Step 2: Create a New Tag

     

  1. In the left-hand menu, click Tags.

  2. Click the New button.

  3. Name the tag, e.g., "Custom Banner Script".

  4. Click Tag Configuration, then select Custom HTML.

  5. Paste the provided banner script into the HTML field (see Step 5).

Step 3: Set the Trigger

  1. Click Triggering.

  2. Select All Pages if you want the banner to appear site-wide, or configure a specific trigger i.e. Home  

3. Click Save.

Step 4: Save and Publish

  1. Click Submit in the top-right corner.

  2. Enter a version name and description (e.g., “Added banner”).

  3. Click Publish.

Tip: Use a preview mode in GTM to test how your styling changes appear before publishing.

Step 5: Script to Use

1. Paste the following script into the Custom HTML field when creating the tag:

<script>
$("<a id='emergency-banner' style='text-decoration: none; color: #FFFFFF; width: 100%; background-color: #0189ff; height: auto; z-index: 1001;'href='https://docdemo.sites.carcloud.com/our-fleet/'><p style='margin-left: 22px;line-height:1.4; font-size:20px;margin: 0px auto; text-align: center;'>🚗 Book your ride today and save up to 30%! No hidden fees, free cancellation, and 24/7 support. 🌍</p></a>").insertBefore(".site-header");
</script>
<style>
.site-header {
margin-bottom: 0px;
}
@media only screen and (max-width: 840px) {
#emergency-banner {
position: fixed;
top: 48px;
}
}
</style>

 

2. Customize Your Announcement Banner:

    • Banner message: Update the text inside the <p> tag to reflect your current offer, announcement, or alert. For example:

"<p style='margin-left: 22px;line-height:1.4; font-size:20px;margin: 0px auto; text-align: center;'>🚨 Important Update: Temporary office closure this weekend.</p>"

    • Link URL: Change the value of the href attribute to direct users to a relevant page (e.g., a promotions page, terms and conditions, or service update).

    • Styling: You can adjust:

      • Background color (background-color: #0189ff)

      • Font size (font-size: 20px)

      • Text color (color: #FFFFFF)

      • Text alignment, padding, margins, or even add icons/emojis.

    • Mobile responsiveness: The @media block controls how the banner behaves on smaller screens. You can tweak top, font size, or layout for mobile devices.

Tip: Keep the message short and clear to maintain visibility and avoid overwhelming mobile users.

 

If you need assistance setting up or modifying the banner, please contact support@carcloud.com.

 

Related articles