Add Google Analytics

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", "G-XXXXXXXXXX")
 
     # 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}"

rh_ui/security.py

@@ -12,6 +12,7 @@
     'script-src': [
         "'self'",
         'https://cdn.ons.gov.uk',
+        'https://www.googletagmanager.com',
     ],
     'connect-src': [
         "'self'",

rh_ui/templates/base.html

@@ -1,25 +1,41 @@
 {%- 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 async src={{ script_src_url }}></script>
+        <script>
+        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 +53,7 @@
     ]
 }-%}
 
+
 {%- set footer_content = {
     'newTabWarning': _('The following links open in a new tab'),
     'crest': true,
@@ -80,6 +97,7 @@
     }
 }-%}
 
+
 {%- set pageConfig = {
     'title': page_title_value,
     'header': {
@@ -93,9 +111,3 @@
     'cspNonce': csp_nonce(),
     'meta' : {}
 } -%}
-
-
-{%- block bodyStart -%}
-
-
-{%- endblock -%}

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 -%}

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 -%}

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 %}
+
+
+
+

rh_ui/templates/start.html

@@ -4,72 +4,96 @@
 {% from "components/button/_macro.njk" import onsButton %}
 {% from "components/details/_macro.njk" import onsDetails %}
 
-{# display uac error msg if exists #}
+{%- set error_uac = None -%}
+{%- set page_title_value = _('Start study - ONS Surveys') -%}
 
 {% set flashed_messages = get_flashed_messages() %}
 
-{%- if 'uac_empty' in flashed_messages -%}
-    {%- set error_uac = {'id': 'uac_empty', 'text': _('Enter an access code'), 'field': 'uac_empty','group': 'ERROR'} -%}
-    {%- set page_title_value = _('Error: Start study - ONS Surveys') -%}
-{%- elif 'uac_invalid_length' in flashed_messages -%}
-    {%- set error_uac = {'id': 'uac_invalid_length', 'text': _('Enter a 16-character access code'), 'field': 'uac_invalid_length','group': 'ERROR'} -%}
-    {%- set page_title_value = _('Error: Start study - ONS Surveys') -%}
-{%- elif 'uac_invalid' in flashed_messages -%}
-    {%- set error_uac = {'id': 'uac_invalid', 'text': _('Access code not recognised. Enter the code again.'), 'field': 'uac_invalid','group': 'ERROR'} -%}
-    {%- set page_title_value = _('Error: Start study - ONS Surveys') -%}
-
-{%- else -%}
-    {%- set error_uac = None -%}
-    {%- set page_title_value = _('Start study - ONS Surveys') -%}
-{%- endif -%}
+{% if flashed_messages %}
+    {% set page_title_value = _('Error: Start study - ONS Surveys') %}
+
+    {% if 'uac_empty' in flashed_messages %}
+        {% set error_uac = {
+        'id': 'uac_empty',
+        'text': _('Enter an access code'),
+        'attributes': {
+            "data-ga": "error", 
+            "data-ga-category": "UAC-error", 
+            "data-ga-label": "uac_empty_error" 
+        } 
+        } %}
+    {% elif 'uac_invalid_length' in flashed_messages %}
+        {% set error_uac = {
+        'id': 'uac_invalid_length',
+        'text': _('Enter a 16-character access code'),
+        'attributes': {
+            "data-ga": "error", 
+            "data-ga-category": "UAC-error", 
+            "data-ga-label": "uac_invalid_length_error" 
+        } 
+        } %}
+    {% elif 'uac_invalid' in flashed_messages %}
+        {% set error_uac = {
+        'id': 'uac_invalid', 
+        'text': _('Access code not recognised. Enter the code again.'),
+        'attributes': {
+            "data-ga": "error", 
+            "data-ga-category": "UAC-error", 
+            "data-ga-label": "uac_invalid_error" 
+        } 
+        } %}
+    {% endif %}
+
+{% endif %}}
+
+
 
 {% block main %}
