Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to use globalAnalyticsKey in the browser, using Vanilla JS? #1014

Closed
seg-leonelsanches opened this issue Dec 12, 2023 · 0 comments · Fixed by #1032
Closed

How to use globalAnalyticsKey in the browser, using Vanilla JS? #1014

seg-leonelsanches opened this issue Dec 12, 2023 · 0 comments · Fixed by #1032
Assignees
@zikaari

Comments

@seg-leonelsanches
Copy link

Hi team,

A customer doesn't want to use window.analytics due to a clash with another analytics.js library that it is not ours. They'd like to rename the global object to something like window.segment_analytics.

I found in the docs a property for it:

/**
 * Stores the global window analytics key
 */
let _globalAnalyticsKey = 'analytics'

However, there are no examples on how to use it, so using a little bit of debugging + reading the original code, I crafted this PoC:

<html>
  <head>
    <script>
      !(function () {
        var segment_analytics = (window.segment_analytics = window.segment_analytics || []);
        if (!segment_analytics.initialize)
          if (segment_analytics.invoked)
            window.console &&
              console.error &&
              console.error("Segment snippet included twice.");
          else {
            segment_analytics.invoked = !0;
            segment_analytics.methods = [
              "trackSubmit",
              "trackClick",
              "trackLink",
              "trackForm",
              "pageview",
              "identify",
              "reset",
              "group",
              "track",
              "ready",
              "alias",
              "debug",
              "page",
              "once",
              "off",
              "on",
              "addSourceMiddleware",
              "addIntegrationMiddleware",
              "setAnonymousId",
              "addDestinationMiddleware",
            ];
            segment_analytics.factory = function (e) {
              return function () {
                var t = Array.prototype.slice.call(arguments);
                t.unshift(e);
                segment_analytics.push(t);
                return segment_analytics;
              };
            };
            for (var e = 0; e < segment_analytics.methods.length; e++) {
              var key = segment_analytics.methods[e];
              segment_analytics[key] = segment_analytics.factory(key);
            }
            segment_analytics.load = function (key, e) {
              var t = document.createElement("script");
              t.type = "text/javascript";
              t.async = !0;
              t.src = "https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";
              var n = document.getElementsByTagName("script")[0];
              n.parentNode.insertBefore(t, n);
              segment_analytics._loadOptions = {...e, globalAnalyticsKey: 'segment_analytics' };
            };
            segment_analytics._writeKey = "my-write-key";
            segment_analytics.SNIPPET_VERSION = "4.15.3";
            segment_analytics.load("my-write-key");
          }
      })();
    </script>
    <title>Home</title>
  </head>
  <body>
    <h1>PoC for Global Analytics Key</h1>
  </body>
</html>

This runs with no errors. However, when I send events using it, 1) the events are not sent to Segment, and 2) curiously, the events are added to segment_analytics as an array:

image

Am I setting this correctly? Is there another way of setting it?

Thanks in advance!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@zikaari zikaari

Labels
None yet
Projects
None yet
Milestone
No milestone
2 participants
@zikaari @seg-leonelsanches