旧インストールスニペット

最終更新日:

新しいスニペット/エージェント2.0

更新されたインストールスニペットに関する情報は、こちらの記事をご覧ください。

新しいスニペットは、Pendoの[インストール設定(Install Settings)]ページにあります。新しいスニペットはすべてのフレームワークで機能し、単一ページのフレームワーク用の特定のスニペットはなくなりました。これにより、従来のスニペットのすべてのコンポーネントが置き換えられます。

旧スニペット - ほとんどのアプリ

<script>
  // 値型には文字列、数値、またはブール値を使用してください。
  window.pendo_options = {
    apiKey: '<ACTUAL_API_KEY_HERE>',

     // ユーザー情報を非同期で読み込む場合は、trueを設定します
     usePendoAgentAPI: false,

    visitor: {
      id:              'VISITOR-UNIQUE-ID'   // Required if user is logged in
      // email:        // Optional
      // role:         // Optional

      // You can add any additional visitor level key-values here,
      // as long as it's not one of the above reserved names.
    },

    account: {
      // id:           'ACCOUNT-UNIQUE-ID' // Highly recommended
      // name:         // Optional
      // planLevel:    // Optional
      // planPrice:    // Optional
      // creationDate: // Optional

      // You can add any additional account level key-values here,
      // as long as it's not one of the above reserved names.
    }
  };
  (function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = ('https:' === document.location.protocol ? 'https://' : 'http://' ) + 'd3accju1t3mngt.cloudfront.net/js/pa.min.js';
      var firstScript = document.getElementsByTagName('script')[0];
      firstScript.parentNode.insertBefore(script, firstScript);
  })();
</script>

旧スニペット - Angular

ステップ1:スニペットをインストールします。

<script src="//d3accju1t3mngt.cloudfront.net/js/angular/ng-pendo.js"></script>
<script>
  window.pendo_options = {
   apiKey: '<ACTUAL_API_KEY_HERE>',

   // This is required to be able to load data client side
   usePendoAgentAPI: true
 };
</script>

ステップ2:アプリのモジュールにPendoを含めます。ライブラリはpendolyticsです。

angular.module('your-app', [...,'pendolytics',...]);

ステップ3:$pendolytics.identify()で訪問者とアカウントのデータを設定します。

以下は、ユーザーの情報がわかっているときにトリガーされるサンプルコードです。実際のコードは、ユーザーおよび顧客データへのアクセス方法によって異なります。次の例では、ユーザーデータは$rootScope.userに保存されます。アプリケーションによっては、他の場所に保存される場合があります。

if(Auth.isLoggedIn() ) {
   // identify関数は、2つの子オブジェクト:visitorとaccountを含むObjectをパラメータとして受け取ります。

   // 例
   var options = {
     visitor: {
       id: $rootScope.user.id,
       role: $rootScope.user.role,
       email: $rootScope.user.email
       // other visitor key:value pairs
     },
     account: {
       id: $rootScope.user.account.id,
       name:  $rootScope.user.account.name
       // other account key:value pairs
     }
   };

   $pendolytics.identify(options);

 }

旧スニペット - Ember

ステップ1:スニペットをインストールします。

<script>
  window.pendo_options = {
   apiKey: '<ACTUAL_API_KEY_HERE>',

   // This is required to be able to load data client side
   usePendoAgentAPI: true
 };
  (function() {
      var script = document.createElement('script');
      script.type = 'text/javascript';
      script.async = true;
      script.src = ('https:' === document.location.protocol ? 'https://' : 'http://' ) + 'd3accju1t3mngt.cloudfront.net/js/pa.min.js';
      var firstScript = document.getElementsByTagName('script')[0];
      firstScript.parentNode.insertBefore(script, firstScript);
  })();
 </script>

ステップ2:アプリのルーターにPendoを含めます。

次のJavaScriptコードをアプリに追加すると、Pendoがページ読み込みイベントを識別できるようになります。

App.Router.reopen({
      pendoPageLoad: function() {
          pendo.pageLoad();
      }.on('didTransition')
 });

ステップ3:$pendolytics.identify()で訪問者とアカウントのデータを設定します。

以下は、ユーザーの情報がわかっているときにトリガーされるサンプルコードです。実際のコードは、ユーザーおよび顧客データへのアクセス方法によって異なります。

if(Auth.isLoggedIn(user) && Account.isLoaded(user.account)) {
   // identify関数は、2つの子オブジェクト:visitorとaccountを含むObjectをパラメータとして受け取ります

   // 例
   var options = {
     visitor: {
       id: user.id,
       role: user.role,
       email: user.email
       // other visitor key:value pairs
     },
     account: {
       id: user.account.id,
       name:  user.account.name
       // other account key:value pairs
     }
   };

   pendo.identify(options);
 }
この記事は役に立ちましたか?
1人中1人がこの記事が役に立ったと言っています