-  <form method="POST" action={{  url_for('i18n.start_bp.start_post')}}>
-{% if error_uac %}
-    {% include 'partials/messages.html' with context %}
-{% endif %}
-<h1 class="ons-u-fs-xxl ons-u-mt-l">{{ _('Start study') }}</h1>
+    {% include 'partials/uac_error_message_list.html' with context %}
 
+    <h1 class="ons-u-fs-xxl ons-u-mt-l">{{ _('Start study') }}</h1>
 
-{{ onsAccessCode({
-        "id": "uac",
-        "name": "uac",
-
-        "label": {
-            "text": _("Enter your 16-character access code"),
-            "description": _('Keep this code safe. You will need to enter it every time you access your study')
-        },
+    <form method="POST" action={{  url_for('i18n.start_bp.start_post')}}>
+    {{ onsAccessCode({
+            "id": "uac",
+            "name": "uac",
+
+            "label": {
+                "text": _("Enter your 16-character access code"),
+                "description": _('Keep this code safe. You will need to enter it every time you access your study')
+            },
 
-        "securityMessage": _('Your personal information is protected by law and will be kept confidential.'),
+            "securityMessage": _('Your personal information is protected by law and will be kept confidential.'),
 
-        "error": error_uac
+            "error": error_uac
 
     }) }}
 
-{{ onsButton({
-        'id': 'submit_uac_btn',
-        'text': _('Access study'),
-        'classes': 'ons-u-mb-xl',
-        'name': 'action[save_continue]',
-        "variants": 'loader'
+    {{ onsButton({
+            'id': 'submit_uac_btn',
+            'text': _('Access study'),
+            'classes': 'ons-u-mb-xl',
+            'name': 'action[save_continue]',
+            "variants": 'loader'
     }) }}
+    </form>
 
-<h2 class="ons-u-fs-xl ons-u-mt-l" id="find_access_code">{{ _('Where to find your access code') }}</h2>
-<p>{{ _('Your access code can be found in the invitation letter or email you received.
-        Your 16-character access code will be a combination of letters and numbers.') }}</p>
-
-{%- set further_info_content -%}
-<p>{{ _('Telephone: +44 0808 196 1270<br>9am to 4:30pm Monday to Thursday<br>9am to 3pm Friday') }}</p>
-<p>{{ _('Minicom (for the deaf and hearing impaired): 18001 +44 800 085 7376') }}</p>
-<p>{{ _('Email:') }} <a href="mailto: [email protected]">[email protected]</a></p>
-{%- endset -%}
-
-{{ onsDetails({
-        "titleTag": "h3",
-        "id": "details",
-        "title": _('Who can I contact for further information?'),
-        "content": further_info_content
-    }) }}
 
-  </form>
+    <h2 class="ons-u-fs-xl ons-u-mt-l" id="find_access_code">{{ _('Where to find your access code') }}</h2>
+    <p>{{ _('Your access code can be found in the invitation letter or email you received.
+            Your 16-character access code will be a combination of letters and numbers.') }}</p>
+
+    {%- set further_info_content -%}
+    <p>{{ _('Telephone: +44 0808 196 1270<br>9am to 4:30pm Monday to Thursday<br>9am to 3pm Friday') }}</p>
+    <p>{{ _('Minicom (for the deaf and hearing impaired): 18001 +44 800 085 7376') }}</p>
+    <p>{{ _('Email:') }} <a href="mailto: [email protected]">[email protected]</a></p>
+    {%- endset -%}
+
+    {{ onsDetails({
+            "titleTag": "h3",
+            "id": "details",
+            "title": _('Who can I contact for further information?'),
+            "content": further_info_content
+        }) }}
+
 {% endblock %}

rh_ui/templates/uac_error_pages/uac-already-used.html

@@ -18,7 +18,13 @@
 
 {%- block main -%}
 
-    <h1>{{ _('This access code has already been used') }}</h1>
+    <h1
+        data-ga= "error", 
+        data-ga-category= "UAC-error", 
+        data-ga-label= "uac_already_used_error" 
+    >
+    {{ _('This access code has already been used') }}
+    </h1>
 
     <p>{{ _('Someone has already submitted a response using this access code.') }}</p>