or run

tessl search
Log in

Version

Files

tile.json

task.mdevals/scenario-5/

Analytics Loader for SPA

Build a simple client-side analytics loader utility that automatically loads and initializes Google Analytics (GA3/Universal Analytics) tracking scripts.

Requirements

Your utility should provide:

  1. Automatic Script Loading: Load the Google Analytics script dynamically on the client side without requiring manual script tag insertion in HTML.

  2. Duplicate Script Detection: Before loading the analytics script, check if a Google Analytics script already exists on the page to prevent conflicts. Skip loading if a duplicate is detected.

  3. Initialization Configuration: Accept a configuration object that includes:

    • A tracking ID (e.g., "UA-12345-1")
    • An optional flag to check for duplicate scripts (default: false)
  4. Client-Side Only: The utility should only execute in a browser environment and should handle cases where it might be called in a non-browser context gracefully.

  5. Script Loading Completion: Provide a way to know when the script has finished loading and is ready to use.

Test Cases

  • When initialized with a valid tracking ID "UA-12345-1", the utility loads the Google Analytics script from the correct CDN URL @test
  • When duplicate detection is enabled and a Google Analytics script already exists, no additional script is loaded @test
  • When duplicate detection is disabled, the script loads regardless of existing analytics scripts @test
  • When called in a non-browser environment (no window or document), the utility does not throw errors @test

Implementation

@generates

API

/**
 * Loads Google Analytics script dynamically
 * @param {Object} config - Configuration object
 * @param {string} config.id - Google Analytics tracking ID (e.g., "UA-12345-1")
 * @param {boolean} [config.checkDuplicatedScript=false] - Whether to check for existing GA scripts
 * @returns {Promise<void>} Resolves when script is loaded
 */
function loadAnalytics(config) {
  // IMPLEMENTATION HERE
}

module.exports = {
  loadAnalytics
};

Dependencies { .dependencies }

@nuxtjs/google-analytics { .dependency }

Provides Google Analytics integration patterns and script loading utilities.

@satisfied-by