Merge pull request #8099 from freelawproject/8076-v2-pages-count-page-views

feat(views tracker): v2 pages count page views

Author: elisa-a-v

FRONTEND.md

@@ -159,6 +159,22 @@ Swapped partials live under `v2_includes/` (see [Naming & middleware](#naming--m
 
 A blocked evaluation fires `htmx:evalDisallowedError` on the element. Reference: https://htmx.org/reference/#config
 
+## View counting
+
+`new_base.html` counts a page view for any view decorated with `track_view_counter` (`cl/favorites/decorators.py`). The decorator sets `track_events` and `event_label` in the context; the base template puts the label and the `increment-event` endpoint on `<body>` as data attributes and requires `js/alpine/composables/view_count.js`, whose `viewCount` store POSTs the label once per page load. A new v2 page needs nothing beyond the decorator on its view. Counting is per page load and per the one object the view names in `tracks`; this mechanism does not count components or secondary objects.
+
+To display the count, bind to the store from any Alpine root. The store only exists on tracked pages, so the element MUST be rendered under `track_events`:
+
+```html
+{% if track_events %}<span x-text="$store.viewCount.value"></span>{% endif %}
+```
+
+`value` is `null` until the response arrives and stays `null` when the request fails. Failures are logged to the console and never shown to the user. The endpoint returns the count before the current view, and 0 for recognized bots, so `value` excludes the view being recorded.
+
+Cotton components rendered with `only` do not see the page context, so `track_events` is false inside them: pass it explicitly (`:track_events="track_events"`) or render the element from the page template.
+
+Label prefixes are validated by `EventCountSerializer` (`cl/favorites/api_serializers.py`). Tracking a new object type needs a new pattern there, otherwise every request fails with a 400 that only the console reports.
+
 ## Icons
 
 - Use the `{% svg %}` template tag (defined in `cl/custom_filters/templatetags/svg_tags.py`)

cl/assets/static-global/js/alpine/composables/view_count.js

@@ -0,0 +1,29 @@
+/*
+Counts a page view and exposes the returned count as the `viewCount` store.
+Loaded by `new_base.html` for views decorated with `track_view_counter`;
+templates never require it. Usage and caveats: FRONTEND.md, "View counting".
+*/
+
+document.addEventListener('alpine:init', () => {
+  Alpine.store('viewCount', {
+    value: null,
+    async init() {
+      const { viewCountLabel: label, viewCountUrl } = document.body.dataset;
+      try {
+        const response = await fetch(viewCountUrl, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ label }),
+        });
+        if (!response.ok) {
+          console.error(`Could not count view for ${label}: HTTP ${response.status}`);
+          return;
+        }
+        const data = await response.json();
+        this.value = data.value;
+      } catch (error) {
+        console.error(`Could not count view for ${label}:`, error);
+      }
+    },
+  });
+});

cl/assets/templates/new_base.html

@@ -74,7 +74,8 @@ <h1>You did not supply the "private" variable to your template.
 </head>
 
 {# htmx elements inherit hx-headers, so every hx-post on a v2 page carries the CSRF token without repeating it. #}
-<body class="{% block body-classes %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'>
+<body class="{% block body-classes %}{% endblock %}" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'{% if track_events %} data-view-count-label="{{ event_label }}" data-view-count-url="{% url 'increment-event-list' version='v4' %}"{% endif %}>
+  {% if track_events %}{% require_script "js/alpine/composables/view_count.js" %}{% endif %}
   {% corpus_search_scopes as corpus_search_scopes_data %}
   {{ corpus_search_scopes_data|json_script:"corpus-search-scopes" }}
   {% block header %}

cl/opinion_page/tests.py

@@ -4096,6 +4096,28 @@ async def test_v2_body_carries_the_csrf_header_for_htmx(self) -> None:
         self.assertEqual(len(token), CSRF_TOKEN_LENGTH)
         self.assertTrue(token.isalnum())
 
+    async def test_v2_docket_page_counts_views(self) -> None:
+        """A view decorated with track_view_counter hands the body the event
+        label and the increment endpoint, and loads the viewCount store that
+        POSTs them once per page load."""
+        r = await self.async_client.get(
+            reverse("view_docket", args=[self.docket.pk, self.docket.slug])
+        )
+        self.assertTemplateUsed(r, "new_base.html")
+        html = r.content.decode()
+        body = next(fromstring(html).iter("body"))
+        self.assertEqual(
+            body.get("data-view-count-label"), f"d.{self.docket.pk}:view"
+        )
+        self.assertEqual(
+            body.get("data-view-count-url"),
+            reverse("increment-event-list", kwargs={"version": "v4"}),
+        )
+        self.assertRegex(
+            html,
+            r'<script[^>]*src="[^"]*js/alpine/composables/view_count\.js"',
+        )
+
 
 @override_settings(WAFFLE_CACHE_PREFIX="test_docket_alert_toggle_v2_waffle")
 @override_flag("use_new_design", active=True)

cl/simple_pages/tests.py

@@ -445,6 +445,28 @@ def test_v2_pages_without_the_flag(self) -> None:
                 )
 
 
+@override_flag("use_new_design", True)
+@override_settings(WAFFLE_CACHE_PREFIX="test_new_base_view_count_waffle")
+class NewBaseViewCountTest(TestCase):
+    """new_base.html only wires view counting for decorated views.
+
+    The tracked side is covered on the docket page in
+    cl/opinion_page/tests.py; this checks the untracked side on a page
+    whose view has no track_view_counter.
+    """
+
+    async def test_untracked_page_sends_no_view_count(self) -> None:
+        """A v2 page whose view is not decorated carries no label, no endpoint
+        and no store, so the browser makes no request."""
+        r = await self.async_client.get(reverse("help_home"))
+        self.assertTemplateUsed(r, "new_base.html")
+        html = r.content.decode()
+        body = next(fromstring(html).iter("body"))
+        self.assertIsNone(body.get("data-view-count-label"))
+        self.assertIsNone(body.get("data-view-count-url"))
+        self.assertNotIn("view_count.js", html)
+
+
 @patch("hcaptcha.fields.hCaptchaField.validate", return_value=True)
 class SealingOrderDetectionTest(SimpleTestCase):
     def _make_form(