Skip to content

About site button tracking

Created by: marybelzer

This request came in from Erica Freckleton in Marketing, who handles tracking + analytics. We recently made changes to the sign-up flow on about.sourcegraph.com and need to be able to track user behavior. Below is a suggestion on how we tackle this - but either way, we need to establish some standards of how we implement tracking like this. Whoever takes this, I would recommend reaching out to Erica to work with her directly on the implementation as she'll be an ongoing partner for us on these types of things!

I'd have your devs add something like "cta-btn" to the name on all the action buttons you want to track. That way we could we create a simple trigger in GTM that just looks for {{Click Classes}} contains "cta-btn"... and we wouldn't need all that extra logic involving the {{Click Text}}, {{Page Path/URL}}, etc.

In addition, you could include some other info such as the style or location on the page. If we embed that in an HTML data attribute ("data-"), we could use a data layer variable to parse it out.

For example, here's what the HTML code looks like for the "Continue with GitHub" button right now:

<a href="https://sourcegraph.com/.auth/github/login?pc=https%3A%2F%2Fgithub.com%2F%3A%3Ae917b2b7fa9040e1edd4&amp;redirect=%2Fwelcome&amp;_ga=2.158632569.2108224894.1643087719-145800987.1643087719" class="btn github custom-btn"><img src="../external-logos/GitHub-Mark-Light-32px.png" width="30" height="30" class="mr-3">Continue with GitHub</a>

You could add the following (see bold):

<a href="https://sourcegraph.com/.auth/github/login?pc=https%3A%2F%2Fgithub.com%2F%3A%3Ae917b2b7fa9040e1edd4&amp;redirect=%2Fwelcome&amp;_ga=2.158632569.2108224894.1643087719-145800987.1643087719" class="btn github custom-btn cta-btn"><img src="../external-logos/GitHub-Mark-Light-32px.png" width="30" height="30" class="mr-3" data-button-style="1" data-button-location="2">Continue with GitHub</a>

Note: Populating numbers for the data-button-style and data-button-location would keep things a little cleaner in the code. However, you'd need look-up tables to translate the values into something meaningful. For example:

data-button-style: 1 = White font on a black background 2 = White font on purple background

data-button-location: 1 = Header 2 = Body 3 = Footer

(or you could even be more granular/specific for #2)

Alternatively, you could embed the descriptions themselves (rather than codes). But you'd need to keep the text pretty short/concise so that may not work too well if there's a lot of info you need to cram in.

—

I like his approach with populating numbers for the data-button values to keep things clean, so long as we can keep a record of what aligns with what value.