Creative Tag Manager – Ads, Promotions, and Visitor Messaging

Let’s get creative with Google Tag Manager! Google Tag Manager has changed the way we implement Google Analytics here at LunaMetrics, making it easier to track pageviews, events, you name it. It’s excellent for adding marketing tags for Adwords or conversion tracking for any service you need. But many people gloss over the fact that GTM can deliver really any code that you want to your site. This includes HTML, CSS, and Javascript!

So let’s think outside of the Analytics box and talk about using GTM to add content to your site, specifically:

breaking news strips

fly-in promotion

expandable in-line messages

Google Tag Manager Loads Later

There are a few things to consider before we dive in. Google Tag Manager loads as your page is loading, with many of your tags firing after the visitor has started to see elements appear on the page. For this reason, GTM is not going to work well for loading the main content on your site. For example, GTM will not be a great tool for experimenting with different headlines on your site, as the visitor may see the original headline flash before GTM loads and changes it. If you’re using GTM to add content, it should be lower on the page or should be revealed to the visitor in some manner (i.e. popup, flyout, expand, etc.)

Google Tag Manager is NOT a Content Management System

GTM can do a great many things, but for several reasons, should not be used to add the main content to a site. GTM can enhance, highlight, or contribute to your site, but it should not BE your site. You want your main content to be high quality, SEO-friendly and certainly not added via a third-party tag management system.

Respect Your Visitors

Just because we can add these ads and messages to our site, doesn’t mean that we need to have them fire on every single page. Later on we’ll discuss ways to control when these Tags fire. Your ads should have a clear way to hide them, and ideally should enter and exit gracefully. Here’s a nice close icon I’ve used before.

What Can We Add

Here are few simple things to get you started! Feel free to take a tweak. For each of these, we’re adding HTML to your website that contains the frame of the messaging we intend our visitors to see. We use a few different ways to do this, using jQuery, or just by adding the HTML to the page and hidden. We’ll also include some CSS to make them look pretty, and we’ll do it all inside of a Custom HTML Tag. We use jQuery to make them animate nicely and to insert them into the page a little easier. If you don’t already have this on your site, I would look into including this when the pages load. You can also include them at the top of your Custom HTML Tag if this is the only reason you’ll need it.

1. Breaking News Box

Whether you have a news site or an ecommerce site, there may be occasions where you want to need to send a message to all visitors. If you’re a content site, perhaps there is quite literally breaking news that you want to share will all of your visitors. Or maybe you’re running a special that’s about to end. All of these are great candidates for a breaking news strip that appears at the top of your page

Add it to your site with the following custom HTML Tag. You’ll notice there’s a spot where it says “##### YOUR CONTENT HERE #####.” We’ll come back to this!

2. Fly-In Promotion

Sometimes it might be nice to have an ad or promotion fly-in from the side of the page, rather than the top. This example uses the same basic concept, but it’s just styled a little differently. We’ve used this on our Google Tag Manager blog posts to cross-promote our Google Tag Manager training.

Add it to your site with the following custom HTML Tag. You’ll notice this one also has a spot where it says “##### YOUR CONTENT HERE #####.”

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<style type="text/css">

#popout {

-moz-transition:all0.5sease;

-webkit-transition:all0.5sease;

-transition:all0.5sease;

position:fixed;

-webkit-transform:translateZ(0);

width:420px;

max-width:420px;

height:165px;

bottom:200px;

right:-440px;

font-size:14px;

z-index:100;

background-color:#f5f5f5;

font-family:"Helvetica Neue","Arial",sans-serif;

-webkit-box-sizing:border-box;

-moz-box-sizing:border-box;

box-sizing:border-box;

-webkit-box-shadow:-4px4px8pxrgba(0,0,0,0.2);

-moz-box-shadow:-4px4px8pxrgba(0,0,0,0.2);

box-shadow:-4px4px8pxrgba(0,0,0,0.2);

}

#hider {

height:100%;

width:17px;

z-index:101;

float:left;

background-color:#ccc;

background-image:url('close_small.png');

background-position:topleft;

background-repeat:no-repeat;

}

#hider:hover {

background-color:#fff;

cursor:pointer;

}

</style>

<div id="popout">

<div id="hider"></div>

<div style="float:left;width:400px;text-align:center;">

<h1>##### YOUR HEADLINE HERE #####.</h1>

