Embed Events

november 2024 while embed events will continue to work, we recommend setting up navattic js docid\ wai87iuk zgdkoy4kn1ef instead for the most up to date capabilities overview your navattic demo may use one of these visitor or account identification methods , although it is not required event based analytics platforms are used to analyze how users interact with your website, and may receive navattic events similar to how they receive other website events navattic demos emit events about user interaction which step they're on, if they complete a form, if they click a cta button, etc when your demo is embedded on a page, our universal event integration allows you to easily send those events to any third party service that can accept them like amplitude, posthog, and mixpanel use events based platforms to answer questions like how many users or sessions engage with my navattic demo? where in my website flow do users engage with my navattic demos? which of my navattic demos lead to the most conversions? note if you're not sure what counts as an event based platform, they usually ask you to install a script on your website track or analyze actions taken by your users read the blog 3 ways to use navattic embed events with event platforms navattic events event data for each navattic product demo includes navattic event name example description view step (view step) example a flow step is viewed start flow (start flow) example a user starts a flow complete flow (complete flow) example a user reached the last step of a flow or completed a "complete flow" step start checklist (start checklist) example a user loads a checklist for the first time open checklist (open checklist) example a user expands a checklist close checklist (close checklist) example a user clicks "x" to close a checklist or starts a flow complete task (complete task) example a user completed a task in a checklist converted (converted) example a user completed a step tagged "mark as converted" navigate (navigate) example a user clicked a button with the click action "navigate to url" identify (identify user) example a form has been filled out in the demo that can identify the user engage (engage) example a user makes it past the first step of a flow the exact event shape is as follows { 	// event can be one of 	// view step 	// start flow 	// complete flow 	// start checklist 	// open checklist 	// close checklist 	// identify user 	// converted 	// navigate 	// complete task 	type "view step", 	 	// current project 	project { 	 id "id of project", 	 name "name of project", 	}, 	 	// current flow 	flow { 	 id "id of current flow", 	 name "name of current flow", 	}, 	 	// current step 	step { 	 name "name of current step", 	 indx 0, // steps start counting at 0! 	}, 	 	// note checklist can be undefined if the project 	// has no checklist 	checklist { 	 id "id of checklist", 	 name "name of checklist", 	}, 	 	// current task (only defined if on checklist) 	task { 	 title "title of task", 	 id "id of task", 	} 	 	// list of ids of completed tasks 	completions \[" ", " "], 	 	// url that the visitor clicked 	// only populated if event is navigate 	url "", 	// shows up at https //app navattic com/your workspace/customers/{customerid} 	customerid "id of current visitor", 	// a session is scoped to a browser tab, so any action 	// performed in that tab is tied to a session 	sessionid "id of current session", 	 	// technical metadata about the user (ex browser, device, etc) 	clientsidemetadata , 	 	// attributes that have been identified from the user, grouped 	// by the source they come from (i e "form") 	eventattributes { 	 // the source can be one of 	 // form 	 // identify 	 // query params 	 // share link 	 // enrichment 	 // other 	 "form" { // example attributes "user email" "steve\@apple com", "company fullname" "steve jobs" }, "query params" { // example attributes "utm source" "linkedin", }, } } installation copy the below snippet and add it below the header of your website this js snippet should be installed after your existing third party script tags \<script> window\ navatticqueue=\[],window\ navattic=new proxy({},{get\ function n(t,u,e){return function(){for(var n=arguments length,t=array(n),e=0;e\<n;e++)t\[e]=arguments\[e];return navatticqueue push({function\ u,arguments\ t})}}}); \</script> \<script src="https //js navattic com/embed events js">\</script> implementations send navattic events to third party systems the installed script has some tools to help your website communicate bi directionally with the embedded demo to send navattic event data to other tools such as posthog, amplitude , mixpanel , or segment , add a script like the following \<script> 	navattic onevent(function(eventdata){ 	 posthog capture("navattic event", eventdata); // posthog example 	 amplitude track("navattic event", eventdata); // amplitude example 	 mixpanel track("navattic event", eventdata); // mixpanel example 	 analytics track("navattic event", eventdata); // segment example 	}); \</script> once the js snippet is installed on your website, y ou should now see a new event named "navattic event" in your third party platform be sure to follow the best practices provided by your third party platform for analyzing and organizing your events tip for the most helpful tracking, give each demo and flow an informative name this will help organize your data in third party platforms pass identification information into navattic if you're generating identification information from another source like a third party form, reveal api, or internally, you can pass that data into an embedded navattic iframe to identify each visitor after installing the embed events javascript snippet, use our navattic identify function to pass information into navattic navattic identify({ "user fullname" george washington, "user email" gw\@foundingfathers net // any other fields you'd like to pass in go here! }) go to navattic docs https //docs navattic com/