Tracking Folwell Component Engagements with Google Tag Manager

To help with adding Google Tag Manager (GTM) tracking to your website, the Measurement & Analytics team has created tags, triggers and variables needed to measure users’ engagement with various out-of-the-box Folwell components (i.e. the default Folwell components used without any customization) on your sites. Remember, data tracking only starts from the date that you add the tracking. Adding the tracking now will ensure that you have the data when you need it.

The following tag setups can be added to your Google Tag Manager by either:

  • manually adding the tags, triggers and variables yourself, or
  • importing a “recipe”, a JSON file containing the tag setup(s). Note: Because this method can be more complex to ensure your existing tracking is not affected instructions for utilizing this will be provided at a later date.

For your convenience we have provided the individual component setups below.

Before you start, contact your MarCom lead to ensure you have access to your site's GTM container.

In the steps below, text within the {{ }} can be selected from the list of built-in video variables by clicking on the lego/battery with a "+" icon.  

Folwell Component Tracking Setups

Expand all

Accordion Clicks

Why track accordion clicks?

Engagement with your accordions informs content strategy decisions about use of accordions for various subject matter, accordion title text, etc. (Folwell Accordions page)

How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_event_accordion_visibility
      1. Trigger Type = Click - All Elements
      2. This trigger fires on = Some Classes
      3. Fire this trigger when an Event occurs and all of these conditions are true
        1. {{Click Element}} matches CSS selector .ui-accordion-header.ui-accordion-header-collapsed, .ui-accordion-header.ui-accordion-header-collapsed *
  2. Add Tag:
    1. Tag Name = ga_open_accordion
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = accordion_click
    5. Event Parameters
      1. Event Settings Variable = None
      2. Event Parameter = page_path, Value = {{Page Path}}
      3. Event Parameter = accordion_title, Value = {{Click Text}}
    6. Trigger:
      1. ga_event_accordion_visibility

Button Clicks

Why track button clicks?

Engagement with your buttons informs content strategy decisions about button text, placement, and styling of the button. (Folwell button page)

How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_click_btn_trigger
      1. Trigger Type = Click - Just Links
      2. This trigger fires on = Some Link Clicks
      3. Fire this trigger when an Event occurs and all of these conditions are true = Click Classes contains btn
    2. Trigger Name = ga_click_btn_group_trigger
      1. Trigger Type = Click - Just Links
      2. This trigger fires on = Some Link Clicks
      3. Fire this trigger when an Event occurs and all of these conditions are true = Click Classes contains fl-button-group__button
  2. Add Tag:
    1. Tag Name = ga_click_button
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = btn_click
    5. Event Parameters
      1. Event Settings Variable = None
      2. Event Parameter = link_url, Value = {{Click URL}}
      3. Event Parameter = link_text, Value = {{Click Text}}
      4. Event parameter = page_location, Value = {{Page Hostname}}{{Page Path}}
      5. Event parameter = button_type, Value = {{Click Classes}}
        1. Note: button_type is a new parameter and will need to beadded to your GA4 container's custom dimensions. Contact [email protected] for help setting this up.
    6. Trigger:
      1. ga_click_btn_trigger
      2. ga_click_btn_group_trigger

Emphasis Link Clicks

Why track emphasis link clicks?

Tracking data can inform how the additional emphasis styling affects user behavior. (Folwell Links page)

How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_click_emphasis_link_trigger
      1. Trigger Type = Click - Just Links
      2. Selection Method = CSS Selector
      3. This trigger fires on = Some Link Clicks
      4. Fire this trigger when an Event occurs and all of these conditions are true
        1. {{Click Classes}} contains emphasis
  2. Add Tag:
    1. Tag Name = ga_click_emphasis_link
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = emphasis_link_click
    5. Event Parameters
      1. Event Parameter = link_url, Value = {{Click URL}}
      2. Event Parameter = link_text, Value = {{Click Text}}
      3. Event Parameter = page_path, Value = {{Page Hostname}}{{Page Path}}
    6. Triggers
      1. Firing Triggers = ga_click_emphasis_link_trigger
      2. Triggers Exceptions = ga_click_btn_trigger

Give Button Clicks

Why track Give button clicks?

Tracking data informs your website’s fundraising strategies. (Folwell Buttons page)

How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_click_btn_trigger
      1. Trigger Name = ga_click_give_btn_trigger
      2. Trigger Type = Click - Just Links
      3. This trigger fires on = Some Link Clicks
      4. Fire this trigger when an Event occurs and all of these conditions are true = Click Classes contains btn-give
  2. Add Tag:
    1. Tag Name = ga_click_give_button
    2. Tag Type - Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = give_btn_click
    5. Event Parameters
      1. Event Parameter = link_url, Value = {{Click URL}}
      2. Event Parameter = link_text, Value = {{Click Text}}
      3. Event Parameter = page_path, Value = {{Page Hostname}}{{Page Path}}
    6. Triggers
      1. Firing Triggers = ga_click_give_btn_trigger

Hyperlink Clicks

Why track hyperlink clicks?

Tracking data informs content strategy about link text and placement. (Folwell Links page)

  1. Add Trigger(s):
    1. Trigger Name = ga_click_hyperlink_trigger
    2. Trigger Type = Click - Just Links
    3. This trigger fires on = Some Link Clicks
    4. Fire this trigger when an Event occurs and all of these conditions are true
      1. {{Click URL}} matches RegEx (ignore case) ^http
      2. {{Click Classes} does not contain #
      3. {{Click Classes}} does not contain sf-depth
      4. {{Click Classes}} does not contain btn
      5. {{Click Classes}} does not contain fl-button-group_button
      6. {{Click Element}} does not contain main-menu
      7. {{Click Element}} does not equal marketing-page__ig-link
  2. Add Tag:
    1. Tag Name = ga_click_hyperlink
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = hyperlink_click
    5. Event Parameters
      1. Event Parameter = link_url, Value = {{Click URL}}
      2. Event Parameter = link_text, Value = {{Click Text}}
      3. Event Parameter = page_location, Value = {{Page Path}}
    6. Triggering
      1. Firing Triggers = ga_click_hyperlink_trigger

Main Navigation Clicks

Why track main navigation clicks?

Tracking data informs content strategy about users navigating your website. (Folwell horizontal dropdown menu page)

How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_click_mobile_nav_trigger
      1. Trigger Type = Click - Just Links
      2. This trigger fires on = Some Link Clicks
      3. Fire this trigger when an Event occurs and all of these conditions are true
        1. {{Click Classes}} matches RegEx (ignore case) toggle responsive-menu-toggle-icon|mm-listitem__text
      4. Trigger Name = ga_click_nav_trigger
        1. Trigger Type = Click -Just Links
        2. This trigger fires on = Som Link Clicks
        3. Fire this trigger when an Event occurs and all of these conditions are true
          1. {{Click Classes}} contains sf-depth-
  2. Add Tag:
    1. Tag Name = ga_click_nav
    2. Tag Type = Google Analytics - GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = nav_click
    5. Event Parameters
      1. Event Parameter = nav_item_url, Value = {{Click URL}}
      2. Event Parameter = nav_item_name, Value = {{Click Text}}
    6. Triggering
      1. Firing Triggers
        1. ga_click_mobile_nav_trigger
        2. ga_click_nav_trigger

Scroll Depth

Why track scroll depth?

Enhanced measurements with GA4 offers scroll depth tracking data when a visitor scrolls to at least 90% of the web page.

Tracking scroll depth with Google Tag Manager provides data for additional scroll depths, we recommend you track scroll depths of 25%, 50%, 75%, and 90%. Do not track 100% scroll depth as some pages have content that prevents a user from scrolling to 100%. 

Note: Remember to turn off scroll depth tracking under GA4’s enhanced measurements to avoid duplicate tracking.

How to set up GTM tracking

  1. Add Variable(s):
    1. {{Scroll Depth Threshold}} - a built-in variable that holds the numeric value of the scroll depth a user has reached.
  2. Add Trigger(s):
    1. Trigger Name = ga_scroll_depth_trigger
    2. Trigger Type = Scroll Depth
    3. Vertical Scroll Depths = checked box
    4. Percentages  = 25,50,75,90
    5. Enable this trigger on = Window Load (gtm.load)
    6. This trigger fires on = All Pages
  3. Add Tag:
    1. Tag Name = ga_scroll_depth_tag
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = page_scroll_depth
    5. Event Parameters
      1. Event Parameter = percent_scrolled, Value = {{Scroll Depth Threshold}}
      2. Event Parameter = scroll_count, Value = 1

Slideshow Clicks

Why track slideshow clicks?

A slideshow should entice a user to take ann action or otherwise become informed about a website goal or mission. (Folwell Slideshow page)

 How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_click_slideshow_arrow
      1. Trigger Type = Click - All Elements
      2. This trigger fires on = Some Clicks
      3. Fire this trigger when an Event occurs and all of these conditions are true
        1. {{Click Classes}} contains slick-arrow
    2. Trigger Name = ga_click_slideshow_button
      1. Trigger Type = Click - All Elements
      2. This trigger fires on = Some Clicks
      3. Fire this trigger when an Event occurs and all of these conditions are true
        1. {{Click ID}} contains slick-slide-control
  2. Add Tags:
    1. Tag Name = ga_click_slideshow_arrow
      1. Tag Type = Google Analytics: GA4 Event
      2. Measurement ID = your GA4 data stream ID, starts with a “G”
      3. Event Name = slideshow_arrow_clicks
      4. Event Parameters
        1. Event Parameter = page_location, Value = {{Page Path}}
      5. Triggering
        1. Firing Triggers
          1. ga_click_slideshow _arrow
    2. Tag Name = ga_click_slideshow_button
      1. Tag Type = Google Analytics: GA4 Event
      2. Measurement ID = your GA4 data stream ID, starts with a “G”
      3. Event Name = slideshow_btn_clicks
      4. Event Parameters
        1. Event Parameter = page_location, value = {{Page Path}}
      5. Triggering
        1. Firing Triggers
          1. ga_click_slideshow_button

Tabs Clicks

Why track tabs clicks?

Tracking data informs content strategy about visitors’ engagement with Tabs components. (Folwell Tabs page)

How to set up GTM tracking

  1. Add Trigger(s):
    1. Trigger Name = ga_tab_selected_trigger
      1. Trigger Type = Click - Just Links
      2. This trigger fires on = Some Link Clicks
      3. Fire this trigger when an Event occurs and all of these conditions are true
        1. {{Click Classes} contains tabs-trigger js-tabs-trigger is-selected
  2. Add Tag:
    1. Tag Name = ga_tab_selected_tag
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = tab_selected
    5. Event Parameters
      1. Event Parameter = link_text, Value = {{Click Text}}
      2. Event Parameter = page_location, Value = {{Page Hostname}}{{Page Path}}
    6. Triggering
      1. Firing Triggers
        1. ga_tab_selected_trigger

Video Engagement

Why track video engagements?

Tracking data informs content strategy about visitors’ engagement with videos embedded on your web pages.

How to set up GTM tracking

  1. Add Trigger:
    1. Trigger Name = ga_video_engagement
      1. Trigger Type = YouTube Video (You may need to scroll through the built-in triggers to locate this trigger type)
      2. Enable Start, Complete, Progress
        1. Check the Start, Complete, and Progress boxes.
          1. For Progress, select Percentages and enter 10,25,50,75,90
      3. Check "Add JavaScript API support to all YouTube videos"
      4. Enable this trigger on DOM Ready (gtm.dom)
      5. This trigger fires on "All Videos"
  2. Add Tag:
    1. Tag Name = ga_event_video-tracking
    2. Tag Type = Google Analytics: GA4 Event
    3. Measurement ID = your GA4 data stream ID, starts with a “G”
    4. Event Name = video_{{Video Status}}
    5. Event Parameters
      1. Event Settings Variable = None
      2. Event Parameter = video_current_time, Value = {{Video Current Time}}
      3. Event Parameter = video_duration, Value = {{Video Duration}}
      4. Event Parameter = video_percent, Value = {{Video Percent}}
      5. Event Parameter = video_provider, Value = {{Video Provider}}
      6. Event Parameter = video_title, Value = {{Video Title}}
      7. Event Parameter = video_url, Value = {{Video URL}}
    6. Triggering
      1. Firing Triggers
        1. ga_video_engagement

Previewing and Publishing Your Tag Setup

Before you make your tag active, select “Preview” next to the blue Submit button on the right. Preview allows you to test the tag’s performance before you make it active on your site. 

You want to verify that the tag is tracking exactly what you want and not any other events. For example: If you want to track Give button clicks, test your Give button during preview, but also track other button and hyperlink clicks to verify they are not counting as a Give button event.

Once you are certain the tags are firing as expected, click on the Publish button to make the tags active. Name the version in such a way that you know what was modified.

A few days after your tags have been published, we recommend checking your events in GA4 or Looker Studio to verify all events are showing up as expected.