From 1d0b1562e95a365846325bfc624d0ccac827dc76 Mon Sep 17 00:00:00 2001
From: Mel <mrotranfield@gmail.com>
Date: Tue, 12 Aug 2025 08:46:52 +0100
Subject: [PATCH] adding Google Analytics

---
 index.html | 439 +++++++++++++++++++++++++++++------------------------
 1 file changed, 238 insertions(+), 201 deletions(-)
diff --git a/index.html b/index.html
index bfb549f..cdc56b9 100644
--- a/index.html
+++ b/index.html
@@ -1,212 +1,249 @@
 <!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8" />
-  <title>Reform UK Exposed Tweets by Area</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
-  <style>
-    body {
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      margin: 0;
-      padding: 0;
-      background: #f5f5f5;
-      color: #003b5c;
-    }
-
-    header {
-      background: #00aeef;
-      padding: 2rem 1rem 1rem;
-      text-align: center;
-      color: white;
-      position: relative;
-    }
-
-    header h1 {
-      margin: 0;
-      font-size: 2.5rem;
-    }
-
-    .subtext {
-      margin-top: 0.5rem;
-      font-size: 1rem;
-      color: white;
-    }
-
-    .subtext a {
-      color: white;
-      text-decoration: underline;
-    }
-
-    .hero-image {
-      width: 100%;
-      max-height: 300px;
-      object-fit: cover;
-      margin-top: 1rem;
-      border-bottom: 4px solid #003b5c;
-    }
-
-    .container {
-      max-width: 900px;
-      margin: 2rem auto;
-      padding: 0 1rem;
-    }
-
-    .filters {
-      margin-bottom: 1.5rem;
-    }
-
-    label {
-      font-weight: bold;
-      display: block;
-      margin-bottom: 0.5rem;
-    }
-
-    select, input[type="text"] {
-      width: 100%;
-      padding: 0.75rem;
-      border: 1px solid #ccc;
-      border-radius: 4px;
-      font-size: 1rem;
-    }
-
-    .tweet {
-      background: white;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
-      padding: 1rem;
-      margin-bottom: 1rem;
-      line-height: 1.5;
-    }
-
-    .tweet a {
-      display: inline-block;
-      margin-top: 0.5rem;
-      color: #00aeef;
-      text-decoration: none;
-    }
-
-    footer {
-      text-align: center;
-      color: #888;
-      font-size: 0.9rem;
-      margin-top: 3rem;
-      padding-bottom: 2rem;
-    }
-
-    @media (max-width: 700px) {
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reform UK Exposed Tweets by Area</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <!-- Google Analytics -->
+    <script
+      async
+      src="https://www.googletagmanager.com/gtag/js?id=G-FQQ7TXGD96"
+    ></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("config", "G-G-FQQ7TXGD96");
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
+    <style>
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        margin: 0;
+        padding: 0;
+        background: #f5f5f5;
+        color: #003b5c;
+      }
+
+      header {
+        background: #00aeef;
+        padding: 2rem 1rem 1rem;
+        text-align: center;
+        color: white;
+        position: relative;
+      }
+
       header h1 {
-        font-size: 2rem;
-      }
-    }
-  </style>
-</head>
-<body>
-
-  <header>
-    <h1>Reform UK Exposed Tweets</h1>
-    <div class="subtext">
-      Are you a local campaigner looking for information about your local Reform candidates? These are tweets from the brilliant <strong>Reform UK Exposed</strong> Twitter account, organised by geography.
-      <br />
-      Follow the original account <a href="https://twitter.com/ReformExposed" target="_blank">here</a>.
-    </div>
-    <img class="hero-image" src="https://i2-prod.mirror.co.uk/incoming/article5660503.ece/ALTERNATES/s1200/Election.jpg" alt="Satirical image of Nigel Farage crying">
-    <!-- Replace with your preferred image URL or local image -->
-  </header>
-
-  <div class="container">
-    <div class="filters">
-      <label for="areaSelect">Filter by Area:</label>
-      <select id="areaSelect">
-        <option value="">All Areas</option>
-      </select>
-    </div>
+        margin: 0;
+        font-size: 2.5rem;
+      }
 
