analytics-react

analytics-react copied to clipboard

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

+1, but in the meantime, you can use dangerouslySetInnerHTML

I encountered the same thing, check out this issue for my workaround.

You all could include the snippet on the index.html of the app. I mean the file where you have the div root.

This is also true for any other script that needs to be added on the page head of just before the close body tag.