Change Analytics event element

index.html

@@ -10,36 +10,37 @@ <h2 id="test">Working examples</h2>
 
 <div class="alert alert-info" role="alert">
 	<h3>Before you test</h3>
-	<p>To properly test pages below, such as getting results back from the search engine, please make sure you <a href="test/index.html">have a valid token</a>.</p>
+	<p>To properly test pages below, such as getting results back from the search engine, please make sure you <a href="tests/index.html">have a valid token</a>.</p>
 </div>
 
 <h3>Regular pages</h3>
 <ul>
-	<li><a href="test/srb-en.html">Basic search page</a></li>
-	<li><a href="test/sra-en.html">Advanced search page</a></li>
-	<li><a href="test/src-en.html">Contextual search page</a></li>
-	<li><a href="test/no-qs-en.html">Search without Query Suggestions (QS)</a></li>
-	<li><a href="test/qs-en.html">Search with custom QS configuration</a></li>
-	<li><a href="test/srb-fr.html" hreflang="fr" lang="fr">Page de recherche (base)</a></li>
-	<li><a href="test/sra-fr.html" hreflang="fr" lang="fr">Page de recherche (avancée)</a></li>
-	<li><a href="test/src-fr.html" hreflang="fr" lang="fr">Page de recherche (contextuelle)</a></li>
-	<li><a href="test/no-qs-fr.html" hreflang="fr" lang="fr">Recherche sans Suggestions de termes</a></li>
-	<li><a href="test/qs-fr.html" hreflang="fr" lang="fr">Recherche avec configuration de Suggestions personnalisée</a></li>
+	<li><a href="tests/srb-en.html">Basic search page</a></li>
+	<li><a href="tests/sra-en.html">Advanced search page</a></li>
+	<li><a href="tests/src-en.html">Contextual search page</a></li>
+	<li><a href="tests/no-qs-en.html">Search without Query Suggestions (QS)</a></li>
+	<li><a href="tests/qs-en.html">Search with custom QS configuration</a></li>
+	<li><a href="tests/srb-fr.html" hreflang="fr" lang="fr">Page de recherche (base)</a></li>
+	<li><a href="tests/sra-fr.html" hreflang="fr" lang="fr">Page de recherche (avancée)</a></li>
+	<li><a href="tests/src-fr.html" hreflang="fr" lang="fr">Page de recherche (contextuelle)</a></li>
+	<li><a href="tests/no-qs-fr.html" hreflang="fr" lang="fr">Recherche sans Suggestions de termes</a></li>
+	<li><a href="tests/qs-fr.html" hreflang="fr" lang="fr">Recherche avec configuration de Suggestions personnalisée</a></li>
 </ul>
 
 <h3>Advanced tests</h3>
 <ul>
-	<li><a href="test/election.html">Elections Canada sample</a></li>
-	<li><a href="test/budget.html">Budget sample</a></li>
-	<li><a href="test/gazette.html">Canada Gazette sample</a></li>
-	<li><a href="test/template.html">Custom summary and results templates</a></li>
-	<li><a href="test/no-token.html">Error message when no access token provided</a></li>
-	<li><a href="test/newsadv-en.html">News Advanced Search user interface</a></li>
-	<li><a href="test/newsadv-fr.html" hreflang="fr" lang="fr">Interface utilisateur de la recherche avancée d'actualités</a></li>
-	<li><a href="test/qs-en-topright.html">Top right search box</a></li>
-	<li><a href="test/qs-fr-topright.html" hreflang="fr" lang="fr">Boîte de recherche en haut à droite</a></li>
-	<li><a href="test/qs-en-topright-custom.html">Top right search box with custom configuration</a></li>
-	<li><a href="test/qs-fr-topright-custom.html" hreflang="fr" lang="fr">Boîte de recherche en haut à droite avec configuration personnalisée</a></li>
+	<li><a href="tests/election.html">Elections Canada sample</a></li>
+	<li><a href="tests/budget.html">Budget sample</a></li>
+	<li><a href="tests/gazette.html">Canada Gazette sample</a></li>
+	<li><a href="tests/template.html">Custom summary and results templates</a></li>
+	<li><a href="tests/no-token.html">Error message when no access token provided</a></li>
+	<li><a href="tests/newsadv-en.html">News Advanced Search user interface</a></li>
+	<li><a href="tests/newsadv-fr.html" hreflang="fr" lang="fr">Interface utilisateur de la recherche avancée d'actualités</a></li>
+	<li><a href="tests/qs-en-topright.html">Top right search box</a></li>
+	<li><a href="tests/qs-fr-topright.html" hreflang="fr" lang="fr">Boîte de recherche en haut à droite</a></li>
+	<li><a href="tests/qs-en-topright-custom.html">Top right search box with custom configuration</a></li>
+	<li><a href="tests/qs-fr-topright-custom.html" hreflang="fr" lang="fr">Boîte de recherche en haut à droite avec configuration personnalisée</a></li>
+	<li><a href="tests/analytics.html">Test custom analytics event used by AEM</a></li>
 </ul>
 <hr>
 <p>Please <a href="https://github.com/ServiceCanada/search-ui">refer to the README documentation</a> to get more information on the GC Search UI.</p>

