Merge pull request #7929 from segmentio/analytics-js-snippet-update

pwseg · web-flow · commit 86bc8abcd323 · 2025-09-11T06:13:17.000-07:00
Add guidance on correct Analytics.js snippet placement [LIBRARIES-1920]
diff --git a/src/_includes/content/snippet-helper.md b/src/_includes/content/snippet-helper.md
@@ -138,4 +138,30 @@ analytics.page();
 ```
 {% endcodeexampletab %}
 
-{% endcodeexample %}
+{% codeexampletab HTML head with snippet %}
+```html
+<head>
+  <title>My Page Title</title>
+  <link rel="canonical" href="https://example.com/page" />
+
+  <!-- Segment snippet -->
+  <script type="text/javascript">
+    (function() {
+      var analytics = window.analytics = window.analytics || [];
+      analytics._writeKey = "YOUR_WRITE_KEY";
+      analytics.SNIPPET_VERSION = "5.x";
+      analytics.load = function(key) {
+        var s = document.createElement("script");
+        s.async = true;
+        s.src = "https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";
+        document.head.appendChild(s);
+      };
+      analytics.load("YOUR_WRITE_KEY");
+      analytics.page();
+    })();
+  </script>
+</head>
+```
+{% endcodeexampletab %}
+
+{% endcodeexample %}
diff --git a/src/connections/sources/catalog/libraries/website/javascript/quickstart.md b/src/connections/sources/catalog/libraries/website/javascript/quickstart.md
@@ -30,14 +30,12 @@ You can choose to install Segment to your site in 1 of 2 ways:
 
 [b. Install Segment as an NPM package](#step-2b-install-segment-as-a-npm-package)
 
-### Step 2a: Add the Segment Snippet
+### Step 2a: Add the Segment snippet
 
 > info ""
 > You can find the latest version of the Segment snippet in the **Overview** tab of your JavaScript source.
 
-To add the Segment snippet to your app: 
-
-Paste the snippet into the `<head>` tag of your site to install Segment.
+To add the Segment snippet to your app, paste it into the `<head>` tag of your site, **below the `<title>` tag and the canonical URL**. This ensures that Analytics.js can capture the `document.title` value.
 
   {% include content/snippet-helper.md %}
 
@@ -48,7 +46,7 @@ Replace `YOUR_WRITE_KEY` in the snippet you pasted with your Segment project's *
 
 That snippet loads Analytics.js onto the page _asynchronously_, so it won't affect your page load speed. Once the snippet is running on your site, you can turn on destinations from the destinations page in your workspace and they start loading on your site automatically.
 
-Note that you should remove other native third-party destination code that you might have on your site. For example, if you're using Segment to send data to Google Analytics, make sure you remove the Google Analytics snippet from your site source code to prevent sending the data twice.
+You should also remove other native third-party destination code that you might have on your site. For example, if you're using Segment to send data to Google Analytics, make sure you remove the Google Analytics snippet from your site source code to prevent sending the data twice.
 
 > info ""
 > If you only want the most basic Google Analytics setup, there's no need to continue with the setup. Just toggle on Google Analytics in the Segment interface.
