test.html
Overview
test.html is a sample HTML document primarily focused on demonstrating integration with Ezoic's advertising and consent management scripts. The file includes:
Embedded JavaScript for managing user consent under GDPR/CCPA frameworks.
Dynamic script loading based on consent categories.
Cookie management tied to consent states.
Ezoic-specific analytics and ad configuration.
Sample HTML content with headings, paragraphs, lists, and a blockquote for layout demonstration.
This file serves as a template or test page showcasing how advanced consent and ad management can be embedded into a simple HTML page while preserving content structure and SEO elements like canonical links and base URLs.
Detailed Explanation of Key Components
1. Consent Management and Script Injection
__ezHttpConsent.setByCat(src, tagType, attributes, category, force)
Purpose: Conditionally injects external scripts based on consent category flags.
Parameters:
src (string): URL of the script to be added.
tagType (string): HTML tag type, typically
"script".attributes (array of objects): List of attribute key-value pairs to set on the created element.
category(string): Consent category to check for permission (e.g.,"store_info","understand_audiences").force(boolean): Whether to force script injection regardless of consent.
Behavior:
Checks if consent is loaded and category is allowed.
Creates a script element with specified attributes and inserts it before the first existing script tag.
Falls back to forcing the script if consent data is unavailable.
Usage Example:
__ezHttpConsent.setByCat( "https://example.com/script.js", "script", [{ async: "true" }], "store_info", false );
2. Consent Data Handling
getEzConsentData()
Purpose: Returns a Promise that resolves when consent data (
ezTcfConsent) is available.Returns:
Promise<Object>resolving withezTcfConsentobject.Behavior: Listens to a custom
"ezConsentEvent"DOM event and resolves with the event's consent detail.Usage Example:
getEzConsentData().then(function(consent) { console.log("Consent data loaded:", consent); });
3. Cookie Management Based on Consent
_setEzCookies(ezConsentData)
Purpose: Sets specific cookies if the corresponding consent categories are approved.
Parameters:
ezConsentData(object): Consent object with boolean flags per category.
Behavior:
Iterates over predefined cookies linked to categories.
Sets each cookie if the user consent is loaded and category consent is
true.
Cookies Managed: Examples include
ezosuibasgeneris-1,ezopvc_176527,ezoab_176527, etc., each tied to specific consent categories like"understand_audiences"or"store_info".Usage: Called automatically once consent data is available.
4. Ezoic Queue System (__ez.queue)
Purpose: Manages deferred loading and execution of scripts and functions based on dependency and timing.
Key Functions:
addFile(name, path, async, blockedBy, isBlock, defer, deleteWhenComplete, proceedIfError): Adds a script file to the queue.addFunc(name, funcName, params, isBlock, blockedBy, deleteWhenComplete, proceedIfError): Adds a function to the queue.processAll(): Processes all queued items.
Implementation Details:
Tracks initialization, completion, errors, and dependencies.
Supports time-delayed loading.
Usage Example:
__ez.queue.addFile('exampleScript', '/path/to/script.js', true, [], true, false, false, false); __ez.queue.addFunc('initFunc', 'initFunctionName', null, true, ['exampleScript'], false, false);
5. Analytics Integration
productAnalytics()
Purpose: Collects and sends product-related analytics data to a backend endpoint.
Behavior:
Gathers predefined metadata (
_ezaqobject) such as URL, page view ID, visit UUID, A/B test ID.Includes cookies with specific prefixes (
active_template,ez,lp_).Sends data via an XMLHttpRequest POST to
/ezais/analytics?cb=1.On success, dynamically adds returned analytics scripts to the document.
Usage: Automatically added to the Ezoic queue to execute after base analytics script readiness.
6. Consent Event Handling and Google Consent Integration
The script listens for consent changes through the
__tcfapiinterface (Transparency & Consent Framework API).Updates the
ezTcfConsentobject with user consent states for various categories.Emits custom events to notify the page about consent changes.
Integrates with Google
gtagto update consent states for Google services.Controls ad reloading through Ezoic's ad slot APIs based on consent.
7. HTML Content Structure
Document includes typical HTML structural elements:
<head>with metadata, base URL, canonical link, and scripts.<body>with sample textual content:Heading (
<h1>).Paragraphs and ordered/unordered lists.
A blockquote with a citation.
Base URL and canonical links are properly set for SEO.
Important Implementation Details and Algorithms
Consent-driven Script Loading: Scripts are loaded dynamically based on the user's consent categories to comply with privacy regulations.
Event-driven Consent Updates: The system relies on the
"ezConsentEvent"to asynchronously update and react to user consent changes.Script and Function Queueing: The queue system ensures correct loading order, dependency resolution, and error handling for scripts and functions.
Cookie Setting Logic: Cookies related to personalization and analytics are only set if consent is granted, preventing unauthorized data tracking.
Graceful Fallbacks: If consent data is unavailable or the consent API is missing, scripts and cookies still load with forced consent flags to maintain functionality.
Google Consent Sync: Synchronizes Ezoic consent states with Google’s consent framework to ensure consistent user privacy settings across ad platforms.
Interaction with Other Parts of the System or Application
Ezoic Platform: This file is tightly coupled with Ezoic’s ad delivery and analytics systems. It uses Ezoic’s global objects (
__ez,_ezaq,ezTcfConsent).Consent Management Framework (TCF): Interfaces with the IAB TCF API (
__tcfapi) for GDPR compliance.Ad Slots and Bidding Systems: Coordinates with ad slot objects and Amazon bidding scripts to reload ads based on current consent.
Backend Analytics Endpoint: Sends collected data to
/ezais/analyticsfor server-side processing.External Scripts: Dynamically loads other JavaScript files managed by Ezoic (e.g.,
/detroitchicago/boise.js).Browser Storage: Checks and clears specific localStorage entries related to Google AMA config.
Visual Diagram
Below is a Mermaid flowchart illustrating the main functions and their relationships in test.html related to consent, script loading, and analytics:
flowchart TD
A[Page Load] --> B[getEzConsentData()]
B -->|Consent Data Loaded| C[__ezHttpConsent.setByCat()]
B -->|Consent Data Loaded| D[_setEzCookies()]
B -->|Consent Data Loaded| E[__ez.queue.addFunc(productAnalytics)]
C --> F[Dynamic Script Injection]
D --> G[Set Cookies for Consent Categories]
E --> H[Send Analytics Data]
A --> I[__ez.queue.addFile() & addFunc()]
I --> J[Deferred Script & Function Execution]
J --> F
E --> K[Add Analytics Script to Head]
F --> L[Page Interaction & Ad Reload]
L --> M[Ad Slots Refresh Based on Consent]
Summary of Key Usage Patterns
The page initializes consent data retrieval on load.
Based on consent, scripts and cookies are conditionally injected.
Analytics data is collected and sent asynchronously.
Scripts and functions are queued to maintain order and dependencies.
Consent changes trigger ad reloads and consent updates across platforms.