Merge pull request #10 from companieshouse/IDVA5-1075-capture-analyti…

…cs-for-eng-and-wel-toggle IDVA5-1075-Capture analytics for the English and Welsh toggle
companieshouse · Aug 7, 2024 · 5787fca · 5787fca
2 parents cf46f69 + 973be2f
commit 5787fca
Showing 1 changed file with 37 additions and 15 deletions.
diff --git a/templates/locales-banner.njk b/templates/locales-banner.njk
@@ -3,29 +3,51 @@ template to be reused in all the services to display the locales menu/banner.
 It receives:
 - languageEnabled: to keep all hidden if feature-flag is off
 - languages: array of pairs {.Name (i.e. 'English')   .IsoCode (i.e. 'en') }
-- currentUrl: self-url. It's used to resend to the backend the same request wih the proper
+- currentUrl: self-url. It's used to resend to the backend the same request with the proper
               query parameter ("lang=..") set
               (i.e. https://.....<self>....../?lang=cy)
 #}
 
-<div class="govuk-width-container ">
+<div class="govuk-width-container">
     <div class="govuk-grid-column-full no-padd">
         <nav class="govuk-language-select" aria-label="Language switcher">
             <ul class="govuk-language-select__list">
-            {% if languageEnabled %}
-               {% for l in languages %}
-                 <li class="govuk-language-select__list-item">
-                 {% if lang and lang == l.IsoCode %}
-                   <span class="govuk-body-s govuk-!-margin-2">{{l.Name}}</span>
-                 {% else %}
-                   <a href="{{lang2url.addLangToUrl(currentUrl, l.IsoCode, true)}}" lang={{l.IsoCode}} rel="alternate" class="govuk-link govuk-!-margin-2" >
-                      <span>{{l.Name}}</span>
-                   </a>
-                 {% endif %}
-                 </li>
-               {% endfor %}
-            {% endif %}
+                {% if languageEnabled %}
+                    {% for l in languages %}
+                        <li class="govuk-language-select__list-item">
+                            {% if lang and lang == l.IsoCode %}
+                                <span class="govuk-body-s govuk-!-margin-2">{{ l.Name }}</span>
+                            {% else %}
+                                <a href="{{ lang2url.addLangToUrl(currentUrl, l.IsoCode, true) }}" lang="{{ l.IsoCode }}" rel="alternate" class="govuk-link govuk-!-margin-2 language-link">
+                                    <span>{{ l.Name }}</span>
+                                </a>
+                            {% endif %}
+                        </li>
+                    {% endfor %}
+                {% endif %}
             </ul>
         </nav>
     </div>
 </div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function() {
+    const languageLinks = document.querySelectorAll('.language-link');
+    
+    languageLinks.forEach(link => {
+      link.addEventListener('click', function(event) {
+        const language = this.getAttribute('lang');
+        trackLanguageChange(language);
+      });
+    });
+  });
+
+  function trackLanguageChange(language) {
+    const pageTitle = document.title;
+    if (typeof _paq !== 'undefined') {
+      _paq.push(['trackEvent', pageTitle, 'Language Change', language]);
+    } else {
+      console.log('Matomo not enabled, language change: ' + language);
+    }
+  }
+</script>