Google Analytics(分析)嵌入api在Angular 2应用程序上不起作用 [英] Google Analytics embed api not working on Angular 2 app

问题描述

我正在使用以下代码将Google Analytics(分析)api嵌入到Angular 2应用程序中:

I am using the following code to embed Google Analytics api into my Angular 2 app:

Mycomponent.html

Mycomponent.html

  <div id="embed-api-auth-container"></div>
  <div id="chart-container"></div>
  <div id="view-selector-container"></div>

<script>

  gapi.analytics.ready(function() {

    /**
     * Authorize the user immediately if the user has already granted access.
     * If no access has been created, render an authorize button inside the
     * element with the ID "embed-api-auth-container".
     */
    gapi.analytics.auth.authorize({
      container: 'embed-api-auth-container',
      clientid: My-Client-Id
    });


    /**
     * Create a new ViewSelector instance to be rendered inside of an
     * element with the id "view-selector-container".
     */
    var viewSelector = new gapi.analytics.ViewSelector({
      container: 'view-selector-container'
    });

    // Render the view selector to the page.
    viewSelector.execute();


    /**
     * Create a new DataChart instance with the given query parameters
     * and Google chart options. It will be rendered inside an element
     * with the id "chart-container".
     */
    var dataChart = new gapi.analytics.googleCharts.DataChart({
      query: {
        metrics: 'ga:sessions',
        dimensions: 'ga:date',
        'start-date': '30daysAgo',
        'end-date': 'yesterday'
      },
      chart: {
        container: 'chart-container',
        type: 'LINE',
        options: {
          width: '100%'
        }
      }
    });


    /**
     * Render the dataChart on the page whenever a new view is selected.
     */
    viewSelector.on('change', function(ids) {
      dataChart.set({query: {ids: ids}}).execute();
    });

  });
</script>

将My-Client-Id替换为Google客户端ID，并在index.html中，在标记中添加了loading platform.js代码，如下所示:

Replaced My-Client-Id with Google client Id and in index.html added loading platform.js code in tag as below:

     <script>
    (function(w,d,s,g,js,fs){
      g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
      js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
      js.src='https://apis.google.com/js/platform.js';
      fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
    }(window,document,'script'));
  </script>

我已经在基于jQuery的应用程序中测试了相同的代码，效果很好，但是在Angular2应用程序中显示为空白页面，没有JavaScript控制台错误.

I have tested the same code in jQuery based application which is working fine but its showing blank page in Angular2 app with no JavaScript console errors.

我也已将网站添加到授权的JavaScript来源.我们需要对Angular2应用进行其他配置吗?

I have added the website to authorized JavaScript origin as well. Is there any other configurations do we need to do for Angular2 app?

为您提供信息，我已经创建了oAuth客户端ID，启用了Analytics API，将网站添加到了授权的JavaScript来源，并禁用了我的adblocker.

For your information,I have created oAuth Client ID, enabled the Analytics API, added website to authorized JavaScript origin and disabled my adblocker.

推荐答案

组件HTML文件中的脚本标签为

The script tag in the component HTML file is automatically stripped by angular

因此，您需要将ngOnInit()函数中的gapi.analytics.ready函数移至Mycomponent.ts文件中.

Therefore you need to move the gapi.analytics.ready function to your Mycomponent.ts file, in ngOnInit() function.

index.html文件中的script标签很好，您可以保留它.

The script tag in the index.html file is fine, you can keep it.

这篇关于Google Analytics(分析)嵌入api在Angular 2应用程序上不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！