A JavaScript Event Source enables tracking and sending of user interactions directly from a website or web application. This is achieved by embedding a JavaScript snippet into the website’s code. The snippet loads a lightweight analytics library that listens for predefined events such as page views, button clicks, and form submissions. These events are then transmitted to the messaging platform for further processing.
Use JavaScript Event Sources as an example to:
Track page views as users navigate a website.
Capture button clicks, such as “Sign Up” or “Purchase” interactions.
Monitor form submissions to collect user input, like email addresses or feedback.
Identify user sessions and behaviors to improve customer engagement.
Often, when events occur, you may want to perform an action in response. JavaScript enables you to execute code dynamically when events are detected.
Enter a name for the JavaScript event source and click OK.
On the details page, follow the configuration instructions.
Copy the JavaScript snippet provided in the configuration page.
Paste the JavaScript snippet inside the <head> section of your website. Example:
<head><title>My Website</title><script>!function(){vari="analytics",analytics=window[i]=window[i]||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","screen","once","off","addSourceMiddleware","on","setAnonymousId"];analytics.factory=function(e){returnfunction(){if(window[i].initialized)returnwindow[i][e].apply(window[i],arguments);varn=Array.prototype.slice.call(arguments);if(["track","screen","alias","group","page","identify"].indexOf(e)>-1){varc=document.querySelector("link[rel='canonical']");n.push({__t:"bpc",c:c&&c.getAttribute("href")||void0,p:location.pathname,u:location.href,s:location.search,t:document.title,r:document.referrer})}n.unshift(e);analytics.push(n);returnanalytics}};for(varn=0;n<analytics.methods.length;n++){varkey=analytics.methods[n];analytics[key]=analytics.factory(key)}analytics.load=function(key,n){vart=document.createElement("script");t.type="text/javascript";t.async=!0;t.setAttribute("data-global-msg-analytics-key",i);t.src="https://messaging-staging.didww.com/analytics/cdn/"+key+"/analytics.min.js";varr=document.getElementsByTagName("script")[0];r.parentNode.insertBefore(t,r);analytics._loadOptions=n};analytics._writeKey="your_writeKey";;analytics.SNIPPET_VERSION="5.2.0";analytics._cdn="https://messaging.didww.com";analytics.load("your_writeKey");analytics.page();}}();</script></head>
Note
If you copy the snippet from the documentation page, instead of the messaging platform, replace your_writeKey with the actual writeKey provided in your Event Source configuration.
The writeKey is unique per event source and is required for data tracking.
Open your website and refresh the page. This will automatically send a Page event.
Go back to the Event Source Details page and click Check Connection to confirm that data is being received.
JavaScript event tracking involves listening for user interactions, either through built-in event handlers or analytics libraries. The specific events tracked depend on how the tracking is implemented and how the website’s elements are structured.
To effectively track events, consider these two key factors:
Code implementation
Event tracking can be implemented in JavaScript using native event listeners or third-party analytics tools, for example:
Use analytics.page(); to automatically track page views.
Use analytics.track("ButtonClicked"); to track button clicks.
Use addEventListener to manually capture events before sending them to the analytics library.
Website structure
The structure of your website affects how events are tracked and how easily they can be managed:
The way HTML elements are named and structured determines what data can be collected. Assigning clear and unique identifiers (IDs and classes) to elements ensures accurate tracking.
Properly structured elements make it easier to attach event listeners and send meaningful data to analytics platforms.
Track form submissions by detecting when a user submits a form and sending the event data to the analytics platform. This ensures user interactions with important forms are recorded for insights.
document.getElementById("signup-form").addEventListener("submit",function(event){event.preventDefault();// Prevent default form submissionwindow.analytics.track("Sign Up Form Submitted",{form_name:"Newsletter Signup",user_email:document.getElementById("email-input").value,page_url:window.location.href,referrer:document.referrer});});
In this example, the script tracks when a user submits the form and records key details:
It captures when the form with id="signup-form" is submitted.
It sends a SignUpFormSubmitted event using window.analytics.track().
It includes additional details such as form name, user email, page URL, and referrer information.
button, and choose Details, or click the source name.
