diff --git a/packages/angular/src/tracing.ts b/packages/angular/src/tracing.ts
index 5b2f74615c45..43c6227b0f8e 100644
--- a/packages/angular/src/tracing.ts
+++ b/packages/angular/src/tracing.ts
@@ -129,7 +129,6 @@ export class TraceService implements OnDestroy {
         if (!getActiveSpan()) {
           startBrowserTracingNavigationSpan(client, {
             name: strippedUrl,
-            op: 'navigation',
             origin: 'auto.navigation.angular',
             attributes: {
               [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
diff --git a/packages/ember/addon/instance-initializers/sentry-performance.ts b/packages/ember/addon/instance-initializers/sentry-performance.ts
index f4c47998ea90..9046ead7c7fc 100644
--- a/packages/ember/addon/instance-initializers/sentry-performance.ts
+++ b/packages/ember/addon/instance-initializers/sentry-performance.ts
@@ -11,7 +11,7 @@ import type { ExtendedBackburner } from '@sentry/ember/runloop';
 import type { Span } from '@sentry/types';
 import { GLOBAL_OBJ, browserPerformanceTimeOrigin, timestampInSeconds } from '@sentry/utils';
 
-import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN } from '@sentry/core';
+import { SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN, SEMANTIC_ATTRIBUTE_SENTRY_SOURCE } from '@sentry/core';
 import type { BrowserClient } from '..';
 import { getActiveSpan, startInactiveSpan } from '..';
 import type { EmberRouterMain, EmberSentryConfig, GlobalConfig, OwnConfig } from '../types';
@@ -115,17 +115,18 @@ export function _instrumentEmberRouter(
     browserTracingOptions.instrumentPageLoad !== false
   ) {
     const routeInfo = routerService.recognize(url);
-    Sentry.startBrowserTracingPageLoadSpan(client, {
+    activeRootSpan = Sentry.startBrowserTracingPageLoadSpan(client, {
       name: `route:${routeInfo.name}`,
-      op: 'pageload',
       origin: 'auto.pageload.ember',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+      },
       tags: {
         url,
         toRoute: routeInfo.name,
         'routing.instrumentation': '@sentry/ember',
       },
     });
-    activeRootSpan = getActiveSpan();
   }
 
   const finishActiveTransaction = (_: unknown, nextInstance: unknown): void => {
@@ -147,10 +148,12 @@ export function _instrumentEmberRouter(
     const { fromRoute, toRoute } = getTransitionInformation(transition, routerService);
     activeRootSpan?.end();
 
-    Sentry.startBrowserTracingNavigationSpan(client, {
+    activeRootSpan = Sentry.startBrowserTracingNavigationSpan(client, {
       name: `route:${toRoute}`,
-      op: 'navigation',
       origin: 'auto.navigation.ember',
+      attributes: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'route',
+      },
       tags: {
         fromRoute,
         toRoute,
@@ -158,8 +161,6 @@ export function _instrumentEmberRouter(
       },
     });
 
-    activeRootSpan = getActiveSpan();
-
     transitionSpan = startInactiveSpan({
       attributes: {
         [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.ember',
diff --git a/packages/tracing-internal/src/browser/browserTracingIntegration.ts b/packages/tracing-internal/src/browser/browserTracingIntegration.ts
index 31660eff00a7..b27575e147cf 100644
--- a/packages/tracing-internal/src/browser/browserTracingIntegration.ts
+++ b/packages/tracing-internal/src/browser/browserTracingIntegration.ts
@@ -1,5 +1,6 @@
-/* eslint-disable max-lines, complexity */
+/* eslint-disable max-lines */
 import type { IdleTransaction } from '@sentry/core';
+import { getActiveSpan } from '@sentry/core';
 import { getCurrentHub } from '@sentry/core';
 import {
   SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
@@ -237,7 +238,6 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
     latestRouteName = finalContext.name;
     latestRouteSource = getSource(finalContext);
 
-    // eslint-disable-next-line deprecation/deprecation
     if (finalContext.sampled === false) {
       DEBUG_BUILD && logger.log(`[Tracing] Will not send ${finalContext.op} transaction because of beforeNavigate.`);
     }
@@ -316,7 +316,10 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
             // If there's an open transaction on the scope, we need to finish it before creating an new one.
             activeSpan.end();
           }
-          activeSpan = _createRouteTransaction(context);
+          activeSpan = _createRouteTransaction({
+            op: 'navigation',
+            ...context,
+          });
         });
 
         client.on('startPageLoadSpan', (context: StartSpanOptions) => {
@@ -325,7 +328,10 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
             // If there's an open transaction on the scope, we need to finish it before creating an new one.
             activeSpan.end();
           }
-          activeSpan = _createRouteTransaction(context);
+          activeSpan = _createRouteTransaction({
+            op: 'pageload',
+            ...context,
+          });
         });
       }
 
@@ -334,7 +340,6 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
           name: WINDOW.location.pathname,
           // pageload should always start at timeOrigin (and needs to be in s, not ms)
           startTimestamp: browserPerformanceTimeOrigin ? browserPerformanceTimeOrigin / 1000 : undefined,
-          op: 'pageload',
           origin: 'auto.pageload.browser',
           attributes: {
             [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
@@ -363,7 +368,6 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
             startingUrl = undefined;
             const context: StartSpanOptions = {
               name: WINDOW.location.pathname,
-              op: 'navigation',
               origin: 'auto.navigation.browser',
               attributes: {
                 [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
@@ -401,24 +405,32 @@ export const browserTracingIntegration = ((_options: Partial<BrowserTracingOptio
  * Manually start a page load span.
  * This will only do something if the BrowserTracing integration has been setup.
  */
-export function startBrowserTracingPageLoadSpan(client: Client, spanOptions: StartSpanOptions): void {
+export function startBrowserTracingPageLoadSpan(client: Client, spanOptions: StartSpanOptions): Span | undefined {
   if (!client.emit) {
     return;
   }
 
   client.emit('startPageLoadSpan', spanOptions);
+
+  const span = getActiveSpan();
+  const op = span && spanToJSON(span).op;
+  return op === 'pageload' ? span : undefined;
 }
 
 /**
  * Manually start a navigation span.
  * This will only do something if the BrowserTracing integration has been setup.
  */
-export function startBrowserTracingNavigationSpan(client: Client, spanOptions: StartSpanOptions): void {
+export function startBrowserTracingNavigationSpan(client: Client, spanOptions: StartSpanOptions): Span | undefined {
   if (!client.emit) {
     return;
   }
 
   client.emit('startNavigationSpan', spanOptions);
+
+  const span = getActiveSpan();
+  const op = span && spanToJSON(span).op;
+  return op === 'navigation' ? span : undefined;
 }
 
 /** Returns the value of a meta tag */
diff --git a/packages/tracing-internal/test/browser/browserTracingIntegration.test.ts b/packages/tracing-internal/test/browser/browserTracingIntegration.test.ts
new file mode 100644
index 000000000000..ed67c25edba5
--- /dev/null
+++ b/packages/tracing-internal/test/browser/browserTracingIntegration.test.ts
@@ -0,0 +1,373 @@
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+  getActiveSpan,
+  getCurrentScope,
+  setCurrentClient,
+  spanIsSampled,
+  spanToJSON,
+} from '@sentry/core';
+import { JSDOM } from 'jsdom';
+import { browserTracingIntegration, startBrowserTracingNavigationSpan, startBrowserTracingPageLoadSpan } from '../..';
+import { WINDOW } from '../../src/browser/types';
+import { TestClient, getDefaultClientOptions } from '../utils/TestClient';
+import { conditionalTest } from '../utils/utils';
+
+// We're setting up JSDom here because the Next.js routing instrumentations requires a few things to be present on pageload:
+// 1. Access to window.document API for `window.document.getElementById`
+// 2. Access to window.location API for `window.location.pathname`
+
+const dom = new JSDOM(undefined, { url: 'https://example.com/' });
+Object.defineProperty(global, 'document', { value: dom.window.document, writable: true });
+Object.defineProperty(global, 'location', { value: dom.window.document.location, writable: true });
+Object.defineProperty(global, 'history', { value: dom.window.history, writable: true });
+
+const originalGlobalDocument = WINDOW.document;
+const originalGlobalLocation = WINDOW.location;
+const originalGlobalHistory = WINDOW.history;
+afterAll(() => {
+  // Clean up JSDom
+  Object.defineProperty(WINDOW, 'document', { value: originalGlobalDocument });
+  Object.defineProperty(WINDOW, 'location', { value: originalGlobalLocation });
+  Object.defineProperty(WINDOW, 'history', { value: originalGlobalHistory });
+});
+
+describe('browserTracingIntegration', () => {
+  afterEach(() => {
+    getCurrentScope().clear();
+  });
+
+  it('works with tracing enabled', () => {
+    const client = new TestClient(
+      getDefaultClientOptions({
+        tracesSampleRate: 1,
+        integrations: [browserTracingIntegration()],
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const span = getActiveSpan();
+    expect(span).toBeDefined();
+    expect(spanIsSampled(span!)).toBe(true);
+    expect(spanToJSON(span!)).toEqual({
+      description: '/',
+      op: 'pageload',
+      origin: 'auto.pageload.browser',
+      data: {
+        [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+        [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',
+        [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+        [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+      },
+      span_id: expect.any(String),
+      start_timestamp: expect.any(Number),
+      trace_id: expect.any(String),
+    });
+  });
+
+  it('works with tracing disabled', () => {
+    const client = new TestClient(
+      getDefaultClientOptions({
+        integrations: [browserTracingIntegration()],
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const span = getActiveSpan();
+    expect(span).toBeDefined();
+    expect(spanIsSampled(span!)).toBe(false);
+  });
+
+  it('works with tracing enabled but unsampled', () => {
+    const client = new TestClient(
+      getDefaultClientOptions({
+        tracesSampleRate: 0,
+        integrations: [browserTracingIntegration()],
+      }),
+    );
+    setCurrentClient(client);
+    client.init();
+
+    const span = getActiveSpan();
+    expect(span).toBeDefined();
+    expect(spanIsSampled(span!)).toBe(false);
+  });
+
+  conditionalTest({ min: 10 })('navigation', () => {
+    it('starts navigation when URL changes', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration()],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = getActiveSpan();
+      expect(span).toBeDefined();
+      expect(spanIsSampled(span!)).toBe(true);
+      expect(span!.isRecording()).toBe(true);
+      expect(spanToJSON(span!)).toEqual({
+        description: '/',
+        op: 'pageload',
+        origin: 'auto.pageload.browser',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+
+      // this is what is used to get the span name - JSDOM does not update this on it's own!
+      const dom = new JSDOM(undefined, { url: 'https://example.com/test' });
+      Object.defineProperty(global, 'location', { value: dom.window.document.location, writable: true });
+
+      WINDOW.history.pushState({}, '', '/test');
+
+      expect(span!.isRecording()).toBe(false);
+
+      const span2 = getActiveSpan();
+      expect(span2).toBeDefined();
+      expect(spanIsSampled(span2!)).toBe(true);
+      expect(span2!.isRecording()).toBe(true);
+      expect(spanToJSON(span2!)).toEqual({
+        description: '/test',
+        op: 'navigation',
+        origin: 'auto.navigation.browser',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.browser',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+
+      // this is what is used to get the span name - JSDOM does not update this on it's own!
+      const dom2 = new JSDOM(undefined, { url: 'https://example.com/test2' });
+      Object.defineProperty(global, 'location', { value: dom2.window.document.location, writable: true });
+
+      WINDOW.history.pushState({}, '', '/test2');
+
+      expect(span2!.isRecording()).toBe(false);
+
+      const span3 = getActiveSpan();
+      expect(span3).toBeDefined();
+      expect(spanIsSampled(span3!)).toBe(true);
+      expect(span3!.isRecording()).toBe(true);
+      expect(spanToJSON(span3!)).toEqual({
+        description: '/test2',
+        op: 'navigation',
+        origin: 'auto.navigation.browser',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.navigation.browser',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+          [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+    });
+  });
+
+  describe('startBrowserTracingPageLoadSpan', () => {
+    it('works without integration setup', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          integrations: [],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingPageLoadSpan(client, { name: 'test span' });
+
+      expect(span).toBeUndefined();
+    });
+
+    it('works with unsampled span', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 0,
+          integrations: [browserTracingIntegration({ instrumentPageLoad: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingPageLoadSpan(client, { name: 'test span' });
+
+      expect(span).toBeDefined();
+      expect(spanIsSampled(span!)).toBe(false);
+    });
+
+    it('works with integration setup', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration({ instrumentPageLoad: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingPageLoadSpan(client, { name: 'test span' });
+
+      expect(span).toBeDefined();
+      expect(spanToJSON(span!)).toEqual({
+        description: 'test span',
+        op: 'pageload',
+        origin: 'manual',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'manual',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+      expect(spanIsSampled(span!)).toBe(true);
+    });
+
+    it('allows to overwrite properties', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration({ instrumentPageLoad: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingPageLoadSpan(client, {
+        name: 'test span',
+        origin: 'auto.test',
+        attributes: { testy: 'yes' },
+      });
+
+      expect(span).toBeDefined();
+      expect(spanToJSON(span!)).toEqual({
+        description: 'test span',
+        op: 'pageload',
+        origin: 'auto.test',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.test',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+          testy: 'yes',
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+    });
+  });
+
+  describe('startBrowserTracingNavigationSpan', () => {
+    it('works without integration setup', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          integrations: [],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingNavigationSpan(client, { name: 'test span' });
+
+      expect(span).toBeUndefined();
+    });
+
+    it('works with unsampled span', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 0,
+          integrations: [browserTracingIntegration({ instrumentNavigation: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingNavigationSpan(client, { name: 'test span' });
+
+      expect(span).toBeDefined();
+      expect(spanIsSampled(span!)).toBe(false);
+    });
+
+    it('works with integration setup', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration({ instrumentNavigation: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingNavigationSpan(client, { name: 'test span' });
+
+      expect(span).toBeDefined();
+      expect(spanToJSON(span!)).toEqual({
+        description: 'test span',
+        op: 'navigation',
+        origin: 'manual',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'manual',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+      expect(spanIsSampled(span!)).toBe(true);
+    });
+
+    it('allows to overwrite properties', () => {
+      const client = new TestClient(
+        getDefaultClientOptions({
+          tracesSampleRate: 1,
+          integrations: [browserTracingIntegration({ instrumentNavigation: false })],
+        }),
+      );
+      setCurrentClient(client);
+      client.init();
+
+      const span = startBrowserTracingNavigationSpan(client, {
+        name: 'test span',
+        origin: 'auto.test',
+        attributes: { testy: 'yes' },
+      });
+
+      expect(span).toBeDefined();
+      expect(spanToJSON(span!)).toEqual({
+        description: 'test span',
+        op: 'navigation',
+        origin: 'auto.test',
+        data: {
+          [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'navigation',
+          [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.test',
+          [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+          testy: 'yes',
+        },
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+    });
+  });
+});
diff --git a/packages/tracing-internal/test/utils/utils.ts b/packages/tracing-internal/test/utils/utils.ts
new file mode 100644
index 000000000000..0652be303ed4
--- /dev/null
+++ b/packages/tracing-internal/test/utils/utils.ts
@@ -0,0 +1,20 @@
+import { parseSemver } from '@sentry/utils';
+
+export const NODE_VERSION = parseSemver(process.versions.node) as { major: number; minor: number; patch: number };
+
+/**
+ * Returns`describe` or `describe.skip` depending on allowed major versions of Node.
+ *
+ * @param {{ min?: number; max?: number }} allowedVersion
+ * @return {*}  {jest.Describe}
+ */
+export const conditionalTest = (allowedVersion: { min?: number; max?: number }): jest.Describe => {
+  const major = NODE_VERSION.major;
+  if (!major) {
+    return describe.skip as jest.Describe;
+  }
+
+  return major < (allowedVersion.min || -Infinity) || major > (allowedVersion.max || Infinity)
+    ? (describe.skip as jest.Describe)
+    : (describe as any);
+};