src/connector.js

@@ -611,7 +611,7 @@ function initEngine() {
 
 						// Event used to expose a data layer when search events occur; useful for analytics
 						const searchEvent = new CustomEvent( "searchEvent", { detail: requestContent } );
-						document.dispatchEvent( searchEvent );
+						baseElement.dispatchEvent( searchEvent );
 					}
 					if ( clientOrigin === 'searchApiFetch' ) {
 						let requestContent = JSON.parse( request.body );

tests/analytics.html

@@ -0,0 +1,58 @@
+---
+title: Basic search page for Governement of Canada with test for analytics
+description: Demo page for the Canada.ca Search UI Basic with test for analytics
+lang: en
+altLangPage: srb-fr.html
+nositesearch: true
+pageclass: page-type-search
+pageType: recherche
+share: false
+deptfeature: false
+dateModified: 2024-06-05
+breadcrumbs:
+- title: "GC Search UI"
+  link: "../index.html"
+css: "../src/connector.css"
+script:
+- src: "assets/token.js"
+- src: "../src/connector.js"
+  type: module
+---
+
+<!--FORM-->
+<script type="text/javascript">
+	document.addEventListener( "DOMContentLoaded", () => {   
+		const baseElement = document.querySelector( '[data-gc-search]' );
+		baseElement.addEventListener( "searchEvent", ( event ) => {
+			console.log( "Search event received with data:", event.detail );
+		} );
+	} );
+</script>
+
+<!--FORM-->
+<form class="mrgn-tp-sm" role="search">
+	<div class="input-group mrgn-tp-lg">
+		<label class="wb-inv" for="sch-inp-ac">Search Government of Canada websites</label>
+		<input id="sch-inp-ac" class="form-control" value="" name="q" autocomplete="off" spellcheck="false" type="search" aria-describedby="gc-pi">
+		<span class="input-group-btn">
+		<button class="btn btn-primary btn-small" type="submit"> <span class="glyphicon-search glyphicon" aria-hidden="true"></span> <span class="wb-inv">Search</span> </button>
+		</span>
+	</div>
+	<p id="gc-pi" class="mrgn-tp-md">Don’t include personal information (telephone, email, SIN, financial, medical, or work details).</p>
+</form>
+
+<!--RESULTS-->
+<div data-gc-search='{
+	"searchHub": "canada-gouv-public-websites",
+	"organizationId": "employmentandsocialdevelopmentcanadanonproduction14o5d9wry",
+	"accessToken":"{{ site.data.token.API_KEY }}",
+	"originLevel3": "/en/sr/srb.html"
+}'></div>
+<p class="text-center small"><a href="sra-en.html">Perform an advanced search</a></p>
+
+<!--DEMO-EXPECTATIONS-->
+<h2>Expected output for the result section</h2>
+<details>
+	<summary>Output for Results section</summary>
+	[To be completed, see Connector.js for reference until then]
+</details>