segmentio / analytics-react Goto Github PK

All working fine so far, except for one issue:

• how do I remove the identification of a user, upon logout for example ?

I tried different things:

• window.analytics.identify(null)
• window.analytics.identify({ authenticationStatus: 'logout' });

but their are not triggering a return to anonymous (https://segment.com/docs/connections/spec/identify/#anonymous-id) but to no avail.

The hard way is to clean manually the localStorage of all the ajs_* keys.

Any ideas?

Is there a way to programmatically inject the analytics.js snippet into my app versus just blindly importing it into my index.html? I have certain pages that I don't want 3rd party scripts to be loaded onto.

Add tests for following components:

• <App />
• <Header />
• <Main />

Hi,

I had a look at the README and the source code and can't figure out why this repo exists. I can't find a single importable React component in the source code. It's just an example project using Create React App. Why have a package on NPM at all?

I'm working on my team workflow for analytics and i'm looking for a way to Enable/Disable analytics in development environment.

//package.json
    "start": "react-scripts start",
    "start:analytics": "REACT_APP_SEGMENT="Dev key" react-scripts start",

This seems to work but i don't really understand how analytics script work behind the hood but it seems to save all analytics events done even if the script doesn't load .

Is this acceptable or could you show me how to prevent sending data in this case ?

Need to declare Windows interface as global to avoid compilation errors.

declare global {
    interface Window { analytics: any; }
}

Hi all, looking to integrate this locally, using the header like so:

<script>
        !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var t=analytics.methods[e];analytics[t]=analytics.factory(t)}analytics.load=function(e,t){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+e+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=t};analytics.SNIPPET_VERSION="4.1.0";
        analytics.load("mykey");
        analytics.page();
        }}();
    </script>

and then using react stateless functional components and calling the event tracking like so:
function trackEvent(){ window.analytics.track('New Diagnosis'); console.log("New Diagnosis Tracked") }

The console.log works but the data does not show up in my dashboard

On segmnet, you suggest creating two sources for different environments.

For this package, you have to put the tag in the public folder.

As far as I understand Create react app doesn't let you use environment variable in the public folder.

This means I have to manually copy and paste the script tag in every time I want to switch between environments. If I mess this up and forget just once it's going to introduce a bunch of nonsense into my analytics. Is there a better way to do this?

Why is this repo labelled react if we just use the same js tag as everyone else?

I'm trying to test my Segment configuration on localhost:3000, but I'm not getting any data coming in. Is it not possible to use localhost as a source?

We really need a React-based approach to this library, the snippet that is assigned in the project's config will fail JSX formatting rules.

Either segment should update their global script tag snippet, or this library should provide a JSX friendly way to implement Segment.

  42 |           <script type="text/javascript">
> 43 |             !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
     |                         ^
  44 |             analytics.load("YOUR_WRITE_KEY");
  45 |             // analytics.page() // Uncomment if your application is NOT an SPA
  46 |             }}();
AMP bind syntax []='' is not supported in JSX, use 'data-amp-bind-' instead. https://err.sh/zeit/next.js/amp-bind-jsx-alt

Adding Segment, Google Analytics to ynft.club