app/Plugin/SiteKit42/Resource/template/admin/dashboard.twig line 1

Open in your IDE?
  1. {% extends '@admin/default_frame.twig' %}
  3. {% set menus = ['site_kit', 'gsc_query'] %}
  5. {% block title %}Site Kit{% endblock %}
  6. {% block sub_title %}ダッシュボード{% endblock %}
  8. {% block stylesheet %}{% endblock stylesheet %}
  10. {% block javascript %}
  11.     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  12.     <script type="text/javascript">
  13.         google.charts.load('current', {'packages': ['line', 'corechart']});
  14.         google.charts.setOnLoadCallback(drawChart);
  16.         function drawChart() {
  17.             let classicOptions = {
  18.                 height: 500,
  19.                 // Gives each series an axis that matches the vAxes number below.
  20.                 series: {
  21.                     0: {targetAxisIndex: 0},
  22.                     1: {targetAxisIndex: 1}
  23.                 },
  24.                 vAxes: {
  25.                     // Adds titles to each axis.
  26.                     0: {title: 'クリック数'},
  27.                     1: {title: '表示回数'}
  28.                 }
  29.             };
  30.             let data = google.visualization.arrayToDataTable({{ json_date|json_encode|raw }});
  32.             console.log(data);
  34.             let chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
  36.             chart.draw(data, classicOptions);
  37.         }
  38.     </script>
  39.     <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  40.     <script>
  41.         function run(strategy) {
  42.             const url = setUpQuery(strategy);
  43.             fetch(url)
  44.                 .then(response => response.json())
  45.                 .then(json => {
  46.                     google.charts.load('current', {'packages': ['gauge']});
  47.                     google.charts.setOnLoadCallback(drawChart);
  49.                     function drawChart() {
  50.                         var data = google.visualization.arrayToDataTable([
  51.                             ['Label', 'Value'],
  52.                             [strategy, json.lighthouseResult.categories.performance.score * 100]
  53.                         ]);
  54.                         var options = {
  55.                             width: 800, height: 180,
  56.                             redFrom: 0, redTo: 49,
  57.                             yellowFrom: 50, yellowTo: 89,
  58.                             greenFrom: 90, greenTo: 100,
  59.                             minorTicks: 5
  60.                         };
  61.                         var chart = new google.visualization.Gauge(document.getElementById('chart_div_' + strategy));
  62.                         chart.draw(data, options);
  63.                     }
  64.                     if (json.loadingExperience.metrics) {
  66.                         var fieldMetrics = [
  67.                             {'metric': 'FIRST_CONTENTFUL_PAINT_MS', 'id': 'field-data-fcp'},
  68.                             {'metric': 'FIRST_INPUT_DELAY_MS', 'id': 'field-data-fid'},
  69.                             {'metric': 'LARGEST_CONTENTFUL_PAINT_MS', 'id': 'field-data-lcp'},
  70.                             {'metric': 'CUMULATIVE_LAYOUT_SHIFT_SCORE', 'id': 'field-data-cls'}
  71.                         ];
  72.                         var badgeConfig = {'FAST': 'badge-success', 'AVERAGE': 'badge-warning', 'SLOW': 'badge-danger'};
  73.                         var scoreLabels = ['良好', '改善が必要', '低速'];
  75.                         fieldMetrics.forEach(function (m) {
  76.                             var id = '#' + strategy + '-' + m.id;
  77.                             var data = json.loadingExperience.metrics[m.metric];
  78.                             data.distributions.sort(function (d) {
  79.                                 return d.min
  80.                             });
  81.                             $(id + ' span.badge').addClass(badgeConfig[data.category]);
  82.                             data.distributions.forEach(function (d, i) {
  83.                                 var proportionLabel = Math.round(d.proportion * 100) + '%';
  84.                                 var message = 'このページの読み込みの' + proportionLabel + 'は「' + scoreLabels[i] + '」でした。('
  85.                                 if (d.min && d.max) {
  86.                                     message += (d.min + ' 〜 ' + d.max);
  87.                                 } else if (d.min) {
  88.                                     message += ('> ' + d.min);
  89.                                 } else if (d.max) {
  90.                                     message += ('< ' + d.max);
  91.                                 }
  92.                                 if (m.metric.match(/MS$/)) {
  93.                                     message += ' ms'
  94.                                 }
  95.                                 message += ')';
  96.                                 $(id + ' div.progress-bar:eq(' + i + ')')
  97.                                     .css('width', d.proportion * 100 + '%')
  98.                                     .text(proportionLabel)
  99.                                     .attr({'data-tooltip': 'true', 'data-original-title': message})
  100.                             });
  101.                         });
  102.                     } else {
  103.                         $('.' + strategy + '-field')
  104.                             .html('<div class="col-12 m-2"><div class="alert alert-warning" role="alert">このページの実際の速度データが十分にありません。</div></div>');
  105.                     }
  107.                     function badgeClass(score) {
  108.                         if (score <= 0.49) {
  109.                             return 'badge-danger';
  110.                         } else if (score <= 0.89) {
  111.                             return 'badge-warning';
  112.                         } else {
  113.                             return 'badge-success';
  114.                         }
  115.                     }
  117.                     $('#' + strategy + '-lab-fcp-value').text(json.lighthouseResult.audits["first-contentful-paint"].displayValue);
  118.                     $('#' + strategy + '-lab-fcp-badge').addClass(badgeClass(json.lighthouseResult.audits["first-contentful-paint"].score));
  119.                     $('#' + strategy + '-lab-tti-value').text(json.lighthouseResult.audits["interactive"].displayValue);
  120.                     $('#' + strategy + '-lab-tti-badge').addClass(badgeClass(json.lighthouseResult.audits["interactive"].score));
  121.                     $('#' + strategy + '-lab-speed-value').text(json.lighthouseResult.audits["speed-index"].displayValue);
  122.                     $('#' + strategy + '-lab-speed-badge').addClass(badgeClass(json.lighthouseResult.audits["speed-index"].score));
  123.                     $('#' + strategy + '-lab-tbt-value').text(json.lighthouseResult.audits["total-blocking-time"].displayValue);
  124.                     $('#' + strategy + '-lab-tbt-badge').addClass(badgeClass(json.lighthouseResult.audits["total-blocking-time"].score));
  125.                     $('#' + strategy + '-lab-lcp-value').text(json.lighthouseResult.audits["largest-contentful-paint"].displayValue);
  126.                     $('#' + strategy + '-lab-lcp-badge').addClass(badgeClass(json.lighthouseResult.audits["largest-contentful-paint"].score));
  127.                     $('#' + strategy + '-lab-cls-value').text(json.lighthouseResult.audits["cumulative-layout-shift"].displayValue);
  128.                     $('#' + strategy + '-lab-cls-badge').addClass(badgeClass(json.lighthouseResult.audits["cumulative-layout-shift"].score));
  129.                 }).then(function() {
  130.                     $('.' + strategy + '-init').addClass('d-none');
  131.                     $('.' + strategy + '-loaded').removeClass('d-none');
  132.                 });
  133.         }
  135.         function setUpQuery(strategy) {
  136.             const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
  137.             const parameters = {
  138.                 url: encodeURIComponent('{{ ownedSiteUrl }}'),
  139.                 strategy: strategy
  140.             };
  141.             let query = `${api}?`;
  142.             for (key in parameters) {
  143.                 query += `${key}=${parameters[key]}&`;
  144.             }
  145.             return query;
  146.         }
  148.         run('desktop');
  149.         run('mobile');
  150.         $('[data-toggle="tooltip"]').tooltip();
  151.     </script>
  152. {% endblock javascript %}
  154. {% block main %}
  155. <div class="c-contentsArea__cols">
  156.     <div class="c-contentsArea__primaryCol">
  158.         <!-- パフォーマンススコア-START -->
  159.         <div class="card rounded border-0 mb-4">
  160.             <div class="card-header">
  161.                 <div class="row">
  162.                     <div class="col-8">
  163.                         <h3>パフォーマンス</h3>
  164.                     </div>
  165.                     <div class="col-4 text-end">
  166.                         <a href="https://developers.google.com/web/tools/lighthouse#devtools" target="_blank">
  167.                             <button type="button" class="btn btn-ec-regular">
  168.                                 <img style="width: 20px;" src="{{ asset('SiteKit42/assets/lighthouse-logo.svg', 'plugin') }}" alt="google-pagespeed-insights image"> {{ 'Lighthouseのすべてのレポートを確認する'|trans }}
  169.                             </button>
  170.                         </a>
  171.                     </div>
  172.                 </div>
  173.             </div>
  174.             <div class="collapse show ec-cardCollapse" id="basicConfig">
  175.                 <div class="card-body">
  176.                     <div class="row">
  177.                         <div class="col-6 border-end">
  178.                             <div id="chart_div_desktop" class="d-flex align-items-center justify-content-center" style="height: 240px;">
  179.                                 <img src="{{ asset('assets/img/loading.gif', 'admin') }}" alt="loading">
  180.                             </div>
  181.                         </div>
  183.                         <div class="col-6">
  184.                             <div id="chart_div_mobile" class="d-flex align-items-center justify-content-center" style="height: 240px;">
  185.                                 <img src="{{ asset('assets/img/loading.gif', 'admin') }}" alt="loading">
  186.                             </div>
  187.                         </div>
  188.                     </div>
  189.                     <div class="pb-4">
  190.                         <h5>フィールドデータ</h5>
  191.                         <div class="row">
  192.                             <div class="col-6 border-end">
  193.                                 <div class="row desktop-init">
  194.                                     <div class="col-12">
  195.                                         <div class="d-flex align-items-center justify-content-center" style="height: 100px;">
  196.                                             <img src="{{ asset('assets/img/loading.gif', 'admin') }}" alt="loading">
  197.                                         </div>
  198.                                     </div>
  199.                                 </div>
  200.                                 <div class="row d-none desktop-loaded desktop-field">
  201.                                     <div class="col-6 py-1" id="desktop-field-data-fcp">
  202.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> First Contentful Paint（FCP）</span></div>
  203.                                         <div>
  204.                                             <div class="progress" style="height: 18px;">
  205.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  206.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  207.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  208.                                             </div>
  209.                                         </div>
  210.                                     </div>
  211.                                     <div class="col-6 py-1" id="desktop-field-data-fid">
  212.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> First Input Delay（FID）</span></div>
  213.                                         <div>
  214.                                             <div class="progress" style="height: 18px;">
  215.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  216.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  217.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  218.                                             </div>
  219.                                         </div>
  220.                                     </div>
  221.                                     <div class="col-6 py-1" id="desktop-field-data-lcp">
  222.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> Largest Contentful Paint（LCP）</span></div>
  223.                                         <div>
  224.                                             <div class="progress" style="height: 18px;">
  225.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  226.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  227.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  228.                                             </div>
  229.                                         </div>
  230.                                     </div>
  231.                                     <div class="col-6 py-1" id="desktop-field-data-cls">
  232.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> Cumulative Layout Shift（CLS）</span></div>
  233.                                         <div>
  234.                                             <div class="progress" style="height: 18px;">
  235.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  236.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  237.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  238.                                             </div>
  239.                                         </div>
  240.                                     </div>
  241.                                 </div>
  242.                             </div>
  243.                             <div class="col-6">
  244.                                 <div class="row mobile-init">
  245.                                     <div class="col-12">
  246.                                         <div class="d-flex align-items-center justify-content-center" style="height: 100px;">
  247.                                             <img src="{{ asset('assets/img/loading.gif', 'admin') }}" alt="loading">
  248.                                         </div>
  249.                                     </div>
  250.                                 </div>
  251.                                 <div class="row d-none mobile-loaded mobile-field">
  252.                                     <div class="col-6 py-1" id="mobile-field-data-fcp">
  253.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> First Contentful Paint（FCP）</span></div>
  254.                                         <div>
  255.                                             <div class="progress" style="height: 18px;">
  256.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  257.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  258.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  259.                                             </div>
  260.                                         </div>
  261.                                     </div>
  262.                                     <div class="col-6 py-1" id="mobile-field-data-fid">
  263.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> First Input Delay（FID）</span></div>
  264.                                         <div>
  265.                                             <div class="progress" style="height: 18px;">
  266.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  267.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  268.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  269.                                             </div>
  270.                                         </div>
  271.                                     </div>
  272.                                     <div class="col-6 py-1" id="mobile-field-data-lcp">
  273.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> Largest Contentful Paint（LCP）</span></div>
  274.                                         <div>
  275.                                             <div class="progress" style="height: 18px;">
  276.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  277.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  278.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  279.                                             </div>
  280.                                         </div>
  281.                                     </div>
  282.                                     <div class="col-6 py-1" id="mobile-field-data-cls">
  283.                                         <div class="mb-2"><span class="badge">&nbsp;&nbsp;</span><span class="fw-bold"> Cumulative Layout Shift（CLS）</span></div>
  284.                                         <div>
  285.                                             <div class="progress" style="height: 18px;">
  286.                                                 <div class="progress-bar bg-success" role="progressbar" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  287.                                                 <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  288.                                                 <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" data-toggle="tooltip"></div>
  289.                                             </div>
  290.                                         </div>
  291.                                     </div>
  292.                                 </div>
  293.                             </div>
  294.                         </div>
  295.                     </div>
  296.                     <div>
  297.                         <h5>ラボデータ</h5>
  298.                         <div class="row">
  299.                             <div class="col-6 border-end desktop-init">
  300.                                 <div class="d-flex align-items-center justify-content-center" style="height: 80px;">
  301.                                     <img src="{{ asset('assets/img/loading.gif', 'admin') }}" alt="loading">
  302.                                 </div>
  303.                             </div>
  304.                             <div class="col-6 border-end d-none desktop-loaded">
  305.                                 <div class="row">
  306.                                     <div class="col-4">
  307.                                         <span class="badge" id="desktop-lab-fcp-badge">&nbsp;&nbsp;</span><span class="fw-bold"> First Contentful Paint</span>
  308.                                     </div>
  309.                                     <div class="col-2 text-end" id="desktop-lab-fcp-value"></div>
  310.                                     <div class="col-4">
  311.                                         <span class="badge" id="desktop-lab-tti-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Time to Interactive</span>
  312.                                     </div>
  313.                                     <div class="col-2 text-end" id="desktop-lab-tti-value"></div>
  314.                                     <div class="col-4">
  315.                                         <span class="badge" id="desktop-lab-speed-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Speed Index</span>
  316.                                     </div>
  317.                                     <div class="col-2 text-end" id="desktop-lab-speed-value"></div>
  318.                                     <div class="col-4">
  319.                                         <span class="badge" id="desktop-lab-tbt-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Total Blocking Time</span>
  320.                                     </div>
  321.                                     <div class="col-2 text-end" id="desktop-lab-tbt-value"></div>
  322.                                     <div class="col-4">
  323.                                         <span class="badge" id="desktop-lab-lcp-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Largest Contentful Paint</span>
  324.                                     </div>
  325.                                     <div class="col-2 text-end" id="desktop-lab-lcp-value"></div>
  326.                                     <div class="col-4">
  327.                                         <span class="badge" id="desktop-lab-cls-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Cumulative Layout Shift</span>
  328.                                     </div>
  329.                                     <div class="col-2 text-end" id="desktop-lab-cls-value"></div>
  330.                                 </div>
  331.                             </div>
  332.                             <div class="col-6 border-end mobile-init">
  333.                                 <div class="d-flex align-items-center justify-content-center" style="height: 80px;">
  334.                                     <img src="{{ asset('assets/img/loading.gif', 'admin') }}" alt="loading">
  335.                                 </div>
  336.                             </div>
  337.                             <div class="col-6">
  338.                                 <div class="row d-none mobile-loaded">
  339.                                     <div class="col-4">
  340.                                         <span class="badge" id="mobile-lab-fcp-badge">&nbsp;&nbsp;</span><span class="fw-bold"> First Contentful Paint</span>
  341.                                     </div>
  342.                                     <div class="col-2 text-end" id="mobile-lab-fcp-value"></div>
  343.                                     <div class="col-4">
  344.                                         <span class="badge" id="mobile-lab-tti-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Time to Interactive</span>
  345.                                     </div>
  346.                                     <div class="col-2 text-end" id="mobile-lab-tti-value"></div>
  347.                                     <div class="col-4">
  348.                                         <span class="badge" id="mobile-lab-speed-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Speed Index</span>
  349.                                     </div>
  350.                                     <div class="col-2 text-end" id="mobile-lab-speed-value"></div>
  351.                                     <div class="col-4">
  352.                                         <span class="badge" id="mobile-lab-tbt-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Total Blocking Time</span>
  353.                                     </div>
  354.                                     <div class="col-2 text-end" id="mobile-lab-tbt-value"></div>
  355.                                     <div class="col-4">
  356.                                         <span class="badge" id="mobile-lab-lcp-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Largest Contentful Paint</span>
  357.                                     </div>
  358.                                     <div class="col-2 text-end" id="mobile-lab-lcp-value"></div>
  359.                                     <div class="col-4">
  360.                                         <span class="badge" id="mobile-lab-cls-badge">&nbsp;&nbsp;</span><span class="fw-bold"> Cumulative Layout Shift</span>
  361.                                     </div>
  362.                                     <div class="col-2 text-end" id="mobile-lab-cls-value"></div>
  363.                                 </div>
  364.                             </div>
  365.                         </div>
  367.                         <div class="pt-5">
  368.                             <span style="font-size: 18px;"><img style="width: 40px;" src="{{ asset('SiteKit42/assets/lighthouse-logo.svg', 'plugin') }}" alt="google-search-console image"> Powered by <a href="https://developers.google.com/web/tools/lighthouse" target="_blank">Lighthouse</a> (v.6.3.0)</span>
  369.                         </div>
  370.                     </div>
  371.                 </div>
  372.             </div>
  373.         </div>
  374.         <!-- パフォーマンススコア-END -->
  376.             <!-- アクセス推移-START -->
  377.             <div class="card rounded border-0 mb-4">
  378.                 <div class="card-header">
  379.                     <div class="row">
  380.                         <div class="col-8">
  381.                             <h3>アクセス推移（過去28日間）</h3>
  382.                         </div>
  383.                         <div class="col-4 text-end">
  384.                             <a href="https://search.google.com/search-console?utm_source=about-page&resource_id={{ ownedSiteUrl }}"
  385.                                target="_blank">
  386.                                 <button type="button" class="btn btn-ec-regular">
  387.                                     <img style="width: 18px;"
  388.                                          src="{{ asset('SiteKit42/assets/google-search-console.svg', 'plugin') }}"
  389.                                          alt="google-search-console image"> {{ 'Google Search Consoleへ'|trans }}
  390.                                 </button>
  391.                             </a>
  392.                         </div>
  393.                     </div>
  394.                 </div>
  395.                 <div class="collapse show ec-cardCollapse" id="basicConfig">
  396.                     <div class="card-body">
  397.                         <div class="row">
  398.                             <div class="col-12">
  399.                                 <div id="curve_chart"></div>
  400.                             </div>
  401.                         </div>
  402.                     </div>
  403.                 </div>
  404.             </div>
  405.             <!-- アクセス推移-END -->
  407.             <!-- キーワード情報-START -->
  408.             <div class="card rounded border-0 mb-4">
  409.                 <div class="card-header">
  410.                     <div class="row">
  411.                         <div class="col-8">
  412.                             <h3>キーワード情報（過去28日間）</h3>
  413.                         </div>
  414.                         <div class="col-4 text-end">
  415.                             <a href="https://search.google.com/search-console?utm_source=about-page&resource_id={{ ownedSiteUrl }}"
  416.                                target="_blank">
  417.                                 <button type="button" class="btn btn-ec-regular">
  418.                                     <img style="width: 18px;"
  419.                                          src="{{ asset('SiteKit42/assets/google-search-console.svg', 'plugin') }}"
  420.                                          alt="google-search-console image"> {{ 'Google Search Consoleへ'|trans }}
  421.                                 </button>
  422.                             </a>
  423.                         </div>
  424.                     </div>
  425.                 </div>
  426.                 <div class="collapse show ec-cardCollapse" id="basicConfig">
  427.                     <div class="card-body">
  428.                         <div class="row">
  429.                             <div class="col-12">
  430.                                 {% if json_query.rows %}
  431.                                 <table class="table table-sm table-striped table-bordered">
  432.                                     <colgroup>
  433.                                         <col>
  434.                                         <col style="width: 10em;">
  435.                                         <col style="width: 10em;">
  436.                                         <col style="width: 10em;">
  437.                                         <col style="width: 10em;">
  438.                                     </colgroup>
  439.                                     <thead>
  440.                                     <tr>
  441.                                         <th class="border-top-0 py-2 text-start">キーワード</th>
  442.                                         <th class="border-top-0 py-2 text-start">クリック数</th>
  443.                                         <th class="border-top-0 py-2 text-start">インプレッション</th>
  444.                                         <th class="border-top-0 py-2 text-start">クリックレート</th>
  445.                                         <th class="border-top-0 py-2 text-start">平均表示ランク</th>
  446.                                     </tr>
  447.                                     </thead>
  448.                                     <tbody>
  449.                                     {% for row in json_query.rows %}
  450.                                         <tr>
  451.                                             <td class="align-middle text-start ps-3">{{ row.keys[0] }}</td>
  452.                                             <td class="align-middle text-end ps-3">{{ row.clicks|number_format }}</td>
  453.                                             <td class="align-middle text-end ps-3">{{ row.impressions|number_format }}</td>
  454.                                             <td class="align-middle text-end ps-3">{{ row.ctr }}</td>
  455.                                             <td class="align-middle text-end ps-3">{{ row.position }}</td>
  456.                                         </tr>
  457.                                     {% endfor %}
  458.                                     </tbody>
  459.                                 </table>
  460.                                 {% else %}
  461.                                 <div class="alert alert-warning" role="alert">データがまだありません。</div>
  462.                                 {% endif %}
  463.                             </div>
  464.                         </div>
  465.                     </div>
  466.                 </div>
  467.             </div>
  468.             <!-- キーワード情報-END -->
  470.             <!-- ページ情報-START -->
  471.             <div class="card rounded border-0 mb-4">
  472.                 <div class="card-header">
  473.                     <div class="row">
  474.                         <div class="col-8">
  475.                             <h3>ページ情報（過去28日間）</h3>
  476.                         </div>
  477.                         <div class="col-4 text-end">
  478.                             <a href="https://search.google.com/search-console?utm_source=about-page&resource_id={{ ownedSiteUrl }}"
  479.                                target="_blank">
  480.                                 <button type="button" class="btn btn-ec-regular">
  481.                                     <img style="width: 18px;"
  482.                                          src="{{ asset('SiteKit42/assets/google-search-console.svg', 'plugin') }}"
  483.                                          alt="google-search-console image"> {{ 'Google Search Consoleへ'|trans }}
  484.                                 </button>
  485.                             </a>
  486.                         </div>
  487.                     </div>
  488.                 </div>
  489.                 <div class="collapse show ec-cardCollapse" id="basicConfig">
  490.                     <div class="card-body">
  491.                         <div class="row">
  492.                             <div class="col-12">
  493.                                 {% if json_page.rows %}
  494.                                 <table class="table table-sm table-striped table-bordered">
  495.                                     <colgroup>
  496.                                         <col>
  497.                                         <col style="width: 10em;">
  498.                                         <col style="width: 10em;">
  499.                                         <col style="width: 10em;">
  500.                                         <col style="width: 10em;">
  501.                                     </colgroup>
  502.                                     <thead>
  503.                                     <tr>
  504.                                         <th class="border-top-0 py-2 text-start">ページ</th>
  505.                                         <th class="border-top-0 py-2 text-start">クリック数</th>
  506.                                         <th class="border-top-0 py-2 text-start">インプレッション</th>
  507.                                         <th class="border-top-0 py-2 text-start">クリックレート</th>
  508.                                         <th class="border-top-0 py-2 text-start">平均表示ランク</th>
  509.                                     </tr>
  510.                                     </thead>
  511.                                     <tbody>
  512.                                     {% for row in json_page.rows %}
  513.                                         <tr>
  514.                                             <td class="align-middle text-start ps-3">{{ row.keys[0] }}</td>
  515.                                             <td class="align-middle text-end ps-3">{{ row.clicks|number_format }}</td>
  516.                                             <td class="align-middle text-end ps-3">{{ row.impressions|number_format }}</td>
  517.                                             <td class="align-middle text-end ps-3">{{ row.ctr }}</td>
  518.                                             <td class="align-middle text-end ps-3">{{ row.position }}</td>
  519.                                         </tr>
  520.                                     {% endfor %}
  521.                                     </tbody>
  522.                                 </table>
  523.                                 {% else %}
  524.                                 <div class="alert alert-warning" role="alert">データがまだありません。</div>
  525.                                 {% endif %}
  526.                             </div>
  527.                         </div>
  528.                     </div>
  529.                 </div>
  530.             </div>
  531.             <!-- ページ情報-END -->
  532.         </div>
  533.     </div>
  534.     {% endblock %}