angular - 使用 Angular 实现时，Google Analytics Embed API 出现错误

Question

我已经将 Angular 项目中的数据发送到 Google Analytics。现在我正在尝试使用带有 Embed api 的 Google Analytics api 从 Google Analytics 中检索数据。我想在我的角度应用程序中显示它我遵循了本教程Embed API但我在我的 index.html 文件中的这一行的控制台中收到错误：

js.src='https://apis.google.com/js/platform.js';  

我可以得到一些帮助，请如何修复该错误并在我的角度视图中呈现我的谷歌分析数据！

索引.html

<!-- Global site tag (gtag.js) - Google Analytics -->
       <script async src="https://www.googletagmanager.com/gtag/js?id=UA-192522348-1"></script>
       <script>
           window.dataLayer = window.dataLayer || [];
   
           function gtag() {
               dataLayer.push(arguments);
           }
           gtag('js', new Date());
   
       </script>
       <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>

分析.componnet.ts

 ngOnInit(): void {
   
       gapi.analytics.ready(function() {
       console.log("finished loading");
         /**
          * 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: <<here 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 table chart showing top browsers for users to interact with.
          * Clicking on a row in the table will update a second timeline chart with
          * data from the selected browser.
          */
         var mainChart = new gapi.analytics.googleCharts.DataChart({
           query: {
             'dimensions': 'ga:browser',
             'metrics': 'ga:sessions',
             'sort': '-ga:sessions',
             'max-results': '6'
           },
           chart: {
             type: 'TABLE',
             container: 'main-chart-container',
             options: {
               width: '100%'
             }
           }
         });
       
       
        
       
         /**
          * Store a refernce to the row click listener variable so it can be
          * removed later to prevent leaking memory when the chart instance is
          * replaced.
          */
         var mainChartRowClickListener;
       
       
         /**
          * Update both charts whenever the selected view changes.
          */
         viewSelector.on('change', function(ids) {
           var options = {query: {ids: ids}};
       
           // Clean up any event listeners registered on the main chart before
           // rendering a new one.
           if (mainChartRowClickListener) {
             google.visualization.events.removeListener(mainChartRowClickListener);
           }
       
           mainChart.set(options).execute();
         
       
           // Only render the breakdown chart if a browser filter has been set.
          
         });
       
       
         /**
          * Each time the main chart is rendered, add an event listener to it so
          * that when the user clicks on a row, the line chart is updated with
          * the data from the browser in the clicked row.
          */
         mainChart.on('success', function(response) {
       
           var chart = response.chart;
           var dataTable = response.dataTable;
       
           // Store a reference to this listener so it can be cleaned up later.
           mainChartRowClickListener = google.visualization.events
               .addListener(chart, 'select', function(event) {
       
             // When you unselect a row, the "select" event still fires
             // but the selection is empty. Ignore that case.
             if (!chart.getSelection().length) return;
       
             var row =  chart.getSelection()[0].row;
             var browser =  dataTable.getValue(row, 0);
             var options = {
               query: {
                 filters: 'ga:browser==' + browser
               },
               chart: {
                 options: {
                   title: browser
                 }
               }
             };
       
             
           });
         });
     
       
       });
   
     }   

analytics.componenet.html

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

我在控制台中遇到的错误

4071097310-idpiframe.js:158 未捕获的类型错误：a.indexOf 不是
Object.C (4071097310- idpiframe.js:205) 在 Ah.Mf (4071097310-idpiframe.js:182) 在 b (4071097310-idpiframe.js:193) ```

标签： angulartypescriptgoogle-analytics-api