<p>##### YOUR CONTENT HERE #####.</p>

</div>

</div>

<script>

functionshowPopOut(){

$("#popout").animate({

right:"0"

},"fast","linear",function(){

});

}

$("#hider").click(function(){

$("#popout").animate({

right:"-440"

},"fast","linear",function(){});

})

setTimeout(function(){showPopOut();},1000);

</script>

3. Expand Message

Not quite sure the best term to call this, but this little bit of code will insert your DIV directly above another element on the page. This can go a number of places, but for this purpose, I’ll add it directly below this paragraph. Ideally, this could happen right as a person landed on the page, or you can set a custom rule for when a visitor hovers over a certain part on the page, etc. Again, we’re using jQuery to make this nicely slide in, and we’re giving users a way to hide the message if they so desire.

4. Colorbox/Fancybox Options

I know this will be a popular question, so I’ll just throw it out there. There are a number of excellent JavaScript plugins that you can use to pop up these custom windows, so I wouldn’t recommend starting from scratch. These can definitely be added through Tag Manager, but will probably require some custom

When We Fire Them

So now that we have these spiffy messaging units, the next question is on which pages or events do we want them to fire?

Not on Mobile

Do you want these to fire on Mobile? If not – you can use a Macro to guess to a reasonable degree if the user is on Mobile device, and then set that up as a blocking rule.

Only the First Page of a Visit

Maybe we want to hook new visitors, but we don’t want to hit them over the head with it again and again. Consider the following macro and rule.

1

2

3

4

5

6

7

8

9

function(){

varhost={{hostname}};

varref={{referrer}};

if(ref.indexOf(host)>0){

returnfalse;

}else{

returntrue;

}

}

On Specific Pages

If you’re promoting something special, perhaps you only show a message when the visitor reaches a certain page, like I have set up for this article. Simple Rule below:

On Specific Blog Categories

If you have a blog, chances are you’re tagging them in some way. If you’re using WordPress, even better! Most WordPress blogs add the category that you’ve tagged your articles into the class section of the tag, in case you have separate formatting set up. We can grab those classes with this with a Macro and use it in a rule!

1

2

3

4

5

6

7

8

function(){

vararticle=document.getElementsByTagName("article")[0]

if(article){

returnarticle.className;

}else{

return"";

}

}

At Specific Times

GTM has a built in scheduling tool. I’ve often wondered what I would use this for, but this seems like a great way to schedule a breaking news strip to appear for just one morning. It’s easy to set up on specific tags, but has somewhat limited functionality. Right now it only allows you to select one date/time period to run a Tag. Ideally, this may be expanded at some point to include recurring days. If you know your site is going to be experiencing some upgrades from 12am-3am, you can easily create a Tag for a message to visitors, then just set it and forget it! Scheduling can be combined with other rules to fine-tune who sees what and when.

On Specific Events

Consider using a Click listener and Rule to fire specific messages. For instance, when someone adds something to their shopping cart, maybe remind them about the free shipping special you have running. Your rule will then use either event = event.click or event = event.linkClick to specify when to fire the Tag.

What They Say

As for the content, it’s easy to simply type in what you want to say on these messages. But let’s go one step further! We can use Macros to grab information from the page, pick a random sentence, or change the content based on the page URL.

URL-Based Messaging

Let’s reach into our bag of tricks and pull out that Lookup Table macro. GTM already has a URL macro, so all we need for this is to determine which messages show on which pages. Keep in mind, the Lookup Table macro only supports exact matches. This it to keep it speedy and simple. If you want to do more complicated page matching, you can create a custom macro to classify URLs based off of regular expressions or case statements, then use that to feed into the Lookup Table. If you have a lot of these to add, here’s a quick way to populate the Lookup Table. You can also use this macro as your rule, where the only pages that are in the Table will fire a Tag.

Random Sentence

If you’re testing out different copy on your site, you can run a very rudimentary content experiment by cycling through different variations to see which works best. This requires using two macros, one to create a random number between certain values and a Lookup Table that will contain your different sentences. Then depending on which random number is returned, show a different sentence.

1

2

3

function(){

returnMath.floor((Math.random()*10)+1);

}

Grabbing Information from the Page

