Skip to content

Commit 4559d04

Browse files
Justin-dynamsoftJustin-dynamsoft
committed
Add Google Tag Manager integration and update license keys across multiple HTML scenarios
- Integrated Google Tag Manager (GTM) for tracking purposes in various HTML files. - Updated the license key for Dynamsoft Barcode Reader in all affected scenarios to ensure continued functionality.
1 parent 789b9dc commit 4559d04

24 files changed

Lines changed: 680 additions & 33 deletions

File tree

‎.github/skills/update-sample-html-tracking-and-license/SKILL.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
name: update-sample-html-tracking-and-license
3+
description: 'Batch update HTML samples. Use this to batch-replace GTM code in HTML, move the `noscript` and `script` tags to the beginning of the `body`, batch-replace Dynamsoft license strings, and standardize sample tracking snippets.'
4+
argument-hint: 'Describe the target HTML scope and whether to update GTM, license, or both.'
5+
user-invocable: true
6+
---
7+
8+
# Update Sample HTML Tracking And License
9+
10+
## When to Use
11+
- Batch update GTM snippets in sample HTML files.
12+
- Move GTM `noscript` and `script` blocks to the start of `<body>`.
13+
- Replace an old Dynamsoft sample license string with a new one.
14+
- Normalize multiple sample pages to the same HTML tracking structure.
15+
16+
## Inputs To Confirm
17+
- Which HTML files are in scope.
18+
- Whether the task is GTM only, license only, or both.
19+
- The exact old and new strings if replacing license values.
20+
- Whether the GTM block should be inserted in `<head>` or at the start of `<body>`.
21+
- Whether `frameworks/**/*.html` should be excluded. Default: exclude framework HTML from license replacement unless explicitly requested.
22+
23+
## Procedure
24+
1. Search the repository for the current GTM ID or license string to get the exact file list.
25+
2. Inspect 2 to 3 representative files to confirm whether the GTM block is in `<head>`, between `</head>` and `<body>`, or already inside `<body>`.
26+
3. If updating GTM placement, remove the existing block from its current location and insert the canonical block from [assets/gtm-block.html](./assets/gtm-block.html) immediately after `<body>`.
27+
4. If updating license text, replace only the exact old license string and leave surrounding code untouched.
28+
5. By default, exclude `frameworks/**/*.html` from license replacement unless the user explicitly includes framework HTML.
29+
6. Verify there are no remaining GTM blocks under `<head>` or between `</head>` and `<body>`.
30+
7. Verify the GTM block appears once per target file at the start of `<body>`.
31+
8. Verify the old license string no longer exists in the intended non-framework files and that framework HTML retains its original license unless explicitly included.
32+
33+
## Output Expectations
34+
- Minimal, scoped HTML edits only.
35+
- No unrelated formatting changes.
36+
- A short report with file count, what changed, and verification results.
37+
38+
## Notes
39+
- For HTML validity, `noscript` with iframe should live under `<body>`.
40+
- Keep the `script` and `noscript` together when the request is to standardize placement.
41+
- Prefer repository-local skill reuse for this sample set.

‎.github/skills/update-sample-html-tracking-and-license/assets/gtm-block.html‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<noscript>
2+
<iframe
3+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
4+
height="0"
5+
width="0"
6+
style="display: none; visibility: hidden"
7+
></iframe>
8+
</noscript>
9+
<script>
10+
if (!navigator.webdriver) {
11+
setTimeout(() => {
12+
(function (w, d, s, l, i) {
13+
w[l] = w[l] || [];
14+
w[l].push({
15+
"gtm.start": new Date().getTime(),
16+
event: "gtm.js",
17+
});
18+
var f = d.getElementsByTagName(s)[0],
19+
j = d.createElement(s),
20+
dl = l != "dataLayer" ? "&l=" + l : "";
21+
22+
j.async = true;
23+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
24+
f.parentNode.insertBefore(j, f);
25+
})(window, document, "script", "dataLayer", "GTM-538F83");
26+
}, 0);
27+
}
28+
</script>

‎.github/skills/update-sample-html-tracking-and-license/assets/license-key.txt‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
OLD=DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9
2+
NEW=DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==

‎hello-world.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,34 @@
1313
</head>
1414

1515
<body>
16+
<noscript>
17+
<iframe
18+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
19+
height="0"
20+
width="0"
21+
style="display: none; visibility: hidden"
22+
></iframe>
23+
</noscript>
24+
<script>
25+
if (!navigator.webdriver) {
26+
setTimeout(() => {
27+
(function (w, d, s, l, i) {
28+
w[l] = w[l] || [];
29+
w[l].push({
30+
"gtm.start": new Date().getTime(),
31+
event: "gtm.js",
32+
});
33+
var f = d.getElementsByTagName(s)[0],
34+
j = d.createElement(s),
35+
dl = l != "dataLayer" ? "&l=" + l : "";
36+
37+
j.async = true;
38+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
39+
f.parentNode.insertBefore(j, f);
40+
})(window, document, "script", "dataLayer", "GTM-538F83");
41+
}, 0);
42+
}
43+
</script>
1644
<h1 class="barcode-scanner-title">
1745
Hello World (Scan Barcode via Camera)
1846
</h1>
@@ -22,7 +50,7 @@ <h1 class="barcode-scanner-title">
2250
<script>
2351
const resultView = document.querySelector(".result-view");
2452

