Add Google Analytics (#52)

ONSdigital · Aug 14, 2024 · 54cdb42 · 54cdb42
1 parent b5609be
commit 54cdb42
Show file tree

Hide file tree

Showing 15 changed files with 691 additions and 378 deletions.
diff --git a/config.py b/config.py
@@ -12,6 +12,7 @@ class BaseConfig:
 
     SECRET_KEY = os.getenv("SECRET_KEY")
     SESSION_COOKIE_SECURE = bool(strtobool(os.getenv('SESSION_COOKIE_SECURE', 'True')))
+    GOOGLE_TAG_ID = os.getenv("GOOGLE_TAG_ID")
 
     # Account service url is a link back to our service that we send to eq as part of the token
     ACCOUNT_SERVICE_URL = f"{DOMAIN_URL_PROTOCOL}{DOMAIN_URL}"
@@ -30,6 +31,7 @@ class DevelopmentConfig(BaseConfig):
 
     SECRET_KEY = os.getenv('SECRET_KEY', b'_5#y2L"F4Q8z\n\xec]/')
     SESSION_COOKIE_SECURE = bool(strtobool(os.getenv('SESSION_COOKIE_SECURE', 'False')))
+    GOOGLE_TAG_ID = os.getenv("GOOGLE_TAG_ID", "G-XXXXXXXXXX")
 
     ACCOUNT_SERVICE_URL = f"{DOMAIN_URL_PROTOCOL}{DOMAIN_URL}"
     RH_SVC_URL = os.getenv("RH_SVC_URL", "http://localhost:8071")

diff --git a/rh_ui/security.py b/rh_ui/security.py
@@ -12,10 +12,12 @@
     'script-src': [
         "'self'",
         'https://cdn.ons.gov.uk',
+        'https://www.googletagmanager.com',
     ],
     'connect-src': [
         "'self'",
         'https://cdn.ons.gov.uk',
+        'https://*.google-analytics.com/'
     ],
     'img-src': [
         "'self'",

diff --git a/rh_ui/templates/base.html b/rh_ui/templates/base.html
@@ -1,25 +1,50 @@
 {%- extends 'layout/_template.njk' -%}
 
 
-{%- block preHeader -%}
-{%- autoescape false -%}
+{% block head %}
+    {% set g_tag_id = config.GOOGLE_TAG_ID %}
+    {% if g_tag_id %}
+        {% set script_src_url = "https://www.googletagmanager.com/gtag/js?id=" + g_tag_id %}
+
+        <!-- Google tag (gtag.js) -->
+        <script nonce="{{ csp_nonce() }}" async src={{ script_src_url }}></script>
+        <script nonce="{{ csp_nonce() }}">
+        // NOTE!!!
+        // We currently don't have an option to turn this cookie on/off on the cookies page in rh
+        // It is set to false by default and can only be set to true
+        // When the participant accepts all cookies on the cookies banner 
+        // (and can't be swithced back to false unless the user clear their cookies)
+        var allowTrackingCookies = /^(.*)?\s*'usage':true\s*[^;]+(.*)?$/;
+
+        if (document.cookie.match(allowTrackingCookies)) {
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', "{{ g_tag_id }}");
+        }
+        </script>
+    {% endif %}
+{% endblock%}
 
-{% set cookiesPageURL = url_for('i18n.info_pages_bp.cookies') %}
 
-{%- from 'components/cookies-banner/_macro.njk' import onsCookiesBanner -%}
-{{ onsCookiesBanner({
-        'lang': g.lang_code,
-        'statementTitle': _('Cookies'),
-        'serviceName': '',
-        'settingsLinkTextURL': cookiesPageURL,
-        'statementText': _("To collect information about how you use this website, we use%(open_cookies_link)s cookies.%(close_link)s</br>
-                        This information helps us improve our services and make sure that the website works as well as possible.",
-                        open_cookies_link='<a href="%s">' % cookiesPageURL, close_link='</a>'),
-        'preferencesText':  _("You can %(open_cookies_link)s change your cookie preferences%(close_link)s at any time.",open_cookies_link='<a href="%s">' % cookiesPageURL, close_link='</a>')
-        }) }}
-{% endautoescape %}
+{%- block preHeader -%}
+    {%- autoescape false -%}
+        {% set cookiesPageURL = url_for('i18n.info_pages_bp.cookies') %}
+        {%- from 'components/cookies-banner/_macro.njk' import onsCookiesBanner -%}
+        {{ onsCookiesBanner({
+                'lang': g.lang_code,
+                'statementTitle': _('Cookies'),
+                'serviceName': '',
+                'settingsLinkTextURL': cookiesPageURL,
+                'statementText': _("To collect information about how you use this website, we use%(open_cookies_link)s cookies.%(close_link)s</br>
+                                This information helps us improve our services and make sure that the website works as well as possible.",
+                                open_cookies_link='<a href="%s">' % cookiesPageURL, close_link='</a>'),
+                'preferencesText':  _("You can %(open_cookies_link)s change your cookie preferences%(close_link)s at any time.",open_cookies_link='<a href="%s">' % cookiesPageURL, close_link='</a>')
+                }) }}
+    {% endautoescape %}
 {%- endblock -%}
 
+
 {%- set language = { 'languages':
     [
         {
@@ -37,6 +62,7 @@
     ]
 }-%}
 
+
 {%- set footer_content = {
     'newTabWarning': _('The following links open in a new tab'),
     'crest': true,
@@ -80,6 +106,7 @@
     }
 }-%}
 
+
 {%- set pageConfig = {
     'title': page_title_value,
     'header': {
@@ -93,9 +120,3 @@
     'cspNonce': csp_nonce(),
     'meta' : {}
 } -%}
-
-
-{%- block bodyStart -%}
-
-
-{%- endblock -%}
diff --git a/rh_ui/templates/error_pages/404.html b/rh_ui/templates/error_pages/404.html
@@ -4,15 +4,21 @@
 
 {%- block main -%}
 
-<h1>{{ _('Page not found') }}</h1>
+        <h1
+        data-ga= "error", 
+        data-ga-category= "server-error", 
+        data-ga-label= "404_page_not_pound" 
+        >
+        {{ _('Page not found') }}
+        </h1>
 
-<p>{{ _('If you entered a web address, check it is correct.') }}</p>
-<p>{{ _('If you pasted the web address, check you copied the whole address.') }}</p>
+        <p>{{ _('If you entered a web address, check it is correct.') }}</p>
+        <p>{{ _('If you pasted the web address, check you copied the whole address.') }}</p>
 
-{%- autoescape false -%}
-{% set contact_us_link = _('https://www.ons.gov.uk/aboutus/contactus/surveyenquiries') %}
-<p>{{ _('If the web address is correct or you selected a link or button, %(open)scontact us%(close)s for more help.', open='<a href="%s">'
-        % contact_us_link, close='</a>')|safe }}</p>
-{%- endautoescape -%}
+        {%- autoescape false -%}
+                {% set contact_us_link = _('https://www.ons.gov.uk/aboutus/contactus/surveyenquiries') %}
+                <p>{{ _('If the web address is correct or you selected a link or button, %(open)scontact us%(close)s for more help.', open='<a href="%s">'
+                        % contact_us_link, close='</a>')|safe }}</p>
+        {%- endautoescape -%}
 
 {%- endblock -%}
diff --git a/rh_ui/templates/error_pages/error.html b/rh_ui/templates/error_pages/error.html
@@ -3,16 +3,21 @@
 {% set page_title_value = _('ONS Surveys') %}
 
 {%- block main -%}
+
+    <h1
+    data-ga= "error", 
+    data-ga-category= "server-error", 
+    data-ga-label= "500_internal_server_error" 
+    >
+        {{ _('Sorry, something went wrong') }}
+    </h1>
 
-<h1 data-ga="error" data-ga-category="error" data-ga-action="error-message-shown" data-ga-label="system-error">
-    {{ _('Sorry, something went wrong') }}
-</h1>
+    <p>{{ _('We are experiencing some technical problems.') }}</p>
 
-<p>{{ _('We are experiencing some technical problems.') }}</p>
-
-{%- autoescape false -%}
-{% set contact_us_link = _('https://www.ons.gov.uk/aboutus/contactus/surveyenquiries') %}
-<p>{{ _('Please try again later, or %(open)scontact us%(close)s if the problem continues.', open='<a href="%s">' % contact_us_link, close='</a>')|safe }}</p>
-{%- endautoescape -%}
+    {%- autoescape false -%}
+        {% set contact_us_link = _('https://www.ons.gov.uk/aboutus/contactus/surveyenquiries') %}
+        <p>{{ _('Please try again later, or %(open)scontact us%(close)s if the problem continues.',
+         open='<a href="%s">' % contact_us_link, close='</a>')|safe }}</p>
+    {%- endautoescape -%}
 
 {%- endblock main -%}
diff --git a/rh_ui/templates/info_pages/cookies.html b/rh_ui/templates/info_pages/cookies.html
@@ -53,8 +53,115 @@ <h2>{{ _('Cookie settings') }}</h2>
             }) }}
 </div>
 <div class="ons-u-db-no-js_disabled">
