countly-sdk-web 23.12.4 → 23.12.5

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 23.12.5
+- Mitigated an issue where the SDK was not emptying the async queue explicity when closing a browser
+
 ## 23.12.4
 - Enhanced userAgentData detection for bot filtering
 

package/cypress/integration/async_queue.js

@@ -0,0 +1,329 @@
+/* eslint-disable cypress/no-unnecessary-waiting */
+/* eslint-disable require-jsdoc */
+var Countly = require("../../lib/countly");
+// import * as Countly from "../../dist/countly_umd.js";
+var hp = require("../support/helper.js");
+
+function initMain(clear) {
+    Countly.init({
+        app_key: "YOUR_APP_KEY",
+        url: "https://your.domain.count.ly",
+        debug: true,
+        test_mode: true,
+        clear_stored_id: clear
+    });
+}
+
+function event(number) {
+    return {
+        key: `event_${number}`,
+        segmentation: {
+            id: number
+        }
+    };
+}
+
+// All the tests below checks if the functions are working correctly
+// Currently tests for 'beforeunload' and 'unload' events has to be done manually by using the throttling option of the browser
+describe("Test Countly.q related methods and processes", () => {
+    // For this tests we disable the internal heatbeat and use processAsyncQueue and sendEventsForced
+    // So we are able to test if those functions work as intented:
+    // processAsyncQueue should send events from .q to event queue
+    // sendEventsForced should send events from event queue to request queue (it also calls processAsyncQueue)
+    it("Check processAsyncQueue and sendEventsForced works as expected", () => {
+        hp.haltAndClearStorage(() => {
+            // Disable heartbeat and init the SDK
+            Countly.noHeartBeat = true;
+            initMain();
+            cy.wait(1000);
+
+            // Check that the .q is empty
+            expect(Countly.q.length).to.equal(0);
+
+            // Add 4 events to the .q
+            Countly.q.push(["add_event", event(1)]);
+            Countly.q.push(["add_event", event(2)]);
+            Countly.q.push(["add_event", event(3)]);
+            Countly.q.push(["add_event", event(4)]);
+            // Check that the .q has 4 events
+            expect(Countly.q.length).to.equal(4);
+
+            cy.fetch_local_event_queue().then((rq) => {
+                // Check that events are still in .q
+                expect(Countly.q.length).to.equal(4);
+
+                // Check that the event queue is empty
+                expect(rq.length).to.equal(0);
+
+                // Process the .q (should send things to the event queue)
+                Countly._internals.processAsyncQueue();
+
+                // Check that the .q is empty
+                expect(Countly.q.length).to.equal(0);
+
+                cy.fetch_local_request_queue().then((rq_2) => {
+                    // Check that nothing sent to request queue
+                    expect(rq_2.length).to.equal(0);
+                    cy.fetch_local_event_queue().then((eq) => {
+                        // Check that events are now in event queue
+                        expect(eq.length).to.equal(4);
+
+                        // Send events from event queue to request queue
+                        Countly._internals.sendEventsForced();
+                        cy.fetch_local_event_queue().then((eq_2) => {
+                            // Check that event queue is empty
+                            expect(eq_2.length).to.equal(0);
+                            cy.fetch_local_request_queue().then((rq_3) => {
+                                // Check that events are now in request queue
+                                expect(rq_3.length).to.equal(1);
+                                const eventsArray = JSON.parse(rq_3[0].events);
+                                expect(eventsArray[0].key).to.equal("event_1");
+                                expect(eventsArray[1].key).to.equal("event_2");
+                                expect(eventsArray[2].key).to.equal("event_3");
+                                expect(eventsArray[3].key).to.equal("event_4");
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+    // This test is same with the ones above but this time we use change_id to trigger processAsyncQueue
+    it("Check changing device ID without merge empties the .q", () => {
+        hp.haltAndClearStorage(() => {
+            // Disable heartbeat and init the SDK
+            Countly.noHeartBeat = true;
+            Countly.q = [];
+            initMain();
+            cy.wait(1000);
+
+            // Check that the .q is empty
+            expect(Countly.q.length).to.equal(0);
+
+            // Add 4 events to the .q
+            Countly.q.push(["add_event", event(1)]);
+            Countly.q.push(["add_event", event(2)]);
+            Countly.q.push(["add_event", event(3)]);
+            Countly.q.push(["add_event", event(4)]);
+            // Check that the .q has 4 events
+            expect(Countly.q.length).to.equal(4);
+
+            cy.fetch_local_event_queue().then((rq) => {
+                // Check that the event queue is empty
+                expect(rq.length).to.equal(0);
+
+                // Check that events are still in .q
+                expect(Countly.q.length).to.equal(4);
+
+                // Trigger processAsyncQueue by changing device ID without merge
+                Countly.change_id("new_user_id", false);
+
+                // Check that the .q is empty
+                expect(Countly.q.length).to.equal(0);
+                cy.fetch_local_event_queue().then((eq) => {
+                    // Check that event queue has new device ID's orientation event
+                    expect(eq.length).to.equal(1);
+                    expect(eq[0].key).to.equal("[CLY]_orientation");
+                    cy.fetch_local_request_queue().then((rq_2) => {
+                        // Check that events are now in request queue (second request is begin session for new device ID)
+                        expect(rq_2.length).to.equal(2);
+                        const eventsArray = JSON.parse(rq_2[0].events);
+                        expect(eventsArray[0].key).to.equal("event_1");
+                        expect(eventsArray[1].key).to.equal("event_2");
+                        expect(eventsArray[2].key).to.equal("event_3");
+                        expect(eventsArray[3].key).to.equal("event_4");
+                        // check begin session
+                        expect(rq_2[1].begin_session).to.equal(1);
+                    });
+                });
+            });
+        });
+    });
+    // This test checks if clear_stored_id set to true during init we call processAsyncQueue (it sends events from .q to event queue and then to request queue)
+    it("Check clear_stored_id set to true empties the .q", () => {
+        hp.haltAndClearStorage(() => {
+            // Disable heartbeat
+            Countly.noHeartBeat = true;
+            Countly.q = [];
+            localStorage.setItem("YOUR_APP_KEY/cly_id", "old_user_id"); // Set old device ID for clear_stored_id to work
+
+            // Add 4 events to the .q
+            Countly.q.push(["add_event", event(1)]);
+            Countly.q.push(["add_event", event(2)]);
+            Countly.q.push(["add_event", event(3)]);
+            Countly.q.push(["add_event", event(4)]);
+
+            // Check that the .q has 4 events
+            expect(Countly.q.length).to.equal(4);
+
+            // Init the SDK with clear_stored_id set to true
+            initMain(true);
+            cy.wait(1000);
+
+            // Check that the .q is empty
+            expect(Countly.q.length).to.equal(0);
+
+            cy.fetch_local_event_queue().then((rq) => {
+                // Check that the event queue is empty because processAsyncQueue sends events from .q to event queue and then to request queue
+                expect(rq.length).to.equal(0);
+
+                cy.fetch_local_request_queue().then((rq_2) => {
+                    // Check that events are now in request queue
+                    expect(rq_2.length).to.equal(1);
+                    const eventsArray = JSON.parse(rq_2[0].events);
+                    expect(eventsArray[0].key).to.equal("event_1");
+                    expect(eventsArray[1].key).to.equal("event_2");
+                    expect(eventsArray[2].key).to.equal("event_3");
+                    expect(eventsArray[3].key).to.equal("event_4");
+                });
+            });
+        });
+    });
+    // This test checks if calling user_details triggers processAsyncQueue (it sends events from .q to event queue and then to request queue)
+    it("Check sending user details empties .q", () => {
+        hp.haltAndClearStorage(() => {
+            // Disable heartbeat and init the SDK
+            Countly.noHeartBeat = true;
+            Countly.q = [];
+            initMain();
+            cy.wait(1000);
+
+            // Check that the .q is empty
+            expect(Countly.q.length).to.equal(0);
+
+            // Add 4 events to the .q
+            Countly.q.push(["add_event", event(1)]);
+            Countly.q.push(["add_event", event(2)]);
+            Countly.q.push(["add_event", event(3)]);
+            Countly.q.push(["add_event", event(4)]);
+            // Check that the .q has 4 events
+            expect(Countly.q.length).to.equal(4);
+
+            cy.fetch_local_event_queue().then((rq) => {
+                // Check that the event queue is empty
+                expect(rq.length).to.equal(0);
+
+                // Check that events are still in .q
+                expect(Countly.q.length).to.equal(4);
+
+                // Trigger processAsyncQueue by adding user details
+                Countly.user_details({ name: "test_user" });
+
+                // Check that the .q is empty
+                expect(Countly.q.length).to.equal(0);
+                cy.fetch_local_event_queue().then((eq) => {
+                    // Check that event queue is empty
+                    expect(eq.length).to.equal(0);
+                    cy.fetch_local_request_queue().then((rq_2) => {
+                        // Check that events are now in request queue (second request is user details)
+                        expect(rq_2.length).to.equal(2);
+                        const eventsArray = JSON.parse(rq_2[0].events);
+                        expect(eventsArray[0].key).to.equal("event_1");
+                        expect(eventsArray[1].key).to.equal("event_2");
+                        expect(eventsArray[2].key).to.equal("event_3");
+                        expect(eventsArray[3].key).to.equal("event_4");
+                        // check user details
+                        const user_details = JSON.parse(rq_2[1].user_details);
+                        expect(user_details.name).to.equal("test_user");
+                    });
+                });
+            });
+        });
+    });
+    // This Test checks if calling userData.save triggers processAsyncQueue (it sends events from .q to event queue and then to request queue)
+    it("Check sending custom user info empties .q", () => {
+        hp.haltAndClearStorage(() => {
+            // Disable heartbeat and init the SDK
+            Countly.noHeartBeat = true;
+            Countly.q = [];
+            initMain();
+            cy.wait(1000);
+
+            // Check that the .q is empty
+            expect(Countly.q.length).to.equal(0);
+
+            // Add 4 events to the .q
+            Countly.q.push(["add_event", event(1)]);
+            Countly.q.push(["add_event", event(2)]);
+            Countly.q.push(["add_event", event(3)]);
+            Countly.q.push(["add_event", event(4)]);
+            // Check that the .q has 4 events
+            expect(Countly.q.length).to.equal(4);
+
+            cy.fetch_local_event_queue().then((rq) => {
+                // Check that the event queue is empty
+                expect(rq.length).to.equal(0);
+
+                // Check that events are still in .q
+                expect(Countly.q.length).to.equal(4);
+
+                // Trigger processAsyncQueue by saving UserData
+                Countly.userData.set("name", "test_user");
+                Countly.userData.save();
+
+                // Check that the .q is empty
+                expect(Countly.q.length).to.equal(0);
+                cy.fetch_local_event_queue().then((eq) => {
+                    // Check that event queue is empty
+                    expect(eq.length).to.equal(0);
+                    cy.fetch_local_request_queue().then((rq_2) => {
+                        // Check that events are now in request queue (second request is user details)
+                        expect(rq_2.length).to.equal(2);
+                        const eventsArray = JSON.parse(rq_2[0].events);
+                        expect(eventsArray[0].key).to.equal("event_1");
+                        expect(eventsArray[1].key).to.equal("event_2");
+                        expect(eventsArray[2].key).to.equal("event_3");
+                        expect(eventsArray[3].key).to.equal("event_4");
+                        // check user data
+                        const user_details = JSON.parse(rq_2[1].user_details);
+                        expect(user_details.custom.name).to.equal("test_user");
+                    });
+                });
+            });
+        });
+    });
+    // This test check if the heartbeat is processing the .q (executes processAsyncQueue)
+    it("Check if heatbeat is processing .q", () => {
+        hp.haltAndClearStorage(() => {
+            // init the SDK
+            Countly.q = [];
+            initMain();
+
+            // Check that the .q is empty
+            expect(Countly.q.length).to.equal(0);
+            cy.fetch_local_event_queue().then((eq) => {
+                // Check that the event queue is empty
+                expect(eq.length).to.equal(0);
+                cy.fetch_local_request_queue().then((rq) => {
+                    // Check that the request queue is empty
+                    expect(rq.length).to.equal(0);
+                    // Add 4 events to the .q
+                    Countly.q.push(["add_event", event(1)]);
+                    Countly.q.push(["add_event", event(2)]);
+                    Countly.q.push(["add_event", event(3)]);
+                    Countly.q.push(["add_event", event(4)]);
+                    // Check that the .q has 4 events
+                    expect(Countly.q.length).to.equal(4);
+                    // Wait for heartBeat to process the .q
+                    cy.wait(1500).then(() => {
+                        // Check that the .q is empty
+                        expect(Countly.q.length).to.equal(0);
+                        cy.fetch_local_event_queue().then((eq_2) => {
+                            // Check that event queue is empty as all must be in request queue
+                            expect(eq_2.length).to.equal(0);
+                            cy.fetch_local_request_queue().then((rq_2) => {
+                                // Check that events are now in request queue
+                                expect(rq_2.length).to.equal(1);
+                                const eventsArray = JSON.parse(rq_2[0].events);
+                                expect(eventsArray[0].key).to.equal("event_1");
+                                expect(eventsArray[1].key).to.equal("event_2");
+                                expect(eventsArray[2].key).to.equal("event_3");
+                                expect(eventsArray[3].key).to.equal("event_4");
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+});

package/cypress/integration/bridge_utils.js

@@ -16,7 +16,7 @@ function initMain(name, version) {
 }
 
 const SDK_NAME = "javascript_native_web";
-const SDK_VERSION = "23.12.4";
+const SDK_VERSION = "23.12.5";
 
 // tests
 describe("Bridged SDK Utilities Tests", () => {

package/examples/Angular/main.ts

@@ -8,9 +8,16 @@ import Countly from 'countly-sdk-web';
 
 window.Countly = Countly;
 
+const COUNTLY_SERVER_KEY = "https://your.server.ly";
+const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+  console.warn("Please do not use default set of app key and server url")
+}
+// initializing countly with params
 Countly.init({
-  app_key: "YOUR_APP_KEY",
-  url: "https://your.domain.countly",
+  app_key: COUNTLY_APP_KEY,
+  url: COUNTLY_SERVER_KEY, //your server goes here
   debug: true
 });
 Countly.track_sessions();

package/examples/Symbolication/src/main.js

@@ -1,9 +1,16 @@
 import Countly from "countly-sdk-web";
 
+const COUNTLY_SERVER_KEY = "https://your.server.ly";
+const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+  console.warn("Please do not use default set of app key and server url")
+}
+// initializing countly with params
 Countly.init({
-  app_key: "YOUR_APP_KEY",
+  app_key: COUNTLY_APP_KEY,
+  url: COUNTLY_SERVER_KEY, //your server goes here
   app_version: "1.0",
-  url: "https://your.domain.countly",
   debug: true
 });
 
@@ -26,22 +33,22 @@ Countly.track_forms();
 Countly.track_errors();
 
 //let's cause some errors
-function cause_error(){
-    undefined_function();
+function cause_error() {
+  undefined_function();
 }
 
-window.onload = function() {
-  document.getElementById("handled_error").onclick = function handled_error(){
-      Countly.add_log('Pressed handled button'); 
-      try {
-          cause_error();
-      } catch(err){
-          Countly.log_error(err)
-      }
+window.onload = function () {
+  document.getElementById("handled_error").onclick = function handled_error() {
+    Countly.add_log('Pressed handled button');
+    try {
+      cause_error();
+    } catch (err) {
+      Countly.log_error(err)
+    }
   };
 
-  document.getElementById("unhandled_error").onclick = function unhandled_error(){
-      Countly.add_log('Pressed unhandled button'); 
-      cause_error();
+  document.getElementById("unhandled_error").onclick = function unhandled_error() {
+    Countly.add_log('Pressed unhandled button');
+    cause_error();
   };
 }

package/examples/example_apm.html

@@ -10,10 +10,16 @@
   <script type='text/javascript' src="../plugin/boomerang/boomerang.min.js"></script>
   <script type='text/javascript'>
 
+    const COUNTLY_SERVER_KEY = "https://your.server.ly";
+    const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+    if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+      console.warn("Please do not use default set of app key and server url")
+    }
     // initializing countly with params
     Countly.init({
-      app_key: "YOUR_APP_KEY",
-      url: "https://your.domain.countly", //your server goes here
+      app_key: COUNTLY_APP_KEY,
+      url: COUNTLY_SERVER_KEY, //your server goes here
       debug: true
     })
 

package/examples/example_apm_async.html

@@ -12,14 +12,19 @@
 
 		//provide countly initialization parameters
 		Countly.app_key = "YOUR_APP_KEY";
-		Countly.url = "https://your.domain.countly"; //your server goes here
+		Countly.url = "https://your.server.ly"; //your server goes here
+
+		if (Countly.app_key === "YOUR_APP_KEY" || Countly.url === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
+
 		Countly.debug = true;
 		Countly.loadAPMScriptsAsync = true;
 		// Countly.customSourceBoomerang = "../somewhere/boomerang.min.js";
 		// Countly.customSourceCountlyBoomerang = "../somewhere/countly_boomerang.js";
 
 		//start pushing function calls to queue:
-		
+
 		// track sessions automatically
 		Countly.q.push(['track_sessions']);
 

package/examples/example_async.html

@@ -12,7 +12,11 @@
 
 		//provide countly initialization parameters
 		Countly.app_key = "YOUR_APP_KEY";
-		Countly.url = "https://your.domain.countly"; //your server goes here
+		Countly.url = "https://your.server.ly"; //your server goes here
+
+		if (Countly.app_key === "YOUR_APP_KEY" || Countly.url === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
 		Countly.debug = true;
 
 		//start pushing function calls to queue

package/examples/example_fb.html

@@ -11,10 +11,16 @@ Example on collecting user information from FaceBook
     <script type='text/javascript' src='../lib/countly.js'></script>
     <script type='text/javascript'>
 
-        //initializing countly with params
+        const COUNTLY_SERVER_KEY = "https://your.server.ly";
+        const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+        if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+            console.warn("Please do not use default set of app key and server url")
+        }
+        // initializing countly with params
         Countly.init({
-            app_key: "YOUR_APP_KEY",
-            url: "https://your.domain.countly", //your server goes here
+            app_key: COUNTLY_APP_KEY,
+            url: COUNTLY_SERVER_KEY, //your server goes here
             debug: true
         });
         Countly.begin_session();

package/examples/example_formdata.html

@@ -11,10 +11,16 @@ Example on collecting user information from submitted forms
 	<script type='text/javascript' src='../lib/countly.js'></script>
 	<script type='text/javascript'>
 
-		//initializing countly with params
+		const COUNTLY_SERVER_KEY = "https://your.server.ly";
+		const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+		if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
+		// initializing countly with params
 		Countly.init({
-			app_key: "YOUR_APP_KEY",
-			url: "https://your.domain.countly", //your server goes here
+			app_key: COUNTLY_APP_KEY,
+			url: COUNTLY_SERVER_KEY, //your server goes here
 			debug: true
 		});
 		Countly.begin_session();

package/examples/example_ga_adapter.html

@@ -11,8 +11,12 @@
 		Countly.onload = Countly.onload || [];
 		//provide countly initialization parameters
 		Countly.app_key = "YOUR_APP_KEY";
+		Countly.url = "https://your.server.ly"; //your server goes here
+
+		if (Countly.app_key === "YOUR_APP_KEY" || Countly.url === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
 		Countly.debug = true;
-		Countly.url = "https://your.domain.countly"; //your server goes here
 		window.cly_ga_test_mode = true;
 		Countly.test_logs = [];
 		//start pushing function calls to queue

package/examples/example_gdpr.html

@@ -9,9 +9,16 @@
     <script type='text/javascript'>
 
         //initializing countly with params and passing require_consent config as true
+        const COUNTLY_SERVER_KEY = "https://your.server.ly";
+        const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+        if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+            console.warn("Please do not use default set of app key and server url")
+        }
+        // initializing countly with params
         Countly.init({
-            app_key: "YOUR_APP_KEY",
-            url: "https://your.domain.countly", //your server goes here
+            app_key: COUNTLY_APP_KEY,
+            url: COUNTLY_SERVER_KEY, //your server goes here
             debug: true,
             require_consent: true //this true means consent is required
         });

package/examples/example_helpers.html

@@ -9,9 +9,16 @@
     <script type='text/javascript'>
 
         //initializing countly with params
+        const COUNTLY_SERVER_KEY = "https://your.server.ly";
+        const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+        if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+            console.warn("Please do not use default set of app key and server url")
+        }
+        // initializing countly with params
         Countly.init({
-            app_key: "YOUR_APP_KEY",
-            url: "https://your.domain.countly", //your server goes here
+            app_key: COUNTLY_APP_KEY,
+            url: COUNTLY_SERVER_KEY, //your server goes here
             debug: true
         });
 

package/examples/example_multiple_instances.html

@@ -11,12 +11,17 @@
 		Countly = Countly || {};
 		Countly.q = Countly.q || [];
 
-
-
 		//initializing first instance, which will be global Countly
+		const COUNTLY_SERVER_KEY = "https://your.server.ly";
+		const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+		if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
+		// initializing countly with params
 		Countly.init({
-			app_key: "YOUR_APP_KEY1",
-			url: "https://your.domain.countly", //your server goes here
+			app_key: COUNTLY_APP_KEY,
+			url: COUNTLY_SERVER_KEY, //your server goes here
 			debug: true
 		})
 		//report event to first app
@@ -27,26 +32,39 @@
 
 
 		//initialize second instance for another app synchronously
+		const COUNTLY_SERVER_KEY2 = "https://your.server.ly";
+		const COUNTLY_APP_KEY2 = "YOUR_APP_KEY2";
+
+		if (COUNTLY_APP_KEY2 === "YOUR_APP_KEY2" || COUNTLY_SERVER_KEY2 === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
+		// initializing countly with params
 		var Countly2 = Countly.init({
-			app_key: "YOUR_APP_KEY2", //must have different APP key
-			url: "https://your.domain.countly", //your server goes here
+			app_key: COUNTLY_APP_KEY2,
+			url: COUNTLY_SERVER_KEY2, //your server goes here
 			debug: true
 		});
+
 		//report event to second app
 		Countly2.add_event({
 			key: "second_app"
 		});
 
+		const COUNTLY_SERVER_KEY3 = "https://your.server.ly";
+		const COUNTLY_APP_KEY3 = "YOUR_APP_KEY3";
 
+		if (COUNTLY_APP_KEY3 === "YOUR_APP_KEY3" || COUNTLY_SERVER_KEY2 === "https://your.server.ly") {
+			console.warn("Please do not use default set of app key and server url")
+		}
 
 		//initialize third instance for another app asynchronously
 		Countly.q.push(["init", {
-			app_key: "YOUR_APP_KEY3", //must have different APP key
-			url: "https://your.domain.countly", //your server goes here
+			app_key: COUNTLY_APP_KEY3, //must have different APP key
+			url: COUNTLY_SERVER_KEY3, //your server goes here
 			debug: true
 		}])
 		//report event to third app asynchronously by passing app key as first arg
-		Countly.q.push(["YOUR_APP_KEY3", "add_event", {
+		Countly.q.push([COUNTLY_APP_KEY3, "add_event", {
 			key: "third_app"
 		}]);
 	</script>

package/examples/example_opt_out.html

@@ -9,9 +9,16 @@
     <script type='text/javascript'>
 
         //initializing countly with params
+        const COUNTLY_SERVER_KEY = "https://your.server.ly";
+        const COUNTLY_APP_KEY = "YOUR_APP_KEY";
+
+        if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
+            console.warn("Please do not use default set of app key and server url")
+        }
+        // initializing countly with params
         Countly.init({
-            app_key: "YOUR_APP_KEY",
-            url: "https://your.domain.countly", //your server goes here
+            app_key: COUNTLY_APP_KEY,
+            url: COUNTLY_SERVER_KEY, //your server goes here
             debug: true
         })
         //track sessions automatically