use countly-sdk-web in NextJs
See original GitHub issueI plan to use Countly for user usage data analytics. but when I import an error occurs which causes chrome to display Internal Server Error
and on the chrome console it says Failed to load resource: the server responded with a status of 500 (Internal Server Error)
but in the terminal it says ReferenceError: Element is not defined
this is my code
async componentDidMount() {
let Countly = Countly;
Countly.q = Countly.q;
Countly.app_key = "myAppKey";
Countly.url = "muUrl.Key";
Countly.q.push(["track_sessions"]);
Countly.q.push(["track_pageview"]);
(function() {
let cly = document.createElement("script");
cly.type = "text/javascript";
cly.async = true;
cly.src =
"https://cdnjs.cloudflare.com/ajax/libs/countly-sdk-web/19.2.1/countly.min.js";
cly.onload = function() {
Countly.init();
};
let s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(cly, s);
})();
}
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (4 by maintainers)
Top Results From Across the Web
Web analytics (JavaScript) - Countly
Countly Web SDK stores various information like device ID, request queue, session information and more in your device. This helps Countly to ...
Read more >countly-sdk-web - npm
Countly is a product analytics solution and innovation enabler that helps teams track product performance and customer journey and behavior ...
Read more >countly-sdk-web: Documentation | Openbase
How to use Countly Web SDK? Link to the script and call helper methods based on what you want to track: sessions, views,...
Read more >countly.js - Countly Web SDK Documentation - GitHub Pages
* Resets Countly to its initial state (used mainly to wipe the queues in memory). * Calling this will result in a loss...
Read more >Javascript SDK Example using Next.js - Split Help Center
Example: Basic Code to use Javascript Split SDK with React library and Next.js, the app has both Client side and Server side renderings,......
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Hi, You can refer to https://github.com/Countly/countly-sdk-web/blob/master/samples/react/src/App-WithRouter.js to integrate Countly into your application. Make sure you load Countly in your root component. Let me know if it was helpful or not.
We are still having this issue where Countly is throws a
ReferenceError
when it is imported.I would expect the library to only begin interacting with the DOM (or doing anything) when
init
is called. That would allow consumers of the library to control when initialisation occurs.It is confusing to provide a method to trigger initialisation, but also begin initialising the sdk and interacting with the window at import time.
Moving initialisation activities so that they are only triggered when the sdk consumer expects would make the library more flexible, and unblock the client teams who have commented on this ticket.