将 Countly SDK Web 与 Typescript 集成

Question

这里有人有使用 Typescript 将Countly SDK Web与 ReactJS 集成的经验吗？ 此处给出的示例假设人们使用 Javascript 来使用 SDK。 我想做类似的事情。

import { Countly } from 'countly-sdk-web';

并在网页加载时使用它来访问已在 Countly 中创建的一些 API。 任何帮助将不胜感激。

注意：文件的扩展名为 .tsx

Answer 1

您可以从此处获得有关如何将 Countly Web SDK 集成到 ReactJS 项目中的示例。

同样，导入 Countly 的基本示例如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App-WithEffect';
import * as serviceWorker from './serviceWorker';
import Countly from 'countly-sdk-web';

//Exposing Countly to the DOM as a global variable
//Usecase - Heatmaps
window.Countly = Countly;
Countly.init({
    app_key: 'YOUR_APP_KEY',
    url: 'YOUR_SERVER_URL',
    session_update: 10,
    use_session_cookie: true,
    debug: false,
    require_consent: true,
    namespace: "react-demo",
    inactivity_time: 1,
    offline_mode: false,
    // device_id: "cly-device-demo-id" //Set only if you want dont want to use countly generated device_id
});

//Since Countly is loaded and available, you can use synchronus or asynchronus calls, does not matter
Countly.q.push(['group_features', {
    activity: ["sessions", "events", "views", "location"],
    interaction: ["scrolls", "clicks", "crashes"],
    whereabouts: ["users"]
}]);

if (typeof(localStorage) !== "undefined") {
    var consents = localStorage.getItem("consents");

    if(consents){
        Countly.q.push(['add_consent', JSON.parse(consents)]);
    }
    else{
        var consent = window.confirm("We are going to track you. Do you give your consent ?");
        consents = ["activity", "interaction", "whereabouts"];
        if(consent) {
            Countly.q.push(['add_consent', consents]);
            localStorage.setItem("consents", JSON.stringify(consents));
        }
        else {
            Countly.q.push(['remove_consent', consents]);
            localStorage.removeItem("consents");
        }
    }
}

Countly.q.push(['enableRatingWidgets', {'widgets': ['widget-id-1','widget-id-2']}]);
Countly.q.push(['track_sessions']);
Countly.q.push(['track_scrolls']);
Countly.q.push(['track_clicks']);
Countly.q.push(['track_links']);
Countly.q.push(["track_errors"]);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

您可以从此处访问此代码