microsoft · siyuniu-ms · Jun 21, 2024 · Jun 20, 2024 · Jun 21, 2024 · Jun 21, 2024
@@ -76,7 +76,7 @@ appInsights.trackPageView(); // Manually call trackPageView to establish the cur
 
 If your app does not use NPM, you can directly instrument your webpages with Application Insights by pasting this snippet at the top of each your pages. Preferably, it should be the first script in your `<head>` section so that it can monitor any potential issues with all of your dependencies.
 
-The current version of the snippet is version 7, the version is identified by the "sv:" in the script.
+The current version of the snippet is version 8, the version is identified by the "sv:" in the script.
 
 ```html
 <script type="text/javascript">

@@ -64,7 +64,7 @@
         "@microsoft/applicationinsights-shims": "3.0.1",
         "@microsoft/dynamicproto-js": "^2.0.3",
         "@microsoft/applicationinsights-web": "3.2.2",
-        "@microsoft/applicationinsights-web-snippet": "1.2.2",
+        "@microsoft/applicationinsights-web-snippet": "1.2.0",
         "@microsoft/applicationinsights-core-js": "3.2.2",
         "@nevware21/ts-utils": ">= 0.11.1 < 2.x"
     }

@@ -27,7 +27,7 @@ module.exports = function (grunt) {
 
     }
 
-    function generateNewSnippet(connString) {
+    function generateNewSnippet(prefix) {
         var srcPath = "./tools/applicationinsights-web-snippet/dist-es5";
         return {
             files: [{
@@ -38,21 +38,16 @@ module.exports = function (grunt) {
             }],
             options: {
                 replacements: function() {
-                    var prefix = "IKey";
                     var snippetBuffer = grunt.file.read("./tools/applicationinsights-web-snippet/build/output/snippet.min.js");
-                    if (connString) {
+                    if (prefix === "ConnString") {
                         snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"YOUR_CONNECTION_STRING\"");
-                        snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"YOUR_CONNECTION_STRING\"");
-                        prefix = "ConnString";
-                    } else {
-                        snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"InstrumentationKey=INSTRUMENTATION_KEY\"");
+                    } else if (prefix === "IKey") {
                         snippetBuffer = snippetBuffer.replace(/connectionString:\s*".*?"/gms, "    connectionString: \"InstrumentationKey=INSTRUMENTATION_KEY\"");
-                        let snippetBuffer2 = "cfg:{connectionString:\"YOUR_CONNECTION_STRING\"";
-                        console.log("what is it doing", snippetBuffer2.replace(/^\s*connectionString:\s*\".*\"/gm, "    connectionString: \"InstrumentationKey=INSTRUMENTATION_KEY\""));
+                    } else if (prefix === "Origin") {
+                        snippetBuffer = grunt.file.read("./tools/applicationinsights-web-snippet/build/output/originSnippet.min.js");
                     }
                     var snippetStr = _encodeStr(snippetBuffer.toString());
                     var expectedStr = `##replace${prefix}Snippet##`;
