feat: store The URL of the page the user landed on

Author: hakenprog

README.md

@@ -20,7 +20,7 @@ If a visitor arrives at a website that uses the Nuxt UTM module and a UTM parame
 
 - **📍 UTM Tracking**: Easily capture UTM parameters to gain insights into traffic sources and campaign performance.
 - **🔍 Intelligent De-duplication**: Smart recognition of page refreshes to avoid data duplication, ensuring each visit is uniquely accounted for.
-- **🔗 Comprehensive Data Collection**: Alongside UTM parameters, gather additional context such as referrer details, user agent, browser language, and screen resolution. This enriched data empowers your marketing strategies with a deeper understanding of campaign impact.
+- **🔗 Comprehensive Data Collection**: Alongside UTM parameters, gather additional context such as referrer details, user agent, landing page url, browser language, and screen resolution. This enriched data empowers your marketing strategies with a deeper understanding of campaign impact.
 
 ## Quick Setup
 
@@ -73,6 +73,7 @@ The `$utm` will contain an array of UTM parameters collected for use. Each eleme
       referrer: "http://referrer.url", // Referrer URL
       userAgent: "User-Agent String", // User-Agent string of the browser
       language: "en-GB", // Language setting of the browser
+      landingPageUrl: "http://landingpage.url", // The URL of the page the user landed on
       screen: {
         width: 1728,
         height: 1117,

src/runtime/utm.ts

@@ -54,6 +54,7 @@ export const getAdditionalInfo = (): AdditionalInfo => {
     referrer: document.referrer,
     userAgent: navigator.userAgent,
     language: navigator.language,
+    landingPageUrl: window.location.href,
     screen: {
       width: screen.width,
       height: screen.height,

test/integration.test.ts

@@ -1,4 +1,4 @@
-import { DataObject } from 'nuxt-utm';
+import { DataObject } from "nuxt-utm";
 import { describe, it, expect, beforeEach } from "vitest";
 import { fileURLToPath } from "node:url";
 import { setup, $fetch, createPage } from "@nuxt/test-utils";
@@ -10,33 +10,55 @@ describe("ssr", async () => {
     browser: true,
   });
 
+  let entries: DataObject[];
+  let page: Page;
+
+  beforeEach(async () => {
+    page = await createPage(
+      "/?utm_source=test_source&utm_medium=test_medium&utm_campaign=test_campaign&utm_term=test_term&utm_content=test_content"
+    );
+    const rawData = await page.evaluate(() =>
+      window.localStorage.getItem("nuxt-utm-data")
+    );
+    entries = await JSON.parse(rawData ?? "[]");
+  });
+
   describe("Module Playground", () => {
     it("Renders the index page", async () => {
       const html = await $fetch("/");
       expect(html).toContain("<h1>UTM Tracker</h1>");
     });
   });
 
-  describe("UTM params", () => {
-    let utmParamsArray: DataObject[];
-    let page: Page;
+  describe("Additional info", () => {
+    it("Stores data in local storage", () => {
+      expect(entries?.[0]).toBeDefined();
+    });
 
-    beforeEach(async () => {
-      page = await createPage(
-        "/?utm_source=test_source&utm_medium=test_medium&utm_campaign=test_campaign&utm_term=test_term&utm_content=test_content"
-      );
-      const rawData = await page.evaluate(() =>
-        window.localStorage.getItem("nuxt-utm-data")
-      );
-      utmParamsArray = await JSON.parse(rawData ?? "[]");
+    it("Stores Additional info", () => {
+      expect(entries?.[0].additionalInfo).toBeDefined();
     });
 
-    it("Stores data in local storage", async () => {
-      expect(utmParamsArray?.[0]).toBeDefined();
+    it("Stores the correct values", async () => {
+      const info = await page.evaluate(() => {
+        return {
+          referrer: document.referrer,
+          userAgent: navigator.userAgent,
+          language: navigator.language,
+          landingPageUrl: window.location.href,
+          screen: {
+            width: screen.width,
+            height: screen.height,
+          },
+        };
+      });
+      expect(entries?.[0].additionalInfo).toEqual(info);
     });
+  });
 
-    it("Stores UTM params", async () => {
-      expect(utmParamsArray?.[0].utmParams).toEqual({
+  describe("UTM params", () => {
+    it("Stores UTM params", () => {
+      expect(entries?.[0].utmParams).toEqual({
         utm_campaign: "test_campaign",
         utm_content: "test_content",
         utm_medium: "test_medium",
@@ -50,8 +72,8 @@ describe("ssr", async () => {
       const rawData = await page?.evaluate(() =>
         window.localStorage.getItem("nuxt-utm-data")
       );
-      utmParamsArray = await JSON.parse(rawData ?? "[]");
-      expect(utmParamsArray.length).toEqual(1);
+      entries = await JSON.parse(rawData ?? "[]");
+      expect(entries.length).toEqual(1);
     });
 
     it("Stores a new value if the UTM params are different but the session is the same", async () => {
@@ -62,8 +84,8 @@ describe("ssr", async () => {
       const rawData = await page.evaluate(() =>
         localStorage.getItem("nuxt-utm-data")
       );
-      utmParamsArray = await JSON.parse(rawData ?? "[]");
-      expect(utmParamsArray[0].utmParams).toEqual({
+      entries = await JSON.parse(rawData ?? "[]");
+      expect(entries[0].utmParams).toEqual({
         utm_campaign: "test_campaign2",
         utm_content: "test_content2",
         utm_medium: "test_medium2",
@@ -80,8 +102,8 @@ describe("ssr", async () => {
       const rawData = await page.evaluate(() =>
         localStorage.getItem("nuxt-utm-data")
       );
-      utmParamsArray = await JSON.parse(rawData ?? "[]");
-      expect(utmParamsArray[0].utmParams).toEqual({
+      entries = await JSON.parse(rawData ?? "[]");
+      expect(entries[0].utmParams).toEqual({
         utm_campaign: "test_campaign",
         utm_content: "test_content",
         utm_medium: "test_medium",

types/index.d.ts

@@ -11,6 +11,7 @@ declare module "nuxt-utm" {
     referrer: string;
     userAgent: string;
     language: string;
+    landingPageUrl: string;
     screen: {
       width: number;
       height: number;