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

Implement data attributes on Navigation Bar

    XporterXMLWordPrintable

    Details

    • Type: Task
    • Status: CLOSED
    • Priority: Should have
    • Resolution: Released
    • Affects Version/s: None
    • Fix Version/s: 2.31.0
    • Labels:
      None
    • Story Points:
      2
    • Sprint:
      Sprint #131, Sprint #132, Sprint #133
    • Section:
      Analytics, Search
    • P4 site:
      All sites
    • Track:
      Development
    • P4 Test Environment:
      phobos
    • Repositories:
      planet4-master-theme

      Description

      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 Pieter Vincent and Sagar Deshmukh, 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
        Menu Navigation  Greenpeace Logo
        Act
        Explore
        Donate
        Open Menu
        Close Menu
        Open Country Selector
        Close Country Selector
        Search
        [pageType]

       

      Here are the screenshot linking the design elements (both for mobile and desktop) with the data-ga-action standard value:

      • Desktop: 
      • Mobile: 
         

        
       More Information:

      To view all data attributes standards 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

        Gliffy Diagrams

          Attachments

          1. p4_dataLayer_events_navigation_desktop.jpg
            p4_dataLayer_events_navigation_desktop.jpg
            261 kB
          2. p4_dataLayer_events_navigation_mobile.jpg
            p4_dataLayer_events_navigation_mobile.jpg
            210 kB
          3. p4_openmenu.jpg
            p4_openmenu.jpg
            129 kB
          4. p4_opensearch.jpg
            p4_opensearch.jpg
            102 kB
          5. p4_searchicon.jpg
            p4_searchicon.jpg
            148 kB
          6. p4_sitelogo.jpg
            p4_sitelogo.jpg
            106 kB

            Issue Links

              Activity

                People

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

                  Dates

                  Created:
                  Updated:
                  Resolved: