Uploaded image for project: 'Planet4'
  1. Planet4
  2. PLANET-4969

Implement data attributes on Search Page

XMLWordPrintable

    • Icon: Task Task
    • Resolution: Released
    • Icon: Should have Should have
    • 2.31.1
    • None

      Context:

      Last year we started tracking a few click events on selected Planet 4 sites via Google Tag Manager, often based on the element's IDs or classes. This usually demands an extensive custom setup in Tag Manager and is often less accurate. 

      Tracking Methodology (updated)

      As suggested by pvincent and sdeshmuk, we can work with data-* attributes instead of dataLayer events. This should facilitate the implementation while also allowing some more flexibility when setting up the events tags in Google Tag Manager. 

      The idea is to implement a set of new data attributes with standard values. These will be used later to trigger events and define its category, action and label.

      Task: 

      • Implement data-attributes on elements:
        • data-ga-category
        • data-ga-action
        • data-ga-label 
      • Implement data-attributes with the following standard values: 
        data-ga-category data-ga-action data-ga-label
        Search Page Issue Filter
        Tag Filter
        Category Filter
        Content Filter
        [filter name]
        Search Page  Load More Button [n. results displayed] 
        Search Page  Sort By Filter Most Relevant
        Most Recent
        Search Page  Search Button n/a
        Search Results Title 
        Call to Action
        Image
        Navigation Tag
        Category Tag
        Post
        Campaign
        Document
        Take Action
        Page 

       

      Here's a screenshot linking the design elements with the data-ga-action standard value:

        
       More Information:

      • [filter name] = name of the issue / tag / category / content checkbox that was clicked by the user
      • [n of search results] = number of search results when the user clicked on the Load More button 

      To view all events standards and data-attributes structure proposed: "P4 Events Standards - 2020 Review" 

       

      Next steps:

      1. Julia should create the Google Tag Manager setup in all P4-NRO's containers.  
      2. Investigate and communicate with NROs using child themes to apply the same data attributes

        1. example_sortby.jpg
          125 kB
          Julia Marubayashi
        2. gtm_extract_data-attributes.jpg
          740 kB
          Julia Marubayashi
        3. p4_dataLayer_events_search_page.jpg
          618 kB
          Julia Marubayashi

            sdeshmuk Sagar Deshmukh
            jmarubay Julia Marubayashi
            Julia Marubayashi Julia Marubayashi
            Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

              Created:
              Updated:
              Resolved: