All analysts need a basic understanding of how web developers build web pages with HTML. While analysts work almost exclusively within our tagging management systems, everything we do within said system reads from and writes to the site’s code. We need to know a little about what’s under the hood if we want to go beyond Google’s pre-supplied tags, triggers, and variables.
Web developers depend upon HTML, CSS, and JavaScript for most of their programming. Good news: we can leave almost all the CSS and JavaScript stuff in a page’s code in its black box[1]. Bad news: there’s a lot to cover, so this will be broken up into multiple posts (assuming this gets any traction and people find it informative). This post focuses on HTML basics in web development. Later we’ll talk about how tag managers and HTML documents interact and why we aren’t as concerned about the CSS and Javascript bits.
HTML Elements: The Lego Bricks
Do me a favor. Right-click on this page and select “inspect”. If necessary, navigate to the “Elements” tab in the open window. You should be seeing a lot of stuff that looks like this one after another:
<letters something="gibberish" something-else="more-gibberish" last-one-for-now="most-
ridiculous-gibberish-that-ever-existed">A link, text block, or more gibberish.</letters>Gibberish 1
Everything you see in Gibberish 1 is a silly example of an element. Elements are general-purpose tools with multitudinous applications both behind the scenes and on the page. When visible, elements build the forms, buttons, menus, pictures, and other components with which users interact. Other elements provide functions, pixels, and tools that help the page work correctly. When all the elements are correctly put together, they make a (hopefully) engaging web page!
HTML Tags
Every <[insert-things-here]> you see is an HTML tag…not to be confused with a GTM tag. Tags work together in pairs of <tag>…</tag> to tell browsers where each element begins and ends. Ending tags are forward slashes immediately followed by the names of their starting tags and nothing more. Using Gibberish 1 as an example, the </letters> tag is the ending tag.
Take a gander at the following Google Tag Manager (GTM) installation code template.
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXXX’);</script>
<!– End Google Tag Manager –>Gibberish 2
If the <script> and </script> look like starting and ending tags to you, it’s because they are! All GTM installation codes are HTML elements with a function between the tags[2]. Pixels for third parties that you may implement in GTM are also HTML elements. Take the Meta (Facebook) base code as an example:
<!-- Facebook Pixel Code -->
<noscript>
<img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id={your-pixel-id-goes-here}&ev=PageView&noscript=1"/>
</noscript>
<!-- End Facebook Pixel Code -->Gibberish 3
This pixel is simply one “normal” element and another element nested inside a third[3]—more on the significance of nesting later.
HTML Attributes
HTML attributes are a big reason we can do what we do within GTM. HTML attributes are [parameter]=[value] pairs inside a starting tag right after said tag’s name. In Gibberish 3, this includes height=” 1″, width=” 1″, and style=” display:none”, as well as “src” with its accompanying URL I don’t feel like copy-pasting.
Attributes do lots of stuff, but the thing we care about most is they give us data. Browsers know that you clicked on/viewed a specific element, clicked a button, submitted a form, or viewed a particular content category thanks to attributes.
HTML Structure: The Lego AT-AT[4]
Every web page ever has the same basic structure:
<!DOCTYPE HTML>
<html>
<head>
<title>Gibberish</title>
<tag something=”gibberish”>…</tag>
<tag2 something2=”gibberish2”>
<tag2a something2a=”gibberish2a”>…</tag2a>
</tag2>
</head>
<body>
<tag3 something3=”gibberish3”>
<tag3a something3a=”gibberish3a”>…</tag3a>
<tag3b something3b=”gibberish3b”>…</tag3b>
<tag3c something3c=”gibberish3c”>…</tag3c>
</tag3>
<tag4 something4=”gibberish4”>
<tag4a something4a=”gibberish4a”>…</tag4a>
</tag4>
<tag5 something5=”gibberish5”>
<tag5a something5a=”gibberish5a”>…</tag5a>
<tag5b something5b=”gibberish5b”>…</tag5b>
</tag5>
</body>
</html>Gibberish 4
Every page has an HTML wrapper, a head container (not a header), a body container, and declares that the page is an HTML document. A wrapper is a special kind of element. The difference between a wrapper and a standard element doesn’t matter to us. We’re only using the term “wrapper” here for familiarity’s sake. It’ll help the next time you speak with a web developer. All the page’s elements are in either the head or body containers. Sites using incorrectly installed tags and/or plugins with unique installation requirements are the only exceptions.
HTML Containers
HTML containers are simply elements that contain one or more other elements. Sometimes the starting tag of the container will specify it as such using an attribute so web developers can utilize additional functionality. Other times it won’t, but it is still considered a container.[5]
Head Container
The head container holds all the page’s metadata including the page’s title, gtags from Google, third-party pixels, links to external assets, page formatting, keywords for search engines, and more. It always comes before the body, contains a page title, and is where gtags are installed (when done correctly). Most of the elements in the head are behind the scenes and not visible on the page.
Body Container
The vast majority of interactable/visible page elements live in the body of the page. Every form field, link, button, paragraph, picture, video, etc. has an element dedicated to it. This means a single contact form is frequently made of 5+ elements; one each for the form’s name, the user’s first and last names, and the user’s phone and email info. Instead of throwing all the elements into the body section and calling it a day, developers group related elements under a general tag. This process is called nesting.
While organization is essential, developers nest elements for additional reasons, too. The benefits analysts utilize the most is nesting establishes relationships between elements. Let’s use part of Gibberish 4 as an example:
<body>
<tag3 something3=”gibberish3”>
<tag3a something3a=”gibberish3a”>…</tag3a>
<tag3b something3b=”gibberish3b”>…</tag3b>
<tag3c something3c=”gibberish3c”>…</tag3c>
</tag3>
<tag4 something4=”gibberish4”>
<tag4a something4a=”gibberish4a”>…</tag4a>
</tag4>
</body>Relationships between HTML elements have the same names and structure as a family tree, so we can rearrange this like so:
The relationships between elements have the same definitions as in a family tree. Body is parent to tag 3 and grandparent to tag 3a. Tag 4 is a child to body, tag 3’s sibling, and parent to tag 4a. Tags 3a, 3b, and 3c are all siblings, children of tag 3, grandchildren of body, and cousins of tag 4a.
Getting Your Data’s Worth
All web analytics tools utilize attributes, HTML relationships, and more to understand what’s going on in the browser. Neither Google nor the browser has a way of knowing how users interact with a page without attributes. Computers and servers only understand what we tell them. If all we write in the HTML document is that a specific object is a button, the browser won’t know the color, text, name, link, or anything else about the button.
That’s why attributes are so important. Attributes contain all this information the browser needs to determine how the button should appear to the user and what should happen if clicked. When a site is tagged correctly, the browser plays telephone with Google’s data layer and the site’s servers. The contents of this telephone game depend upon the attributes of the element with which the user interacts.
That’s it For Now!
Woah, you made it through all that? You’re awesome! As thanks, here’s a special note my cat wrote just for you:
1qa2sw3tfgvs
As you can tell from how little content is on this site, I’m new to this whole blogging thing. I’d appreciate feedback on how helpful this is/isn’t, any questions you have, and ideas for future blog topics. Not because the extra engagement may make the algorithms-that-be think my content is better (although it might), but because I need the info. Thanks for taking the time to read all this, and, as always, stay awesome!
[1] For anyone who doesn’t know, “black box” is an actual development term. It refers to chunks of code where you see what goes in, know what comes out, and that’s it. You don’t know how or why it works, and it doesn’t matter to you.
[2] The grey tags in Gibberish 2 that start with “<!–” and end with “–>” are comment tags. All they do is provide human-readable notes to help us understand what all the elements between them are and do. You will not see end tags for comments.
[3] Notice that the <img> tag doesn’t have its </img> counterpart. Since there is no function or other content outside the starting tag, it can simply mark its end with the backslash immediately before the “>”.
[4] Rhymes with “hat-hat”, ya newbs.
[5] To some extent, the differences between an element, tag, wrapper, and container are simply semantics. While important when developing a site, GTM implementation peoples typically call them all “tags”.
One Response