Countly · ArtursKadikis · Jul 6, 2023 · Jul 3, 2023 · Jul 3, 2023 · Jul 3, 2023
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## X.X.X
+- Added a new flag, 'loadAPMScriptsAsync', which can load the APM related scripts automatically for Async implementations
+
 ## 23.2.2
 - Default max segmentation value count changed from 30 to 100
 

diff --git a/cypress/.eslintrc.js b/cypress/.eslintrc.js
@@ -9,7 +9,7 @@ module.exports = {
         "cypress/no-assigning-return-values": "error",
         "cypress/no-unnecessary-waiting": "off",
         "cypress/assertion-before-screenshot": "warn",
-        "cypress/unsafe-to-chain-command": "warn",
+        "cypress/unsafe-to-chain-command": "off",
         "cypress/no-force": "warn",
         "cypress/no-async-tests": "error",
         "cypress/no-pause": "error",

diff --git a/examples/example_apm.html b/examples/example_apm.html
@@ -10,44 +10,18 @@
   <script type='text/javascript' src="../plugin/boomerang/boomerang.min.js"></script>
   <script type='text/javascript'>
 
-    //initializing countly with params
+    // initializing countly with params
     Countly.init({
       app_key: "YOUR_APP_KEY",
       url: "https://try.count.ly", //your server goes here
       debug: true
     })
+
+    // enable sessions
     Countly.track_sessions();
 
-    //Calling APM plugin method
-    Countly.track_performance({
-      RT: {
-        enabled: true
-      },
-      instrument_xhr: true,
-      AutoXHR: {
-        enabled: true,
-        alwaysSendXhr: true,
-        monitorFetch: true,
-        captureXhrRequestResponse: true
-      },
-      Continuity: {
-        enabled: true,
-        monitorLongTasks: true,
-        monitorPageBusy: true,
-        monitorFrameRate: true,
-        monitorInteractions: true,
-        afterOnload: true
-      },
-      NavigationTiming: {
-        enabled: true
-      },
-      ResourceTiming: {
-        enabled: true,
-        clearOnBeacon: true,
-        urlLimit: 2000,
-        splitAtPath: true
-      }
-    });
+    // enable APM
+    Countly.track_performance();
   </script>
 </head>
 

diff --git a/examples/example_apm_async.html b/examples/example_apm_async.html
@@ -0,0 +1,68 @@
+<html>
+
+<head>
+	<!-- Page styling here -->
+	<link rel='stylesheet' type='text/css' href='./style/style.css'>
+
+	<!--Countly script-->
+	<script type='text/javascript'>
+		//some default pre init
+		var Countly = Countly || {};
+		Countly.q = Countly.q || [];
+
+		//provide countly initialization parameters
+		Countly.app_key = "YOUR_APP_KEY";
+		Countly.url = "https://try.count.ly"; //your server goes here
+		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']);
+
+		// track sessions automatically
+		Countly.q.push(['track_pageview']);
+
+		// enable APM
+		Countly.q.push(['track_performance']);
+
+		//load countly script asynchronously
+		(function () {
+			var cly = document.createElement('script'); cly.type = 'text/javascript';
+			cly.async = true;
+			//enter url of script here
+			cly.src = '../lib/countly.js';
+			cly.onload = function () { Countly.init() };
+			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(cly, s);
+		})();
+		//send event on button click
+		function clickEvent() {
+			Countly.q.push(['add_event', {
+				key: "buttonClick",
+				"segmentation": {
+					"id": "id"
+				}
+			}]);
+		}
+	</script>
+</head>
+
+<body>
+	<!-- Header, banner etc. Top part of your site  -->
+	<div id="header">
+		<h1>Async Countly Implementation</h1>
+		<img id="logo" src="./images/logo.png">
+	</div>
+
+	<center>
+		<img src="./images/team_countly.jpg" id="wallpaper" />
+		<br />
+		<input type="button" id="testButton" onclick="clickEvent()" value="Test Button">
+		<p><a href='https://countly.com/'>Countly</a></p>
+	</center>
+</body>
+
+</html>
diff --git a/examples/examples_feedback_widgets.html b/examples/examples_feedback_widgets.html
@@ -28,8 +28,17 @@
         console.log(err);
         return;
       }
-      // Decide which which widget to show. Here the first one is selected. Check the below implementation for a more elaborate version.
+
+      // Decide which which widget to show. Here the first rating widget is selected. 
+      var i = countlyPresentableFeedback.length - 1;
       var countlyFeedbackWidget = countlyPresentableFeedback[0];
+      while (i--) {
+        // You can change 'rating' to 'nps' or 'survey'. Or you can create your own logic here.
+        if (countlyPresentableFeedback[i].type === 'rating') {
+          countlyFeedbackWidget = countlyPresentableFeedback[i];
+          break;
+        }
+      }
 
       // Define the element ID and the class name (optional)
       var selectorId = "";

diff --git a/examples/mpa/index.html b/examples/mpa/index.html
@@ -11,7 +11,7 @@
 		<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' 'unsafe-eval'"></meta>
 	-->
   <!-- jquery-3 -->