-    <div style="margin-bottom: 1.5rem;">
-      <label for="searchInput">Search tweets:</label>
-      <input type="text" id="searchInput" placeholder="Enter keyword..." />
-    </div>
+      .subtext {
+        margin-top: 0.5rem;
+        font-size: 1rem;
+        color: white;
+      }
 
-    <div id="tweets"></div>
-  </div>
-
-  <footer>
-    Built by volunteers at Campaign Lab to uncover the truth behind Reform UK
-  </footer>
-
-  <script>
-    const sheetURL = 'https://docs.google.com/spreadsheets/d/e/2PACX-1vQyOqn4w0KNNgwXjXBam72jKvAmFwr3RUQEHjYEFhUq8gTwZqwuNSStbT-4SELNDNoT7taAgIXC66E2/pub?gid=0&single=true&output=csv';
-    let allData = [];
-
-    async function loadCSV(url) {
-      const res = await fetch(url);
-      const text = await res.text();
-
-      const parsed = Papa.parse(text, {
-        header: true,
-        skipEmptyLines: true
-      });
-
-      const cleaned = parsed.data.map(row => ({
-        area: row["Area"]?.trim(),
-        tweet: row["Tweet"]?.trim(),
-        url: row["URL"]?.trim()
-      })).filter(d => d.area && d.tweet);
-
-      return cleaned;
-    }
-
-    function populateDropdown(id, items) {
-      const select = document.getElementById(id);
-      items.sort().forEach(value => {
-        const option = document.createElement("option");
-        option.value = value;
-        option.textContent = value;
-        select.appendChild(option);
-      });
-    }
-
-    function applyFilters() {
-      const area = document.getElementById('areaSelect').value;
-      const searchTerm = document.getElementById('searchInput').value.toLowerCase();
-      const tweetsDiv = document.getElementById('tweets');
-      tweetsDiv.innerHTML = '';
-
-      const filtered = allData.filter(d => {
-        const matchesArea = area === '' || d.area === area;
-        const matchesSearch = searchTerm === '' || d.tweet.toLowerCase().includes(searchTerm);
-        return matchesArea && matchesSearch;
-      });
-
-      if (filtered.length === 0) {
-        tweetsDiv.innerHTML = "<p>No tweets match your filters.</p>";
-        return;
-      }
-
-      filtered.forEach(d => {
-        const div = document.createElement("div");
-        div.className = "tweet";
-        div.innerHTML = `
-          ${d.tweet}
-          ${d.url ? `<br><a href="${d.url}" target="_blank">View on Twitter</a>` : ''}
-        `;
-        tweetsDiv.appendChild(div);
-      });
-    }
+      .subtext a {
+        color: white;
+        text-decoration: underline;
+      }
+
+      .hero-image {
+        width: 100%;
+        max-height: 300px;
+        object-fit: cover;
+        margin-top: 1rem;
+        border-bottom: 4px solid #003b5c;
+      }
+
+      .container {
+        max-width: 900px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .filters {
+        margin-bottom: 1.5rem;
+      }
 
-    async function init() {
-      allData = await loadCSV(sheetURL);
-      const uniqueAreas = [...new Set(allData.map(d => d.area).filter(Boolean))];
-      populateDropdown('areaSelect', uniqueAreas);
+      label {
+        font-weight: bold;
+        display: block;
+        margin-bottom: 0.5rem;
+      }
+
+      select,
+      input[type="text"] {
+        width: 100%;
+        padding: 0.75rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        font-size: 1rem;
+      }
+
+      .tweet {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+        padding: 1rem;
+        margin-bottom: 1rem;
+        line-height: 1.5;
+      }
 
-      document.getElementById('areaSelect').addEventListener('change', applyFilters);
-      document.getElementById('searchInput').addEventListener('input', applyFilters);
+      .tweet a {
+        display: inline-block;
+        margin-top: 0.5rem;
+        color: #00aeef;
+        text-decoration: none;
+      }
+
+      footer {
+        text-align: center;
+        color: #888;
+        font-size: 0.9rem;
+        margin-top: 3rem;
+        padding-bottom: 2rem;
+      }
 
-      applyFilters(); // initial render
-    }
+      @media (max-width: 700px) {
+        header h1 {
+          font-size: 2rem;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <header>
+      <h1>Reform UK Exposed Tweets</h1>
+      <div class="subtext">
+        Are you a local campaigner looking for information about your local
+        Reform candidates? These are tweets from the brilliant
+        <strong>Reform UK Exposed</strong> Twitter account, organised by
+        geography.
+        <br />
+        Follow the original account
+        <a href="https://twitter.com/ReformExposed" target="_blank">here</a>.
+      </div>
+      <img
+        class="hero-image"
+        src="https://i2-prod.mirror.co.uk/incoming/article5660503.ece/ALTERNATES/s1200/Election.jpg"
+        alt="Satirical image of Nigel Farage crying"
+      />
+      <!-- Replace with your preferred image URL or local image -->
+    </header>
+
+    <div class="container">
+      <div class="filters">
+        <label for="areaSelect">Filter by Area:</label>
+        <select id="areaSelect">
+          <option value="">All Areas</option>
+        </select>
+      </div>
+
+      <div style="margin-bottom: 1.5rem">
+        <label for="searchInput">Search tweets:</label>
+        <input type="text" id="searchInput" placeholder="Enter keyword..." />
+      </div>
+
+      <div id="tweets"></div>
+    </div>
 
-    init();
-  </script>
+    <footer>
+      Built by volunteers at Campaign Lab to uncover the truth behind Reform UK
+    </footer>
+
+    <script>
+      const sheetURL =
+        "https://docs.google.com/spreadsheets/d/e/2PACX-1vQyOqn4w0KNNgwXjXBam72jKvAmFwr3RUQEHjYEFhUq8gTwZqwuNSStbT-4SELNDNoT7taAgIXC66E2/pub?gid=0&single=true&output=csv";
+      let allData = [];
+
+      async function loadCSV(url) {
+        const res = await fetch(url);
+        const text = await res.text();
+
+        const parsed = Papa.parse(text, {
+          header: true,
+          skipEmptyLines: true,
+        });
+
+        const cleaned = parsed.data
+          .map((row) => ({
+            area: row["Area"]?.trim(),
+            tweet: row["Tweet"]?.trim(),
+            url: row["URL"]?.trim(),
+          }))
+          .filter((d) => d.area && d.tweet);
+
+        return cleaned;
+      }
+
+      function populateDropdown(id, items) {
+        const select = document.getElementById(id);
+        items.sort().forEach((value) => {
+          const option = document.createElement("option");
+          option.value = value;
+          option.textContent = value;
+          select.appendChild(option);
+        });
+      }
+
+      function applyFilters() {
+        const area = document.getElementById("areaSelect").value;
+        const searchTerm = document
+          .getElementById("searchInput")
+          .value.toLowerCase();
+        const tweetsDiv = document.getElementById("tweets");
+        tweetsDiv.innerHTML = "";
+
+        const filtered = allData.filter((d) => {
+          const matchesArea = area === "" || d.area === area;
+          const matchesSearch =
+            searchTerm === "" || d.tweet.toLowerCase().includes(searchTerm);
+          return matchesArea && matchesSearch;
+        });
+
+        if (filtered.length === 0) {
+          tweetsDiv.innerHTML = "<p>No tweets match your filters.</p>";
+          return;
+        }
+
+        filtered.forEach((d) => {
+          const div = document.createElement("div");
+          div.className = "tweet";
+          div.innerHTML = `
+          ${d.tweet}
+          ${
+            d.url
+              ? `<br><a href="${d.url}" target="_blank">View on Twitter</a>`
+              : ""
+          }
+        `;
+          tweetsDiv.appendChild(div);
+        });
+      }
+
+      async function init() {
+        allData = await loadCSV(sheetURL);
+        const uniqueAreas = [
+          ...new Set(allData.map((d) => d.area).filter(Boolean)),
+        ];
+        populateDropdown("areaSelect", uniqueAreas);
+
+        document
+          .getElementById("areaSelect")
+          .addEventListener("change", applyFilters);
+        document
+          .getElementById("searchInput")
+          .addEventListener("input", applyFilters);
+
+        applyFilters(); // initial render
+      }
 
-</body>
+      init();
+    </script>
+  </body>
 </html>