-                    console.log("change expectedStr to " + expectedStr);
                     return [{
                         pattern: expectedStr,
                         replacement: snippetStr
@@ -779,10 +774,16 @@ module.exports = function (grunt) {
             'string-replace': {
                 'generate-expanded-JS': expandJS(),
                 'generate-expanded-min': expandMin(),
-                'generate-snippet-ikey': generateNewSnippet(false),
-                'generate-snippet-connString': generateNewSnippet(true)
+                'generate-snippet-ikey': generateNewSnippet("IKey"),
+                'generate-snippet-connString': generateNewSnippet("ConnString"),
+                'generate-snippet-origin': generateNewSnippet("Origin")
             },
             copy: {
+                "originSnippet": {
+                    files: [
+                        { src: "./tools/applicationinsights-web-snippet/build/output/snippet.min.js", dest: `./tools/applicationinsights-web-snippet/build/output/originSnippet.min.js` }
+                       ]
+                },
                 "snippet": {
                     files: [
                         { src: "./tools/applicationinsights-web-snippet/build/output/snippet.js", dest: `./tools/applicationinsights-web-snippet/dist-es5/snippet.js` },
@@ -917,7 +918,8 @@ module.exports = function (grunt) {
 
         grunt.registerTask("websnippet", tsBuildActions("applicationinsights-web-snippet"));
         grunt.registerTask("snippetCopy", ["copy:snippet"]);
-        grunt.registerTask("websnippetReplace", ["string-replace:generate-expanded-JS", "copy:web-snippet", "string-replace:generate-expanded-min", "string-replace:generate-snippet-ikey", "string-replace:generate-snippet-connString"]);
+        grunt.registerTask("originSnippetCopy", ["copy:originSnippet"]);
+        grunt.registerTask("websnippetReplace", ["string-replace:generate-expanded-JS", "copy:web-snippet", "string-replace:generate-expanded-min", "string-replace:generate-snippet-ikey", "string-replace:generate-snippet-connString", "string-replace:generate-snippet-origin"]);
 
         grunt.registerTask("snippet-restore", restoreTasks("applicationinsights-web-snippet"));
         grunt.registerTask("websnippettests", tsTestActions("applicationinsights-web-snippet"));

@@ -21,14 +21,27 @@ Import the helper function from the package to easily get the snippet
 import { getSdkLoaderScript } from "@microsoft/applicationinsights-web-snippet";
 ```
 
-Configure the snippet with your connectionString.
+Configure the snippet with your connectionString or other customerized field:
 ```
-let config = {connectionString: "InstrumentationKey=xxx"}; 
-// or let config = {instrumentationKey: key};
+let config = {connectionString: "InstrumentationKey=xxx", name: "myAppInsights"}; 
+// or let config = {instrumentationKey: key, sri: true};
 let theSnippet = getSdkLoaderScript(config);
 ```
 
+### Multiple Snippet Run Simutinously (available since v1.2.0)
+Configure two snippets with different name.
+```
+let firstConfig = {connectionString: "InstrumentationKey=xxx", name: "firstAppInsights"}; 
+let firstSnippet = getSdkLoaderScript(firstConfig);
+let secondConfig = {connectionString: "InstrumentationKey=xxx", name: "secondAppInsights"}; 
+let secondSnippet = getSdkLoaderScript(secondConfig);
+```
 
+### Snippet Run With Integrity Check and Minified Loading Time (available since v1.2.0)
+Configure the snippet with sri enabled.
+```
+let config = {connectionString: "InstrumentationKey=xxx", sri: true};
+```
 
 More details on web snippet, see [Web Snippet](https://github.com/microsoft/ApplicationInsights-JS#snippet-setup-ignore-if-using-npm-setup).
 

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/applicationinsights-web-snippet",
-    "version": "1.2.2",
+    "version": "1.2.0",
     "description": "Microsoft Application Insights Web Snippet",
     "main": "dist/es5/node/applicationinsights-web-snippet.js",
     "module": "dist-es5/applicationinsights-web-snippet.js",
@@ -15,8 +15,9 @@
         "build": "npm run build:esm && npm run snippet-generate && npm run build:browser && npm run dtsgen",
         "build:esm": "grunt websnippet ",
         "dtsgen": "api-extractor run --local && node ../../scripts/dtsgen.js \"Microsoft Application Insights Web Snippet\"",
-        "snippet-generate": "npm run build:snippet && npm run replace && npm run snippetCopy",
+        "snippet-generate": "npm run build:snippet && npm run originSnippetCopy && npm run replace && npm run snippetCopy",
         "snippetCopy": "grunt snippetCopy",
+        "originSnippetCopy": "grunt originSnippetCopy",
         "build:snippet": "rollup -c rollupSnippet.config.js --bundleConfigAsCjs",
         "replace": "grunt websnippetReplace",
         "build:browser": "rollup -c rollup.config.js --bundleConfigAsCjs",

@@ -1,5 +1,6 @@
-import { SdkLoaderConfig } from "./type";
+import { ISnippetConfig, SdkLoaderConfig } from "./type";
 
+const originSnippet = "##replaceOriginSnippet##";
 const webSnippet = "##replaceIKeySnippet##";
 const webSnippetCs = "##replaceConnStringSnippet##";
 
@@ -13,13 +14,27 @@
 }
 
 function getSdkLoaderScript(config: SdkLoaderConfig) {
-    let snippet: string = webSnippetCs;
-    if (config && config.connectionString) {
-        snippet = webSnippetCs.replace("YOUR_CONNECTION_STRING", config.connectionString);
-    } else if (config && config.instrumentationKey) {
-        snippet = webSnippet.replace("InstrumentationKey=INSTRUMENTATION_KEY", config.instrumentationKey);
+    let snippetConfig: ISnippetConfig = {
+        src: config.src? config.src : "https://js.monitor.azure.com/scripts/b/ai.3.gbl.min.js",
+        crossOrigin: config.crossOrigin ? config.crossOrigin : "anonymous",
+        cfg: {},
+        name: config.name ? config.name : "appInsights",
+        ld: config.ld,
+        useXhr: config.useXhr,
+        cr: config.cr,
+        dle: config.dle,
+        sri: config.sri
+    };
+
+    if (config.instrumentationKey) {
+        snippetConfig.cfg.instrumentationKey = config.instrumentationKey;
+    } else if (config.connectionString) {
+        snippetConfig.cfg.connectionString = config.connectionString;
     }
-    return snippet;
+
+    let configString = JSON.stringify(snippetConfig);
+    let userSnippet = `!(function (cfg){${originSnippet}})(\n${configString}\n);`;
+    return userSnippet;
 }
 
 

@@ -1,9 +1,17 @@
 import { IConfiguration } from "@microsoft/applicationinsights-web";
 
-// in the future, we can add more fields here
 export interface SdkLoaderConfig {
     instrumentationKey?: string;
     connectionString?: string;
+    src?: string;
+    name?: string;
+    ld?: number;
+    useXhr?: boolean;
+    crossOrigin?: string;
+    cfg?: IConfiguration;
+    cr?: boolean;
+    dle?: boolean;
+    sri?: boolean;
 }
 
 export interface ISnippetConfig {

@@ -102,7 +102,7 @@
         },
         "@microsoft/applicationinsights-web-snippet": {
             "package": "tools/applicationinsights-web-snippet/package.json",
-            "release": "1.2.2"
+            "release": "1.2.0"
         }
     }
 }