Countly Web SDK: Track site accesses and errors the Countly API

Recommend this page to a friend!

Download

Info

Documentation

Files

Download

Reputation

Support forum

Blog

Links

Last Updated		Ratings				Unique User Downloads		Download Rankings
2024-11-13 (7 days ago)		Not enough user ratings				Total: 85		All time: 446 This week: 3

Version		License		JavaScript version		Categories
`countly-web-sdk` 1.0		Custom (specified...		1.0		AJAX, Web services

Collaborate with this project

Author

Arturs Sosins

Countly Web SDK - github.com

Description

This package track site accesses and errors the Countly API.

It can track several types of statistics and events like user sessions, clicks, form submissions, and JavaScript errors.

The events are reported to the Countly server using AJAX requests that can be sent synchronously or asynchronously to avoid page loading delays.

Innovation Award

August 2015
Winner

Countly is a service that can track several types of user access statistics and action events the users perform on pages.

This package uses the Country API to record useful information for the developer about important events like clicks on the page, form submissions or even JavaScript errors.

Manuel Lemos

Arturs Sosins

Performance

Level

Name:	Arturs Sosins `<contact>`
Classes:	51 packages by Arturs Sosins
Country:	United States

Level 4

Innovation award

Nominee: 8x

Winner: 6x

Documentation

<html>

<head>
    <!-- Page styling here -->
    <link rel='stylesheet' type='text/css' href='./style/style.css'>

    <!--Countly script-->
    <script type='text/javascript' src='../lib/countly.js'></script>
    <script type='text/javascript'>

        //initializing countly with params
        const COUNTLY_SERVER_KEY = "https://your.server.ly";
        const COUNTLY_APP_KEY = "YOUR_APP_KEY";

        if (COUNTLY_APP_KEY === "YOUR_APP_KEY" || COUNTLY_SERVER_KEY === "https://your.server.ly") {
            console.warn("Please do not use default set of app key and server url")
        }
        // initializing countly with params
        Countly.init({
            app_key: COUNTLY_APP_KEY,
            url: COUNTLY_SERVER_KEY, //your server goes here
            debug: true
        });

        //track sessions automatically
        Countly.track_sessions();

        //track pageviews automatically
        Countly.track_pageview();

        //track any clicks to webpages automatically
        Countly.track_clicks();

        //track link clicks automatically
        Countly.track_links();

        //track form submissions automatically
        Countly.track_forms();

        //track javascript errors
        Countly.track_errors({ jquery: "1.10", jqueryui: "1.10" });

        //let's cause some errors
        function cause_error() {
            undefined_function();
        }

        function unhandled_error() {
            Countly.add_log('Pressed unhandled button');
            cause_error();
        }

        function handled_error() {
            Countly.add_log('Pressed handled button');
            try {
                cause_error();
            } catch (err) {
                Countly.log_error(err)
            }
        }
    </script>
</head>

<body>
    <!-- Header, banner etc. Top part of your site  -->
    <div id="header">
        <h1>Error Helpers</h1>
        <img id="logo" src="./images/logo.png">
    </div>

    <center>
        <img src="./images/team_countly.jpg" id="wallpaper" />
        <form method='post' name='comments'>
            <p><input type="text" name="message" value="Message Name"></p>
            <p><textarea>Message</textarea></p>
            <p><select>
                    <option value='option1'>Option1</option>
                    <option value='option2'>Option2</option>
                    <option value='option3'>Option3</option>
                </select></p>
            <p><input id="submit-form" type="submit" value="Submit"></p>
        </form>
        <p><button id="unhandled_error" onclick="unhandled_error()">Unhandled Error</button></p>
        <p><button id="handled_error" onclick="handled_error()">Handled Error</button></p>
        <p><a id="track_link" href='#link'>Dummy link</a></p>
        <p><a href='https://countly.com/'>Countly</a></p>
    </center>
</body>

</html>

Details

Countly Web SDK

This SDK is bundled from the modular Countly JavaScript SDK.

This repository contains the Countly Web SDK, which can be integrated into websites and web applications. The Countly Web SDK is intended to be used with Countly Lite, Countly Flex Countly Enterprise.

What is Countly?

Countly is a product analytics solution and innovation enabler that helps teams track product performance and customer journey and behavior across mobile, web, and desktop applications. Ensuring privacy by design, Countly allows you to innovate and enhance your products to provide personalized and customized customer experiences, and meet key business and revenue goals.

Track, measure, and take action - all without leaving Countly.

Questions or feature requests? Join the Countly Community on Discord
Looking for the Countly Server? Countly Server repository
Looking for other Countly SDKs? An overview of all Countly SDKs for mobile, web and desktop

Integrating Countly SDK in your projects

For a detailed description on how to use this SDK check out our documentation.

For information about how to add the SDK to your project, please check this section of the documentation.

You can reach minimal integration info for your website from this section of the documentation.

Countly Web SDK has JSDoc3 compatible comments, and you can generate documentation by running npm run-script docs or you can use the online version.

For an example integration of this SDK, you can have a look here.

This SDK supports the following features: * Analytics * User Profiles * Crash Reports * A/B Testing * Performance Monitoring * Feedback Widgets

Security

Security is very important to us. If you discover any issue regarding security, please disclose the information responsibly by sending an email to security@count.ly and not by creating a GitHub issue.

Badges

If you like Countly, why not use one of our badges and give a link back to us so others know about this wonderful platform?

<a href="https://countly.com/f/badge" rel="nofollow"><img style="width:145px;height:60px" src="https://countly.com/badges/dark.svg" alt="Countly - Product Analytics" /></a>

<a href="https://countly.com/f/badge" rel="nofollow"><img style="width:145px;height:60px" src="https://countly.com/badges/light.svg" alt="Countly - Product Analytics" /></a>

How can I help you with your efforts?

Glad you asked! For community support, feature requests, and engaging with the Countly Community, please join us at our Discord Server. We're excited to have you there!

Also, we are on Twitter and LinkedIn if you would like to keep up with Countly related updates.

Files (115)

File	Role	Description
`.github` (1 file, 1 directory)
`cypress` (1 file, 4 directories)
`examples` (18 files, 6 directories)
`lib` (3 files)
`plugin` (2 directories)
`.eslintignore`	Data	Auxiliary data
`.eslintrc.js`	Class	Class source
`.markdownlint.json`	Data	Auxiliary data
`.markdownlintignore`	Data	Auxiliary data
`.stylelintrc.json`	Data	Auxiliary data
`CHANGELOG.md`	Example	Example script
`cypress.config.js`	Class	Class source
`generateDocs.sh`	Data	Auxiliary data
`jsdoc_conf.json`	Data	Auxiliary data
`LICENSE`	Lic.	License text
`package.json`	Data	npm support
`README.md`	Doc.	Documentation
`SECURITY.md`	Data	Auxiliary data

File	Role	Description
`codeql-analysis.yml`	Data	Auxiliary data
`documentation.yml`	Data	Auxiliary data
`node.js.yml`	Data	Auxiliary data
`release_notice.yml`	Data	Auxiliary data

File	Role	Description
`e2e` (27 files)
`fixtures` (12 files)
`plugins` (1 file)
`support` (5 files)
`.eslintrc.js`	Class	Class source

File	Role	Description
`async_queue.cy.js`	Example	Example script
`bridged_utils.cy.js`	Aux.	Configuration script
`consents.cy.js`	Aux.	Configuration script
`crashes.cy.js`	Aux.	Configuration script
`device_id.cy.js`	Aux.	Configuration script
`device_id_change.cy.js`	Example	Example script
`device_id_init_scenarios.cy.js`	Aux.	Configuration script
`events.cy.js`	Aux.	Configuration script
`health_check.cy.js`	Example	Example script
`heatmaps.cy.js`	Example	Example script
`integration.cy.js`	Aux.	Configuration script
`internal_limits.cy.js`	Aux.	Configuration script
`manual_widget_reporting.cy.js`	Example	Example script
`multi_instance.cy.js`	Aux.	Configuration script
`remaining_requests.cy.js`	Aux.	Configuration script
`reponse_validation.cy.js`	Aux.	Configuration script
`salt.cy.js`	Aux.	Configuration script
`sessions.cy.js`	Aux.	Configuration script
`storage.cy.js`	Aux.	Configuration script
`storage_change.cy.js`	Aux.	Configuration script
`user_agent.cy.js`	Aux.	Configuration script
`user_details.cy.js`	Aux.	Configuration script
`utm.cy.js`	Aux.	Configuration script
`views.cy.js`	Aux.	Configuration script
`view_utm_referrer.cy.js`	Aux.	Configuration script
`web_worker_queues.cy.js`	Example	Example script
`web_worker_requests.cy.js`	Example	Example script

File	Role	Description
`base.html`	Doc.	Documentation
`click_test.html`	Doc.	Documentation
`multi_instance.html`	Doc.	Documentation
`referrer.html`	Doc.	Documentation
`scroll_test.html`	Doc.	Documentation
`scroll_test_2.html`	Doc.	Documentation
`scroll_test_3.html`	Doc.	Documentation
`session_test_auto.html`	Doc.	Documentation
`session_test_manual_1.html`	Doc.	Documentation
`session_test_manual_2.html`	Doc.	Documentation
`user_agent.html`	Doc.	Documentation
`variables.json`	Data	Auxiliary data

File	Role	Description
`commands.js`	Aux.	Auxiliary script
`e2e.js`	Aux.	Configuration script
`helper.js`	Class	Class source
`index.js`	Aux.	Auxiliary script
`integration_helper.js`	Example	Example script

File	Role	Description
`Angular` (1 file)
`images` (2 files)
`mpa` (4 files)
`react` (1 directory)
`style` (1 file)
`Symbolication` (2 directories)
`create_examples.py`	Example	Example script
`examples_feedback_widgets.html`	Doc.	Documentation
`example_apm.html`	Doc.	Documentation
`example_apm_async.html`	Doc.	Documentation
`example_async.html`	Doc.	Documentation
`example_fb.html`	Data	Auxiliary data
`example_formdata.html`	Data	Auxiliary data
`example_ga_adapter.html`	Doc.	Documentation
`example_gdpr.html`	Doc.	Documentation
`example_helpers.html`	Doc.	Documentation
`example_multiple_instances.html`	Doc.	Documentation
`example_opt_out.html`	Doc.	Documentation
`example_rating_widgets.html`	Doc.	Documentation
`example_remote_config.html`	Doc.	Documentation
`example_sync.html`	Doc.	Documentation
`example_web_worker.html`	Doc.	Documentation
`README.md`	Doc.	Documentation
`worker.js`	Aux.	Auxiliary script

File	Role	Description
`logo.png`	Data	Auxiliary data
`team_countly.jpg`	Data	Auxiliary data

File	Role	Description
`dummy_users.js`	Aux.	Auxiliary script
`helper_functions.js`	Aux.	Auxiliary script
`index.html`	Doc.	Documentation
`worker_for_test.js`	Aux.	Auxiliary script

File	Role	Description
`Components` (6 files)
`App-WithEffect.js`	Aux.	Auxiliary script
`App-WithRouter.js`	Class	Class source
`App.test.js`	Aux.	Auxiliary script
`ErrorBoundary.js`	Class	Class source
`index.css`	Data	Auxiliary data
`index.js`	Aux.	Auxiliary script
`Location-WithEffect.js`	Aux.	Auxiliary script
`Location-WithRouter.js`	Class	Class source
`serviceWorker.js`	Example	Example script
`setupTests.js`	Aux.	Auxiliary script

File	Role	Description
`Contact.js`	Aux.	Auxiliary script
`countly.jpg`	Data	Auxiliary data
`Header.js`	Aux.	Auxiliary script
`Home.js`	Aux.	Auxiliary script
`styles.css`	Data	Auxiliary data
`Users.js`	Aux.	Auxiliary script

File	Role	Description
`countly.d.ts`	Example	Example script
`countly.js`	Class	Class source
`countly.min.js`	Class	Class source

File	Role	Description
`boomerang.min.js`	Class	Class source
`countly_boomerang.js`	Example	Example script

File	Role	Description
`doc.md`	Example	Example script
`ga_adapter.js`	Aux.	Auxiliary script

	countly-web-sdk-2024-11-13.zip
	countly-web-sdk-2024-11-13.tar.gz