-    <p>{{ _("We use two types of cookie. You can choose which cookies you're happy for us to use.") }}</p>
+    <p>{{ _("We use three types of cookie. You can choose which cookies you're happy for us to use.") }}</p>
     <form data-module="cookie-settings">
+        <h3>{{ _("Cookies that measure website use") }}</h3>
+        <p>
+            {{ _("We use Google Analytics to measure how you use the website so we can improve it based on user needs. Google Analytics
+            sets cookies that store anonymised information about:")}}
+        </p>
+        <ul>
+            <li>{{_("how you got to the site")}}</li>
+            <li>{{_("the pages you visit on ons.gov.uk and how long you spend on each page")}}</li>
+            <li>{{_("what you click on while you're visiting the site")}}</li>
+        </ul>
+        {%
+            call onsDetails({
+                "id": "cookies-measure-website-use-details",
+                "classes": "ons-u-mb-s",
+                "title": _("Learn more about these Google Analytics cookies"),
+                "titleTag": 'h4',
+                "button": {
+                    "close": _("Hide this")
+                }
+            })
+        %}
+            {{
+                onsTable({
+                    "ths": [
+                        {
+                            "value": _("Name")
+                        },
+                        {
+                            "value": _("Purpose")
+                        },
+                        {
+                            "value": _("Expires")
+                        }
+                    ],
+                    "trs": [
+                        {
+                            "tds": [
+                                {
+                                    "value": "<code>_ga</code>"
+                                },
+                                {
+                                    "value": _('This helps us count how many people visit ons.gov.uk by tracking if you’ve visited before')
+                                },
+                                {
+                                    "value": _("2 years")
+                                }
+                            ]
+                        },
+                        {
+                            "tds": [
+                                {
+                                    "value": "<code>_gid</code>"
+                                },
+                                {
+                                    "value": _('This helps us count how many people visit ons.gov.uk by tracking if you’ve visited before')
+                                },
+                                {
+                                    "value": _("24 hours")
+                                }
+                            ]
+                        },
+                        {
+                            "tds": [
+                                {
+                                    "value": "<code>_gat</code>"
+                                },
+                                {
+                                    "value": _('Used to manage the rate at which page view requests are made')
+                                },
+                                {
+                                    "value": _("10 minutes")
+                                }
+                            ]
+                        }
+                    ]
+                })
+            }}
+        {% endcall %}
+        <p>{{_("We do not allow Google to use or share the data about how you use this site.")}}</p>
+        <div class="ons-u-mb-s">
+            {{
+                onsRadios({
+                    "id": "cookies-measure-website-use",
+                    "name": "cookies-usage",
+                    "legend": _("Do you want to allow usage tracking?"),
+                    "legendClasses": "ons-u-vh",
+                    "radios": [
+                        {
+                            "id": "on-1",
+                            "label": {
+                                "text": _("On")
+                            },
+                            "value": "on"
+                        },
+                        {
+                            "id": "off-1",
+                            "label": {
+                                "text": _("Off")
+                            },
+                            "value": "off"
+                        }
+                    ]
+                })
+            }}
+        </div>
+        <p>{{_("This selection will expire after two years.")}}</p>
+
         <h3>{{ _('Cookies that help with our communications') }}</h3>
         <p>{{ _('Some of our pages may contain content from other sites which may set their own cookies. These sites are
                 sometimes called “third party” services. This tells us how many people see the content and

diff --git a/rh_ui/templates/partials/messages.html b/rh_ui/templates/partials/messages.html
diff --git a/rh_ui/templates/partials/uac_error_message_list.html b/rh_ui/templates/partials/uac_error_message_list.html
@@ -0,0 +1,30 @@
+{%- from './components/panel/_macro.njk' import onsPanel -%}
+{%- from './components/list/_macro.njk' import onsList -%}
+
+{% if error_uac %}
+    {%
+    call onsPanel({
+        'title': _('There is a problem with this page'),
+        'variant': 'error'
+    })
+    %}
+
+    {{
+    onsList({
+        'element': 'ol',
+        'itemsList': [ 
+            {
+                'text': error_uac['text'],
+                'url': '#' + error_uac['id'],
+                'variants': 'inPageLink'
+            }
+        ]
+    })
+    }}
+
+    {% endcall %}
+{% endif %}
+
+
+
+