-  <script src="https://code.jquery.com/jquery-3.5.1.min.js"
+  <script src="https://code.jquery.com/jquery-3.6.1.min.js"
     integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
   <!-- mobile view info -->
   <meta content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
@@ -25,41 +25,6 @@
   <script src="helper_functions.js"></script>
   <!-- Async Countly init logic here -->
   <script type='text/javascript'>
-    // load BoomerangJS scripts after Countly is initiated this way 
-    syncScripts();
-    function syncScripts() {
-      // Here we should refer to the 'boomerang.min.js' and 'countly_boomerang.js' scripts' path in this order inside scripts array
-      // in your production implementation you would most likely have something like this:
-      // var scripts = ['../plugin/boomerang/boomerang.min.js', '../plugin/boomerang/countly_boomerang.js'];
-      //
-      // For ones with a keen eye, they might notice that these paths differ from the ones in the documentation, reason being that we would like to keep a single copy of these files
-      // in our repo so we directly refer to them from our plugin folder. 
-      //
-      // If you would like to use this example stand alone, you would need to copy those files and refer to their
-      // correct paths here. Like creating a folder and pasting them there and then referring to that folder. Folder name 
-      // does not matter as long as you provide them correctly in to the scripts array
-      var scripts = ['../../plugin/boomerang/boomerang.min.js', '../../plugin/boomerang/countly_boomerang.js'];
-      var i = 0;
-      function loopScriptList(scripts) {
-        recursiveScriptMaker(scripts[i], function () {
-          i++;
-          if (i < scripts.length) {
-            loopScriptList(scripts);
-          }
-        });
-      }
-      loopScriptList(scripts);
-    }
-    function recursiveScriptMaker(source, callback) {
-      var script = document.createElement('script');
-      script.onload = function () {
-        console.log('Successfully loaded the source: ' + source)
-        callback();
-      }
-      script.src = source;
-      document.getElementsByTagName('head')[0].appendChild(script);
-    }
-
     // Countly Related Settings
     var Countly = Countly || {};
     Countly.q = Countly.q || [];
@@ -69,6 +34,7 @@
     Countly.session_update = 30; //Time interval for session extend
     Countly.use_session_cookie = false; //if false, begin_session on every app open, be it in new tab
     Countly.debug = true;
+    Countly.loadAPMScriptsAsync = true;
     Countly.require_consent = false;
     Countly.namespace = "demo";
     Countly.inactivity_time = 1; //User will marked inactive after 1 min, i.e. stop_time and no extend session or end session
@@ -127,36 +93,8 @@
     // Countly.q.push(['track_forms']);
     // Countly.q.push(['recordDirectAttribution']);
 
-    // APM related configuration
-    Countly.q.push(["track_performance", {
-      RT: {
-        enabled: true
-      },
-      instrument_xhr: true,
-      AutoXHR: {
-        enabled: true,
-        alwaysSendXhr: true,
-        monitorFetch: true,
-        captureXhrRequestResponse: true
-      },
-      Continuity: {
-        enabled: true,
-        monitorLongTasks: true,
-        monitorPageBusy: true,
-        monitorFrameRate: true,
-        monitorInteractions: true,
-        afterOnload: true
-      },
-      NavigationTiming: {
-        enabled: true
-      },
-      ResourceTiming: {
-        enabled: true,
-        clearOnBeacon: true,
-        urlLimit: 2000,
-        splitAtPath: true
-      }
-    }]);
+    // enable APM
+    Countly.q.push(["track_performance"]);
 
     // init Countly
     (function () {
@@ -198,7 +136,7 @@ <h1>Web Demo App</h1>
     <img src="../images/team_countly.jpg" id="wallpaper" />
 
     <!-- Welcome Text. With user name. -->
-    <h2 id="welcome-user"">No User is Signed In</h2>
+    <h2 id="welcome-user">No User is Signed In</h2>
         <br />
 
     <!-- Button Group  -->
@@ -210,22 +148,22 @@ <h2 id="welcome-user"">No User is Signed In</h2>
         <!-- Widget information section  -->
         <div id="widget-info">
           <div>
-            <label for="tags"">Tags</label>
+            <label for="tags">Tags</label>
             <input id="widget-tag" value="" class="widget-info-lines"
               type="text" name="tags" readonly />
           </div>
           <div>
-            <label for="name"">Name</label>
+            <label for="name">Name</label>
             <input id="widget-name" value="" class="widget-info-lines"
               type="text" name="name" readonly />
           </div>
           <div>
-            <label for="show-policy"">Show Policy</label>
+            <label for="show-policy">Show Policy</label>
             <input id="widget-show-policy" value="" class="widget-info-lines"
               type="text" name="show-policy" readonly />
           </div>
           <div>
-            <label for="widget-id"">ID</label>
+            <label for="widget-id">ID</label>
             <input id="widget-id" value="" class="widget-info-lines"
               type="text" name="widget-id" readonly />
           </div>