1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta name="description" content="Interactive analysis of Stradiji.com's last 3 months of Google Search Console data"> 7 <title>Stradiji.com - Google Search Console Analysis</title> 8 <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"> 9 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> 10 <link rel="stylesheet" href="css/style.css"> 11 <style> 12 :root { 13 --stradiji-red: #FF0000; 14 --stradiji-light-red: #FF8080; 15 --stradiji-dark-red: #CC0000; 16 } 17 18 body { 19 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 20 background-color: #f8f9fa; 21 } 22 23 .navbar { 24 background-color: var(--stradiji-red); 25 } 26 27 .navbar-brand, .nav-link { 28 color: white !important; 29 } 30 31 .nav-link:hover { 32 color: rgba(255, 255, 255, 0.8) !important; 33 } 34 35 .card { 36 border-radius: 10px; 37 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 38 margin-bottom: 20px; 39 border: none; 40 transition: transform 0.3s ease; 41 } 42 43 .card:hover { 44 transform: translateY(-5px); 45 } 46 47 .card-header { 48 background-color: var(--stradiji-red); 49 color: white; 50 border-radius: 10px 10px 0 0 !important; 51 font-weight: bold; 52 } 53 54 .btn-primary { 55 background-color: var(--stradiji-red); 56 border-color: var(--stradiji-red); 57 } 58 59 .btn-primary:hover { 60 background-color: var(--stradiji-dark-red); 61 border-color: var(--stradiji-dark-red); 62 } 63 64 .btn-outline-primary { 65 color: var(--stradiji-red); 66 border-color: var(--stradiji-red); 67 } 68 69 .btn-outline-primary:hover { 70 background-color: var(--stradiji-red); 71 border-color: var(--stradiji-red); 72 } 73 74 .metric-card { 75 text-align: center; 76 padding: 15px; 77 } 78 79 .metric-value { 80 font-size: 2rem; 81 font-weight: bold; 82 color: var(--stradiji-red); 83 } 84 85 .metric-label { 86 font-size: 1rem; 87 color: #6c757d; 88 } 89 90 .filter-container { 91 background-color: white; 92 padding: 15px; 93 border-radius: 10px; 94 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 95 margin-bottom: 20px; 96 } 97 98 .tab-content { 99 padding: 20px 0; 100 } 101 102 .nav-tabs .nav-link.active { 103 color: var(--stradiji-red); 104 font-weight: bold; 105 } 106 107 .nav-tabs .nav-link { 108 color: #6c757d; 109 } 110 111 footer { 112 background-color: #343a40; 113 color: white; 114 padding: 20px 0; 115 margin-top: 40px; 116 } 117 118 .chart-container { 119 height: 400px; 120 width: 100%; 121 } 122 123 @media (max-width: 768px) { 124 .chart-container { 125 height: 300px; 126 } 127 128 .metric-value { 129 font-size: 1.5rem; 130 } 131 } 132 </style> 133</head> 134<body> 135 <!-- Navbar --> 136 <nav class="navbar navbar-expand-lg navbar-dark sticky-top"> 137 <div class="container"> 138 <a class="navbar-brand" href="#"> 139 <i class="bi bi-bar-chart-line-fill me-2"></i> 140 Stradiji.com GSC Analysis 141 </a> 142 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"> 143 <span class="navbar-toggler-icon"></span> 144 </button> 145 <div class="collapse navbar-collapse" id="navbarNav"> 146 <ul class="navbar-nav ms-auto"> 147 <li class="nav-item"> 148 <a class="nav-link active" href="#overview">Overview</a> 149 </li> 150 <li class="nav-item"> 151 <a class="nav-link" href="#pages">Pages</a> 152 </li> 153 <li class="nav-item"> 154 <a class="nav-link" href="#search-terms">Search Terms</a> 155 </li> 156 <li class="nav-item"> 157 <a class="nav-link" href="#geographic-distribution">Geographic Distribution</a> 158 </li> 159 <li class="nav-item"> 160 <a class="nav-link" href="#device-usage">Device Usage</a> 161 </li> 162 <li class="nav-item"> 163 <a class="nav-link" href="#google-update">Google Update</a> 164 </li> 165 </ul> 166 </div> 167 </div> 168 </nav> 169 170 <!-- Main Content --> 171 <div class="container mt-4"> 172 <!-- Filters --> 173 <div class="filter-container"> 174 <div class="row align-items-center"> 175 <div class="col-md-3"> 176 <h5><i class="bi bi-funnel-fill me-2"></i>Filters</h5> 177 </div> 178 <div class="col-md-3"> 179 <div class="form-group"> 180 <label for="date-range">Date Range</label> 181 <select class="form-select" id="date-range"> 182 <option value="all" selected>All Data (Last 3 Months)</option> 183 <option value="last-month">Last Month</option> 184 <option value="last-week">Last Week</option> 185 <option value="custom">Custom Range</option> 186 </select> 187 </div> 188 </div> 189 <div class="col-md-4"> 190 <div class="form-group" id="custom-date-container" style="display: none;"> 191 <div class="row"> 192 <div class="col-6"> 193 <label for="start-date">Start</label> 194 <input type="date" class="form-control" id="start-date"> 195 </div> 196 <div class="col-6"> 197 <label for="end-date">End</label> 198 <input type="date" class="form-control" id="end-date"> 199 </div> 200 </div> 201 </div> 202 </div> 203 <div class="col-md-2 text-end"> 204 <button class="btn btn-primary" id="apply-filters"> 205 <i class="bi bi-check-circle-fill me-1"></i>Apply 206 </button> 207 </div> 208 </div> 209 </div> 210 211 <!-- Overview Section --> 212 <section id="overview" class="mb-5"> 213 <h2 class="mb-4">Overview</h2> 214 215 <div class="row"> 216 <div class="col-md-3"> 217 <div class="card metric-card"> 218 <div class="metric-value" id="total-clicks">3,622</div> 219 <div class="metric-label">Total Clicks</div> 220 </div> 221 </div> 222 <div class="col-md-3"> 223 <div class="card metric-card"> 224 <div class="metric-value" id="total-impressions">742,287</div> 225 <div class="metric-label">Total Impressions</div> 226 </div> 227 </div> 228 <div class="col-md-3"> 229 <div class="card metric-card"> 230 <div class="metric-value" id="avg-ctr">0.49%</div> 231 <div class="metric-label">Average CTR</div> 232 </div> 233 </div> 234 <div class="col-md-3"> 235 <div class="card metric-card"> 236 <div class="metric-value" id="avg-position">43.2</div> 237 <div class="metric-label">Average Position</div> 238 </div> 239 </div> 240 </div> 241 242 <div class="card mt-4"> 243 <div class="card-header"> 244 <i class="bi bi-graph-up me-2"></i>Performance Over Time 245 </div> 246 <div class="card-body"> 247 <div class="chart-container" id="time-series-chart"> 248 <!-- Time series chart will be loaded here --> 249 </div> 250 </div> 251 </div> 252 </section> 253 254 <!-- Pages Section --> 255 <section id="pages" class="mb-5"> 256 <h2 class="mb-4">Most Clicked Pages</h2> 257 258 <div class="card"> 259 <div class="card-header"> 260 <i class="bi bi-file-earmark-text me-2"></i>Page Performance 261 </div> 262 <div class="card-body"> 263 <div class="chart-container" id="top-pages-chart"> 264 <!-- Pages chart will be loaded here --> 265 </div> 266 </div> 267 </div> 268 269 <div class="card mt-4"> 270 <div class="card-header"> 271 <i class="bi bi-table me-2"></i>Page Details 272 </div> 273 <div class="card-body"> 274 <div class="table-responsive"> 275 <table class="table table-striped" id="pages-table"> 276 <thead> 277 <tr> 278 <th>Page</th> 279 <th>Clicks</th> 280 <th>Impressions</th> 281 <th>CTR</th> 282 <th>Position</th> 283 </tr> 284 </thead> 285 <tbody> 286 <!-- Table data will be filled with JavaScript --> 287 </tbody> 288 </table> 289 </div> 290 </div> 291 </div> 292 </section> 293 294 <!-- Search Terms Section --> 295 <section id="search-terms" class="mb-5"> 296 <h2 class="mb-4">Most Searched Terms</h2> 297 298 <div class="card"> 299 <div class="card-header"> 300 <i class="bi bi-search me-2"></i>Search Terms Performance 301 </div> 302 <div class="card-body"> 303 <div class="chart-container" id="top-queries-chart"> 304 <!-- Search terms chart will be loaded here --> 305 </div> 306 </div> 307 </div> 308 309 <div class="card mt-4"> 310 <div class="card-header"> 311 <i class="bi bi-table me-2"></i>Search Terms Details 312 </div> 313 <div class="card-body"> 314 <div class="table-responsive"> 315 <table class="table table-striped" id="queries-table"> 316 <thead> 317 <tr> 318 <th>Search Term</th> 319 <th>Clicks</th> 320 <th>Impressions</th> 321 <th>CTR</th> 322 <th>Position</th> 323 </tr> 324 </thead> 325 <tbody> 326 <!-- Table data will be filled with JavaScript --> 327 </tbody> 328 </table> 329 </div> 330 </div> 331 </div> 332 </section> 333 334 <!-- Geographic Distribution Section --> 335 <section id="geographic-distribution" class="mb-5"> 336 <h2 class="mb-4">Geographic Distribution</h2> 337 338 <div class="card"> 339 <div class="card-header"> 340 <i class="bi bi-globe me-2"></i>World Map 341 </div> 342 <div class="card-body"> 343 <div class="chart-container" id="world-map-chart"> 344 <!-- World map chart will be loaded here --> 345 </div> 346 </div> 347 </div> 348 349 <div class="card mt-4"> 350 <div class="card-header"> 351 <i class="bi bi-bar-chart-fill me-2"></i>Top Countries 352 </div> 353 <div class="card-body"> 354 <div class="chart-container" id="top-countries-chart"> 355 <!-- Top countries chart will be loaded here --> 356 </div> 357 </div> 358 </div> 359 360 <div class="card mt-4"> 361 <div class="card-header"> 362 <i class="bi bi-table me-2"></i>Country Details 363 </div> 364 <div class="card-body"> 365 <div class="table-responsive"> 366 <table class="table table-striped" id="countries-table"> 367 <thead> 368 <tr> 369 <th>Country</th> 370 <th>Clicks</th> 371 <th>Impressions</th> 372 <th>CTR</th> 373 <th>Position</th> 374 </tr> 375 </thead> 376 <tbody> 377 <!-- Table data will be filled with JavaScript --> 378 </tbody> 379 </table> 380 </div> 381 </div> 382 </div> 383 </section> 384 385 <!-- Device Usage Section --> 386 <section id="device-usage" class="mb-5"> 387 <h2 class="mb-4">Device Usage</h2> 388 389 <div class="card"> 390 <div class="card-header"> 391 <i class="bi bi-pie-chart-fill me-2"></i>Device Distribution 392 </div> 393 <div class="card-body"> 394 <div class="chart-container" id="device-usage-chart"> 395 <!-- Device usage chart will be loaded here --> 396 </div> 397 </div> 398 </div> 399 400 <div class="card mt-4"> 401 <div class="card-header"> 402 <i class="bi bi-bar-chart-fill me-2"></i>Device Comparison 403 </div> 404 <div class="card-body"> 405 <div class="chart-container" id="device-comparison-chart"> 406 <!-- Device comparison chart will be loaded here --> 407 </div> 408 </div> 409 </div> 410 411 <div class="card mt-4"> 412 <div class="card-header"> 413 <i class="bi bi-table me-2"></i>Device Details 414 </div> 415 <div class="card-body"> 416 <div class="table-responsive"> 417 <table class="table table-striped" id="devices-table"> 418 <thead> 419 <tr> 420 <th>Device</th> 421 <th>Clicks</th> 422 <th>Impressions</th> 423 <th>CTR</th> 424 <th>Position</th> 425 </tr> 426 </thead> 427 <tbody> 428 <!-- Table data will be filled with JavaScript --> 429 </tbody> 430 </table> 431 </div> 432 </div> 433 </div> 434 </section> 435 436 <!-- Google Update S
436ection --> 437 <section id="google-update" class="mb-5"> 438 <h2 class="mb-4">Google Update Impact (March 13-27, 2025)</h2> 439 440 <div class="card"> 441 <div class="card-header"> 442 <i class="bi bi-bar-chart-fill me-2"></i>Clicks and Impressions Impact 443 </div> 444 <div class="card-body"> 445 <div class="chart-container" id="update-impact-clicks-chart"> 446 <!-- Update impact clicks chart will be loaded here --> 447 </div> 448 </div> 449 </div> 450 451 <div class="card mt-4"> 452 <div class="card-header"> 453 <i class="bi bi-bar-chart-fill me-2"></i>CTR and Position Impact 454 </div> 455 <div class="card-body"> 456 <div class="chart-container" id="update-impact-ctr-chart"> 457 <!-- Update impact CTR chart will be loaded here --> 458 </div> 459 </div> 460 </div> 461 462 <div class="card mt-4"> 463 <div class="card-header"> 464 <i class="bi bi-file-text me-2"></i>Detailed Analysis 465 </div> 466 <div class="card-body"> 467 <div id="update-analysis-content"> 468 <!-- Update analysis content will be loaded here --> 469 </div> 470 </div> 471 </div> 472 </section> 473 </div> 474 475 <!-- Footer --> 476 <footer> 477 <div class="container"> 478 <div class="row"> 479 <div class="col-md-6"> 480 <h5>Stradiji.com Google Search Console Analysis</h5> 481 <p>Interactive analysis of the last 3 months of Google Search Console data.</p> 482 </div> 483 <div class="col-md-6 text-md-end"> 484 <p>Data period: January 12, 2025 - April 12, 2025</p> 485 <p>Last updated: April 13, 2025</p> 486 </div> 487 </div> 488 </div> 489 </footer> 490 491 <!-- JavaScript --> 492
492<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
492 493
493<script src="https://cdn.jsdelivr.net/npm/[email protected]/plotly.min.js"></script>
493 494
494<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
494 495
495<script src="js/main_english.js"></script>
495 496
496<script src="js/interactive_english.js"></script>
496 497<manus-content-root></manus-content-root>
497<script> 498 var __manus_space_editor_info = { 499 spaceId : 'ijljblig', 500 patchList : [], 501 hideBadge : false, 502 sessionId : '', 503 isWebDev : false, 504 usageStatus : 'UsageStatus_Unknown', 505 }; 506 var __manus__global_env = { 507 apiHost: 'https://api.manus.im', 508 host: 'https://manus.im', 509 amplitudeKey: '46ac3f9abb41dd2d17a5785e052bc6d3', 510 }; 511 </script>
511<script src="https://files.manuscdn.com/manus-space-dispatcher/spaceEditor-Be_SD1Uu.js" async></script>
511</body> 512</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.