Remember that you can reference items on the dataLayer or on the page through Macros, which can then be echoed back in a message. For instance, say someone lands on a page with a promotional price on an object. You can create a macro to reference that section on the site to grab that value, then create an popup saying, “For a limited time only, this product is on sale for $XX.YY!” This will be easiest if you have it available on the dataLayer, or if there’s a specific ID or Class on the element that you’d like to reference.

Measuring Success

I won’t go into great detail about this, but consider adding events to these various Tags. You can fire an event using the same rules to say that the Tag was shown, or also add Link Click Tracking onto the ads themselves to see how effective they are. These solutions are great for small-scale messages, but if you are considering a larger content experiment, I’d really suggest using something like Google Experiments.

Hopefully this post has given you some good ideas and great resources to start thinking outside of the box with Google Tag Manager! If you’ve used GTM in a creative way, share your success in the comments below.

Receive Blog UpdatesGet notified when blog posts like this one are published!

Jon Meck is our Technical Marketing Manager, promoting our services and trainings to the world. He has a jack-of-all-trades background, working for companies large and small in social media, website design and maintenance, and analytics. He is an Excel enthusiast, he loves efficiency, and he is strong proponent of the “Work Smarter, Not Harder” mantra. Jon is also the author of two number puzzle books.

Hi Udi, if you don’t already have that Macro, it should be pretty easy to create. Click NEW and then MACRO, and then name this one “hostname.” From the Macro Type dropdown, select URL. And then, under Component Type, choose Host Name. Save that Macro, and then try to Preview & Debug again!

Let me know if that fixes this issue

Evgeny

Hi, Jon! Very useful article! Thank you! Tell me, is it possible to display a banner across trough GTM only to new visitors who never be on site. The site is the usual code GA and Universal GA.

I’m sure it’s possible! I would look into how to set a cookie and read a cookie via JavaScript. The general idea would be to set a cookie when someone arrives for the first time, and only show the ad if the cookie isn’t there. Of course, along with Universal Analytics, anytime someone clears their cookies, they’ll show up as a new visitor.

Hi
I have basically the same question as Evgeny, with some addition.
So is this algorithm possible – User comes to site GA checks is he is new (no cookie), if no cookie GA fires an experiment and assign cookie, if yes – no experiment, regular browsing.
Thanks

I copied and pasted your code for fly in promo but it did not work for some reason.

I’ve seted it in a custom html tag and set for testing purposes to fire on all pages… so it should show me 1 second after I reload the page right?

Jon Meck

Correct – it should work. This type of functionality also requires that you have jQuery already loaded on your page. Please make sure you have that as well. You can also check the Developer Console to see if there are any errors.

Joe Del

Hi Jon,

I’ve been curious about this type of agile messaging for some time now. It’s really great especially in environments where the change process doesn’t match the pace of change that digital marketing requires.

Hoping you could help with something. I’m trying to implement something similar to your point 3. Expand Message piece. However I’d like to load an iframe within the content area. I’ve tried this and have had no success.

Any ideas?

Many thanks,
Joe

Jon Meck

I haven’t tried it, but I can’t imagine why it wouldn’t work. I’d google how to add an iframe to a page. You could do with or without jquery.

Hi Tom – all of these solutions require a little knowledge of jQuery. While we’re using GTM to insert these into your page, this actually has nothing to do with Google. You’ll need to understand the underlying logic for how jQuery adds this to your page.

For the expand box, we’re using “$(‘#header’).prepend” to find a DIV on your page with the ID of “header.” You’ll need to change this to match a specific place on your page where you would like the message to be inserted.

This would just be a simple update to the CSS code inside the Custom HTML box. You can use the color: #000 notation to change the font color. If you get stuck on other design elements, you just need to look for some basic CSS styling guides.

Hope this helps!
-Jon

buybatteries

Thanks Jon!!!

Nathan Brunetti

I would like to make the Breaking News Box push my page down instead of coming down over the page. What do I need to change to make that happen?

Hi Nathan – this is more of a CSS question. You could make it more like the Slide-In Message option above, and prepend to the body. It would look like this: $(‘body’).prepend(…

This article is more about how to use Google Tag Manager to do implement it, but a little bit of CSS and jQuery will go a long way to helping you customize these options to work on your own site!

Tamara Caligari

Hi, I am trying to implement this in my website to show a banner for Terms and Conditions. My only problem is that it is not working upon publishing and I am not sure what the issue is. I have set the code to load on All Pages but still nothing shows when the website loads. Any ideas as to what I am doing wrong?