JavaScript SDK

When installing Qwary's intercept JavaScript SDK, we highly recommend installing the JavaScript code snippet. This approach guarantees that you always have the most up-to-date version of our SDK, alleviating the burden on your engineering team. In addition, with this method, they won't need to manually retrieve and deploy updates whenever Qwary releases a new SDK version. Consequently, you will seamlessly gain access to the latest features available on the most recent SDKs.

Obtain SDK API Key

Log into your Qwary account and go to Settings --> Resources --> Install SDK --> Copy SDK API Key.

Install Qwary

To enable Qwary's user tracking on specific pages of your website, simply add the following JavaScript snippet to each of those pages before the closing </body> tag. You can paste the snippet anywhere within the page's code. Remember to replace the placeholder API_KEY with the API key you obtained in the previous step.

Install & initialize for visitors

<script type="text/javascript">	           
var app_id = "ADD_YOUR_API_KEY_HERE";
window.qwSettings = {
appId : app_id
}
!function(){if(!window.qwTracking){window.qwTracking=Object.assign({},window.qwTracking,{queue:window.qwTracking&&window.qwTracking.queue?window.qwTracking.queue:[],track:function(t){this.queue.push({type:"track",props:t})},init:function(t){this.queue.push({type:"init",props:t})}}),window.qwSettings;var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://static.qwary.com/resources/sdk/intercept/qw.intercept.sdk.v4.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};"complete"===document.readyState?t():window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}(),qwTracking.init(qwSettings);</script>

Install & initialize with user information

<script type="text/javascript">	 	            
var app_id =  "ADD_YOUR_API_KEY_HERE";
window.qwSettings = {
	appId : app_id,
	identifier : 'email',
	contact :{ //you can also populate custom attributes in this
		firstName : '%CONTACT_FIRST_NAME%',
		lastName :  '%CONTACT_LAST_NAME%',
		email:  '%CONTACT_EMAIL_NAME%'
		/*additional fieldName: fieldValue*/
	}
}
!function(){if(!window.qwTracking){window.qwTracking=Object.assign({},window.qwTracking,{queue:window.qwTracking&&window.qwTracking.queue?window.qwTracking.queue:[],track:function(t){this.queue.push({type:"track",props:t})},init:function(t){this.queue.push({type:"init",props:t})}}),window.qwSettings;var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://static.qwary.com/resources/sdk/intercept/qw.intercept.sdk.v4.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};"complete"===document.readyState?t():window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}(),qwTracking.init(qwSettings);</script>

Create a new contact field.

You can pass additional contact fields when in window.qwSetttings --> contact object. To create a new contact field, go to Account Settings --> Contact fields and click the 'Add field' button.

Contact Fields

To create a new contact field,

1. Enter field name.

2. Select the field's data type. Qwary supports string, number, and date data types for contact fields.

3. Click 'Save'

You can also add a contact to the new contact list with SDK. Below is the code snippet; replace 'LIST_NAME_1' with the contact list name to which you want to add the contact. You can also pass more than one contact list in the list field.

<script type="text/javascript">	 	            
var app_id =  "ADD_YOUR_API_KEY_HERE";
window.qwSettings = {
	appId : app_id,
	identifier : 'email',
	contact :{ //you can also populate custom attributes in this
		firstName : '%CONTACT_FIRST_NAME%',
		lastName :  '%CONTACT_LAST_NAME%',
		email:  '%CONTACT_EMAIL_NAME%',
		list : {
			'LIST_NAME_1',
			/*additional list names*/
		}
		/*additional fieldName: fieldValue*/
	}
}
</script>
!function(){if(!window.qwTracking){window.qwTracking=Object.assign({},window.qwTracking,{queue:window.qwTracking&&window.qwTracking.queue?window.qwTracking.queue:[],track:function(t){this.queue.push({type:"track",props:t})},init:function(t){this.queue.push({type:"init",props:t})}}),window.qwSettings;var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://static.qwary.com/resources/sdk/intercept/qw.intercept.sdk.v4.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};"complete"===document.readyState?t():window.attachEvent?window.attachEvent("onload",t):window.addEventListener("load",t,!1)}}(),qwTracking.init(qwSettings);</script>

Verify Installation

Here are the steps to follow to verify if the Qwary javascript SDK installation is functioning correctly:

1. Load a page from your website or web app where you have installed the Qwary intercept SDK.

2. Open the developer console in your web browser.

3. Navigate to the "Network" tab within the developer console.

4. Look for a network request named "intercept" that targets the URL: "https://static.qwary.com/resources/sdk/intercept/".

5. Check the status code of the request. For example, if the status code is 200 or 304, it indicates that your installation is working correctly.

Logout

For precise user association and to prevent inaccurate activity tracking, it is highly recommended to log out of Qwary when a user logs out of your webpage. Utilizing the logout() function upon user logout effectively prevents new activities from being mistakenly attributed to the incorrect user. However, it's essential to be aware that if you invoke logout() on an unauthenticated user, Qwary will generate a new contact profile for them. Consequently, this newly created contact will be counted separately towards your MTU (Monthly Tracked Users) limit.

<script>
qwTracking.logout();
</script>

Event Tracking

Qwary employs event triggers to showcase in-product surveys after a user completes a specific action. These triggers can also be filtered to target users who have previously performed the action. After successfully installing the Qwary SDK, the subsequent step involves configuring event tracking to enable the triggering of surveys. Qwary offers two distinct types of events, auto-trigger and manual-trigger events, which effectively initiate and filter your projects.

For more information on events, see events documentation.