25-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
53+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
2654
(async () => {
2755
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
2856
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);

‎read-an-image.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,34 @@
1515
</head>
1616

1717
<body>
18+
<noscript>
19+
<iframe
20+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
21+
height="0"
22+
width="0"
23+
style="display: none; visibility: hidden"
24+
></iframe>
25+
</noscript>
26+
<script>
27+
if (!navigator.webdriver) {
28+
setTimeout(() => {
29+
(function (w, d, s, l, i) {
30+
w[l] = w[l] || [];
31+
w[l].push({
32+
"gtm.start": new Date().getTime(),
33+
event: "gtm.js",
34+
});
35+
var f = d.getElementsByTagName(s)[0],
36+
j = d.createElement(s),
37+
dl = l != "dataLayer" ? "&l=" + l : "";
38+
39+
j.async = true;
40+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
41+
f.parentNode.insertBefore(j, f);
42+
})(window, document, "script", "dataLayer", "GTM-538F83");
43+
}, 0);
44+
}
45+
</script>
1846
<h1>Hello World (Read an Image)</h1>
1947
<input id="input-file" type="file" accept=".jpg,.jpeg,.icon,.gif,.svg,.webp,.png,.bmp" />
2048
<span id="decoding" style="display: none;">Decoding...</span>
@@ -30,7 +58,7 @@ <h1>Hello World (Read an Image)</h1>
3058
* For more information, see https://www.dynamsoft.com/barcode-reader/docs/web/programming/javascript/user-guide/barcode-scanner.html#license&utm_source=samples or contact support@dynamsoft.com.
3159
* LICENSE ALERT - THE END
3260
*/
33-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
61+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
3462

3563
const resultsContainer = document.querySelector("#results");
3664
const pInit = (async () => {

‎scan-a-single-barcode.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,42 @@
1313
</head>
1414

1515
<body>
16+
<noscript>
17+
<iframe
18+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
19+
height="0"
20+
width="0"
21+
style="display: none; visibility: hidden"
22+
></iframe>
23+
</noscript>
24+
<script>
25+
if (!navigator.webdriver) {
26+
setTimeout(() => {
27+
(function (w, d, s, l, i) {
28+
w[l] = w[l] || [];
29+
w[l].push({
30+
"gtm.start": new Date().getTime(),
31+
event: "gtm.js",
32+
});
33+
var f = d.getElementsByTagName(s)[0],
34+
j = d.createElement(s),
35+
dl = l != "dataLayer" ? "&l=" + l : "";
36+
37+
j.async = true;
38+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
39+
f.parentNode.insertBefore(j, f);
40+
})(window, document, "script", "dataLayer", "GTM-538F83");
41+
}, 0);
42+
}
43+
</script>
1644
<h1 class="barcode-scanner-title">
1745
Hello World (Scan One Single Barcode via Camera)
1846
</h1>
1947
<button class="scan-btn" onclick="startScan()">scan</button>
2048
<!-- This div will host the barcode scanner's camera view -->
2149
<div class="barcode-scanner-view"></div>
2250
<script>
23-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
51+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
2452
const pInit = (async () => {
2553
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
2654
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);

‎scenarios/batch-inventory/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,34 @@
1313
</head>
1414

1515
<body>
16+
<noscript>
17+
<iframe
18+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
19+
height="0"
20+
width="0"
21+
style="display: none; visibility: hidden"
22+
></iframe>
23+
</noscript>
24+
<script>
25+
if (!navigator.webdriver) {
26+
setTimeout(() => {
27+
(function (w, d, s, l, i) {
28+
w[l] = w[l] || [];
29+
w[l].push({
30+
"gtm.start": new Date().getTime(),
31+
event: "gtm.js",
32+
});
33+
var f = d.getElementsByTagName(s)[0],
34+
j = d.createElement(s),
35+
dl = l != "dataLayer" ? "&l=" + l : "";
36+
37+
j.async = true;
38+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
39+
f.parentNode.insertBefore(j, f);
40+
})(window, document, "script", "dataLayer", "GTM-538F83");
41+
}, 0);
42+
}
43+
</script>
1644
<div class="barcode-reader-view">
1745
<div class="scanner-view">
1846
<div class="loading-view">
@@ -74,7 +102,7 @@
74102
let totalUniqueBarcodesCount = 0;
75103
let startTime;
76104

77-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
105+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
78106
const pInit = (async () => {
79107
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();
80108
const cameraEnhancer = await Dynamsoft.DCE.CameraEnhancer.createInstance(cameraView);

‎scenarios/cart-builder/index.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,35 @@
1212
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
1313
<!-- <script src="../../../dist/dbr.bundle.js"></script> -->
1414
</head>
15-
1615
<body>
16+
<noscript>
17+
<iframe
18+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
19+
height="0"
20+
width="0"
21+
style="display: none; visibility: hidden"
22+
></iframe>
23+
</noscript>
24+
<script>
25+
if (!navigator.webdriver) {
26+
setTimeout(() => {
27+
(function (w, d, s, l, i) {
28+
w[l] = w[l] || [];
29+
w[l].push({
30+
"gtm.start": new Date().getTime(),
31+
event: "gtm.js",
32+
});
33+
var f = d.getElementsByTagName(s)[0],
34+
j = d.createElement(s),
35+
dl = l != "dataLayer" ? "&l=" + l : "";
36+
37+
j.async = true;
38+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
39+
f.parentNode.insertBefore(j, f);
40+
})(window, document, "script", "dataLayer", "GTM-538F83");
41+
}, 0);
42+
}
43+
</script>
1744
<header>
1845
<h1>🛒 Scan Barcode to Add Items to Cart</h1>
1946
</header>
@@ -52,7 +79,7 @@ <h2>Simulated Shopping Cart</h2>
5279
<script>
5380
const dragDiv = document.querySelector(".floatingDiv");
5481

55-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
82+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
5683

5784
const pInit = (async () => {
5885
const cameraView = await Dynamsoft.DCE.CameraView.createInstance();

‎scenarios/debug/public/index.html‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,34 @@
1010
</head>
1111

1212
<body>
13+
<noscript>
14+
<iframe
15+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
16+
height="0"
17+
width="0"
18+
style="display: none; visibility: hidden"
19+
></iframe>
20+
</noscript>
21+
<script>
22+
if (!navigator.webdriver) {
23+
setTimeout(() => {
24+
(function (w, d, s, l, i) {
25+
w[l] = w[l] || [];
26+
w[l].push({
27+
"gtm.start": new Date().getTime(),
28+
event: "gtm.js",
29+
});
30+
var f = d.getElementsByTagName(s)[0],
31+
j = d.createElement(s),
32+
dl = l != "dataLayer" ? "&l=" + l : "";
33+
34+
j.async = true;
35+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
36+
f.parentNode.insertBefore(j, f);
37+
})(window, document, "script", "dataLayer", "GTM-538F83");
38+
}, 0);
39+
}
40+
</script>
1341
<h1 style="font-size: 1.5em">Read Barcodes from Camera - Debug</h1>
1442
<button id="btn-start-capturing">start capturing</button>
1543
<button id="btn-stop-capturing">stop capturing</button>
@@ -36,7 +64,7 @@ <h1 style="font-size: 1.5em">Read Barcodes from Camera - Debug</h1>
3664
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
3765
*/
3866

39-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
67+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
4068

4169
/**
4270
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.

‎scenarios/locate-an-item-with-barcode/index.html‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,35 @@
1313
<!-- If the network is unstable or you prefer to self-host the SDK, uncomment the line below to load it locally -->
1414
<!-- <script src="../../../dist/dbr.bundle.js"></script> -->
1515
</head>
16-
1716
<body>
17+
<noscript>
18+
<iframe
19+
src="https://www.googletagmanager.com/ns.html?id=GTM-538F83"
20+
height="0"
21+
width="0"
22+
style="display: none; visibility: hidden"
23+
></iframe>
24+
</noscript>
25+
<script>
26+
if (!navigator.webdriver) {
27+
setTimeout(() => {
28+
(function (w, d, s, l, i) {
29+
w[l] = w[l] || [];
30+
w[l].push({
31+
"gtm.start": new Date().getTime(),
32+
event: "gtm.js",
33+
});
34+
var f = d.getElementsByTagName(s)[0],
35+
j = d.createElement(s),
36+
dl = l != "dataLayer" ? "&l=" + l : "";
37+
38+
j.async = true;
39+
j.src = "//www.googletagmanager.com/gtm.js?id=" + i + dl;
40+
f.parentNode.insertBefore(j, f);
41+
})(window, document, "script", "dataLayer", "GTM-538F83");
42+
}, 0);
43+
}
44+
</script>
1845
<!-- Container to retrieve user input -->
1946
<div id="inputs-container">
2047
<div style="border-bottom: 2px solid #fe8e14; padding: 0 2rem">
@@ -87,7 +114,7 @@ <h6 id="camera-switch-notification"></h6>
87114
/** LICENSE ALERT - README
88115
* To use the library, you need to first specify a license key using the API "initLicense()" as shown below.
89116
*/
90-
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJvcmdhbml6YXRpb25JRCI6IjIwMDAwMSJ9");
117+
Dynamsoft.License.LicenseManager.initLicense("DLS2eyJoYW5kc2hha2VDb2RlIjoiMjAwMDAwLWRicl9qc19zYW1wbGVzIiwib3JnYW5pemF0aW9uSUQiOiIyMDAwMDAifQ==");
91118
/**
92119
* You can visit https://www.dynamsoft.com/customer/license/trialLicense?utm_source=samples&product=dbr&package=js to get your own trial license good for 30 days.
93120
* Note that if you downloaded this sample from Dynamsoft while logged in, the above license key may already be your own 30-day trial license.

0 commit comments

Comments
 (0)