如何在我的React应用中添加Intercom脚本？

Question

我正在使用redux-segment来进行分析，并尝试实现Intercom。我遇到的问题实际上是如何加载它等等。我正在尝试遵循这个Intercom segment，但仍然不确定在哪里输入app id等等。我想在获取当前用户时在我的动作创建器中加载intercom，但没有关于如何实际加载intercom的文档。

import { EventTypes } from 'redux-segment';

export function currentUser() {

  const request = user.current(); //this correctly grabs current user.

  if(request == null) {
     //having trouble with this part. load intercom non user specific
  } else {
     load intercom user specific
  }

  return {
    type: CURRENT_USER,
    payload: request
  };
}

- joethemow

---

如果您查看他们的文档（https://developers.intercom.com/docs/single-page-app），就像几乎所有其他分析提供商一样，您需要通过在HTML文件中使用脚本标签来加载分析，该标签将Intercom分配给您的窗口，然后您就可以访问它。 - John Ruddell

是的，我通过将其放入index.html文件中找到了解决方法，但我不想在那里加载它。我能否在我的index.js文件中加载它？ - joethemow

当然，我是说这只是JavaScript。只需在componentWillMount或其他地方运行该JavaScript代码，它应该具有相同的效果。 - John Ruddell

好的，这就解决了问题，谢谢。 - joethemow

好的，太棒了！我刚写了一个答案，这样我们就可以关闭这个问题了！ :) - John Ruddell

Answer 1

你需要做的是将加载Intercom脚本的代码放置在你的index.html或入口组件中，以加载他们的分析对象。你可以参考他们的文档，像这样初始化它。

class MyComponent extends Component {
    constructor(props){
        super(props);
        window.Intercom('boot', {
          app_id: INTERCOM_APP_ID,
          // other settings you'd like to use to initialize Intercom
        });
    }
    ....
}

- John Ruddell

---

@damianesteban OP已经有了运行代码，只是在寻找在哪里运行它，并没有在问题中提供代码...我的回答与问题的范围有关，话虽如此，我很乐意从文档站点中提取特定的初始化信息。通常我建议先查看他们提供的文档，然后再去SO上寻找初始化的方法。 - John Ruddell

Answer 2

采纳的答案是正确的。具体来说：

class LandingPage extends Component {

  constructor(props) {
    super(props);

    // initialize intercom (don't forget to *update* when page changes)
    window.Intercom("boot", {
      app_id: "your_app_id"
    });
  }
}

https://app.intercom.io/a/apps/bhfx1oqj/messages/guide/identify_your_users/track_users

- user

---

这应该是被接受的答案，因为它实际上提供了一个解决方案。 - damianesteban