PluginProbe
Mailchimp List Subscribe Form / trunk
Mailchimp List Subscribe Form vtrunk
1.2.4 1.2.5 1.2.6 1.2.7 1.2.8 1.2.9 1.3 1.4 1.4.1 1.4.2 1.4.3 1.4.4 1.4.5 1.5 1.5.1 1.5.2 1.5.3 1.5.4 1.5.5 1.5.6 1.5.7 1.5.8 1.5.9 1.6.0 1.6.1 All 55 releases
mailchimp / includes / admin / templates / analytics.php

analytics.php in Mailchimp List Subscribe Form trunk, at includes/admin/templates/analytics.php

450 lines 18.0 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2 /**
3 * Analytics page template
4 *
5 * @package Mailchimp
6 */
7
8 $lists = ( new Mailchimp_List_Subscribe_Form_Blocks() )->get_lists();
9 $current_list = get_option( 'mc_list_id', '' );
10 $dc = get_option( 'mc_datacenter', '' );
11 ?>
12 <div id="mailchimp-sf-settings-page">
13 <?php include_once MCSF_DIR . 'includes/admin/templates/header.php'; // phpcs:ignore PEAR.Files.IncludingFile.UseRequireOnce ?>
14
15 <div class="mailchimp-sf-settings-page-header-wrapper">
16 <div class="mailchimp-sf-settings-page-header">
17 <div class="mailchimp-sf-settings-page-header-title-wrapper">
18 <h1 class="mailchimp-sf-settings-page-header-title">
19 <?php esc_html_e( 'Analytics', 'mailchimp' ); ?>
20 </h1>
21 </div>
22 </div>
23 </div>
24
25 <div class="wrap">
26 <div class="mailchimp-sf-analytics-wrapper">
27 <div class="mailchimp-sf-analytics-page">
28 <hr class="wp-header-end" />
29 <div class="mailchimp-sf-analytics-filters">
30 <div class="mailchimp-sf-analytics-filter-group">
31 <span
32 id="mailchimp-sf-date-range-label"
33 class="mailchimp-sf-analytics-filter-group__label"
34 ><?php esc_html_e( 'Date range', 'mailchimp' ); ?></span>
35 <div class="mailchimp-sf-date-picker">
36 <button
37 type="button"
38 class="mailchimp-sf-date-picker-trigger"
39 id="mailchimp-sf-date-picker-trigger"
40 aria-expanded="false"
41 aria-haspopup="dialog"
42 aria-controls="mailchimp-sf-date-picker-popover"
43 aria-labelledby="mailchimp-sf-date-range-label mailchimp-sf-date-picker-label"
44 >
45 <span id="mailchimp-sf-date-picker-label"><?php esc_html_e( 'Last 30 days', 'mailchimp' ); ?></span>
46 <div class="indicator-date-picker" aria-hidden="true">
47 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
48 <path d="M20.133 3.891a2.977 2.977 0 00-2.119-.882h-1a1 1 0 10-2 0l-6-.009a1 1 0 00-1-1 1 1 0 00-1 1h-1a3 3 0 00-3 3v1.992l-.023 9.994a3 3 0 002.995 3l12 .018a3 3 0 003-3l.018-12a2.98 2.98 0 00-.871-2.113zm-14.124 1.1h1a1 1 0 102 0l6 .009a1 1 0 002 0h1a1 1 0 011 1v.987l-14-.021v-.987a1 1 0 011-.988zm11.982 14.018l-12-.018a1 1 0 01-1-1L5 8.977 19 9l-.013 9.012a1 1 0 01-.996.997z"></path>
49 </svg>
50 </div>
51 </button>
52 <div
53 class="mailchimp-sf-date-picker-popover"
54 id="mailchimp-sf-date-picker-popover"
55 role="dialog"
56 aria-labelledby="mailchimp-sf-date-range-label"
57 >
58 <div class="mailchimp-sf-date-picker-popover-row">
59 <div class="mailchimp-sf-date-picker-field">
60 <label for="mailchimp-sf-date-range"><?php esc_html_e( 'Date range', 'mailchimp' ); ?></label>
61 <select id="mailchimp-sf-date-range">
62 <option value="7"><?php esc_html_e( 'Last 7 days', 'mailchimp' ); ?></option>
63 <option value="30" selected><?php esc_html_e( 'Last 30 days', 'mailchimp' ); ?></option>
64 <option value="90"><?php esc_html_e( 'Last 90 days', 'mailchimp' ); ?></option>
65 <option value="180"><?php esc_html_e( 'Last 6 months', 'mailchimp' ); ?></option>
66 <option value="365"><?php esc_html_e( 'Last year', 'mailchimp' ); ?></option>
67 <option value="custom"><?php esc_html_e( 'Custom', 'mailchimp' ); ?></option>
68 </select>
69 </div>
70 <div class="mailchimp-sf-date-picker-field">
71 <label for="mailchimp-sf-date-from"><?php esc_html_e( 'Start date', 'mailchimp' ); ?></label>
72 <div class="mailchimp-sf-date-picker-input-wrap">
73 <input type="text" id="mailchimp-sf-date-from" />
74 <span class="mailchimp-sf-date-picker-field-calendar" aria-hidden="true">
75 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
76 <path d="M20.133 3.891a2.977 2.977 0 00-2.119-.882h-1a1 1 0 10-2 0l-6-.009a1 1 0 00-1-1 1 1 0 00-1 1h-1a3 3 0 00-3 3v1.992l-.023 9.994a3 3 0 002.995 3l12 .018a3 3 0 003-3l.018-12a2.98 2.98 0 00-.871-2.113zm-14.124 1.1h1a1 1 0 102 0l6 .009a1 1 0 002 0h1a1 1 0 011 1v.987l-14-.021v-.987a1 1 0 011-.988zm11.982 14.018l-12-.018a1 1 0 01-1-1L5 8.977 19 9l-.013 9.012a1 1 0 01-.996.997z"></path>
77 </svg>
78 </span>
79 </div>
80 </div>
81 <div class="mailchimp-sf-date-picker-field">
82 <label for="mailchimp-sf-date-to"><?php esc_html_e( 'End date', 'mailchimp' ); ?></label>
83 <div class="mailchimp-sf-date-picker-input-wrap">
84 <input type="text" id="mailchimp-sf-date-to" />
85 <span class="mailchimp-sf-date-picker-field-calendar" aria-hidden="true">
86 <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" focusable="false">
87 <path d="M20.133 3.891a2.977 2.977 0 00-2.119-.882h-1a1 1 0 10-2 0l-6-.009a1 1 0 00-1-1 1 1 0 00-1 1h-1a3 3 0 00-3 3v1.992l-.023 9.994a3 3 0 002.995 3l12 .018a3 3 0 003-3l.018-12a2.98 2.98 0 00-.871-2.113zm-14.124 1.1h1a1 1 0 102 0l6 .009a1 1 0 002 0h1a1 1 0 011 1v.987l-14-.021v-.987a1 1 0 011-.988zm11.982 14.018l-12-.018a1 1 0 01-1-1L5 8.977 19 9l-.013 9.012a1 1 0 01-.996.997z"></path>
88 </svg>
89 </span>
90 </div>
91 </div>
92 </div>
93 <div class="mailchimp-sf-date-picker-actions">
94 <button type="button" class="mailchimp-sf-button btn-secondary btn-small mailchimp-sf-date-picker-cancel" id="mailchimp-sf-date-picker-cancel">
95 <?php esc_html_e( 'Cancel', 'mailchimp' ); ?>
96 </button>
97 <button type="button" class="mailchimp-sf-button btn-primary btn-small mailchimp-sf-date-picker-apply" id="mailchimp-sf-date-picker-apply">
98 <?php esc_html_e( 'Apply', 'mailchimp' ); ?>
99 </button>
100 </div>
101 </div>
102 </div>
103 </div>
104
105 <div class="mailchimp-sf-analytics-filter-group">
106 <label for="mailchimp-sf-list-filter"><?php esc_html_e( 'List', 'mailchimp' ); ?></label>
107 <select id="mailchimp-sf-list-filter">
108 <?php if ( ! empty( $lists ) ) : ?>
109 <?php foreach ( $lists as $list ) : ?>
110 <option value="<?php echo esc_attr( $list['id'] ); ?>" <?php selected( $list['id'], $current_list ); ?>>
111 <?php echo esc_html( $list['name'] ); ?>
112 </option>
113 <?php endforeach; ?>
114 <?php endif; ?>
115 </select>
116 </div>
117 </div>
118
119 <section
120 class="mailchimp-sf-analytics-card mailchimp-sf-ao is-loading"
121 data-section="audience-overview"
122 aria-labelledby="mailchimp-sf-ao-title"
123 >
124 <header class="mailchimp-sf-analytics-card__header">
125 <h2 id="mailchimp-sf-ao-title" class="mailchimp-sf-analytics-card__title">
126 <?php esc_html_e( 'Audience Overview', 'mailchimp' ); ?>
127 </h2>
128 <p
129 id="mailchimp-sf-ao-daterange"
130 class="mailchimp-sf-analytics-card__subtitle"
131 aria-live="polite"
132 ><?php esc_html_e( 'Loading audience overview…', 'mailchimp' ); ?></p>
133 </header>
134
135 <div
136 id="mailchimp-sf-ao-error-banner"
137 class="mailchimp-sf-ao__error-banner"
138 role="alert"
139 hidden
140 >
141 <span class="mailchimp-sf-ao__error-banner-icon" aria-hidden="true">
142 <svg viewBox="0 0 24 24" width="20" height="20" focusable="false" aria-hidden="true">
143 <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
144 <line x1="12" y1="7.5" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
145 <circle cx="12" cy="16.5" r="1" fill="currentColor"/>
146 </svg>
147 </span>
148 <div class="mailchimp-sf-ao__error-banner-body">
149 <p class="mailchimp-sf-ao__error-banner-title">
150 <?php esc_html_e( 'Unable to load audience overview', 'mailchimp' ); ?>
151 </p>
152 <p
153 id="mailchimp-sf-ao-error-message"
154 class="mailchimp-sf-ao__error-banner-message"
155 >
156 <?php esc_html_e( 'Unable to load data for the selected date range. Please check your connection and try again.', 'mailchimp' ); ?>
157 </p>
158 </div>
159 <button
160 type="button"
161 id="mailchimp-sf-ao-error-retry"
162 class="mailchimp-sf-button btn-secondary btn-small mailchimp-sf-ao__error-banner-action"
163 >
164 <?php esc_html_e( 'Resolve error', 'mailchimp' ); ?>
165 </button>
166 </div>
167
168 <dl class="mailchimp-sf-ao__metrics">
169 <div class="mailchimp-sf-ao__metric">
170 <dt class="mailchimp-sf-ao__metric-label">
171 <?php esc_html_e( 'Total subscribers', 'mailchimp' ); ?>
172 </dt>
173 <dd
174 id="mailchimp-sf-ao-total-subscribers"
175 class="mailchimp-sf-ao__metric-value"
176 >&mdash;</dd>
177 </div>
178 <div class="mailchimp-sf-ao__metric">
179 <dt class="mailchimp-sf-ao__metric-label">
180 <?php esc_html_e( 'Form views', 'mailchimp' ); ?>
181 </dt>
182 <dd
183 id="mailchimp-sf-ao-views"
184 class="mailchimp-sf-ao__metric-value"
185 >&mdash;</dd>
186 </div>
187 <div class="mailchimp-sf-ao__metric">
188 <dt class="mailchimp-sf-ao__metric-label">
189 <?php esc_html_e( 'New submissions', 'mailchimp' ); ?>
190 </dt>
191 <dd
192 id="mailchimp-sf-ao-submissions"
193 class="mailchimp-sf-ao__metric-value"
194 >&mdash;</dd>
195 </div>
196 <div class="mailchimp-sf-ao__metric">
197 <dt class="mailchimp-sf-ao__metric-label">
198 <?php esc_html_e( 'Conversion rate', 'mailchimp' ); ?>
199 </dt>
200 <dd
201 id="mailchimp-sf-ao-rate"
202 class="mailchimp-sf-ao__metric-value"
203 >&mdash;</dd>
204 </div>
205 </dl>
206
207 </section>
208
209 <section
210 class="mailchimp-sf-analytics-card mailchimp-sf-fp is-loading"
211 data-section="form-performance"
212 aria-labelledby="mailchimp-sf-fp-title"
213 >
214 <header class="mailchimp-sf-analytics-card__header">
215 <h2 id="mailchimp-sf-fp-title" class="mailchimp-sf-analytics-card__title">
216 <?php esc_html_e( 'List performance over time', 'mailchimp' ); ?>
217 </h2>
218 <p
219 id="mailchimp-sf-fp-daterange"
220 class="mailchimp-sf-analytics-card__subtitle"
221 aria-live="polite"
222 ><?php esc_html_e( 'Loading form performance…', 'mailchimp' ); ?></p>
223 </header>
224
225 <div class="mailchimp-sf-fp__chart-heading">
226 <h3 class="mailchimp-sf-fp__chart-title">
227 <?php esc_html_e( 'List Activity', 'mailchimp' ); ?>
228 </h3>
229 <p class="mailchimp-sf-fp__chart-subtitle">
230 <?php esc_html_e( 'All form views, submissions, and conversion rate over time', 'mailchimp' ); ?>
231 </p>
232 </div>
233
234 <div
235 id="mailchimp-sf-fp-error-banner"
236 class="mailchimp-sf-fp__error-banner"
237 role="alert"
238 hidden
239 >
240 <span class="mailchimp-sf-fp__error-banner-icon" aria-hidden="true">
241 <svg viewBox="0 0 24 24" width="20" height="20" focusable="false" aria-hidden="true">
242 <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
243 <line x1="12" y1="7.5" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
244 <circle cx="12" cy="16.5" r="1" fill="currentColor"/>
245 </svg>
246 </span>
247 <div class="mailchimp-sf-fp__error-banner-body">
248 <p class="mailchimp-sf-fp__error-banner-title">
249 <?php esc_html_e( 'Unable to load form performance', 'mailchimp' ); ?>
250 </p>
251 <p
252 id="mailchimp-sf-fp-error-message"
253 class="mailchimp-sf-fp__error-banner-message"
254 >
255 <?php esc_html_e( 'Unable to load data for the selected date range. Please check your connection and try again.', 'mailchimp' ); ?>
256 </p>
257 </div>
258 <button
259 type="button"
260 id="mailchimp-sf-fp-error-retry"
261 class="mailchimp-sf-button btn-secondary btn-small mailchimp-sf-fp__error-banner-action"
262 >
263 <?php esc_html_e( 'Resolve error', 'mailchimp' ); ?>
264 </button>
265 </div>
266
267 <div class="mailchimp-sf-fp__body">
268 <div class="mailchimp-sf-fp__chart">
269 <div class="mailchimp-sf-fp__canvas-wrap">
270 <div class="mailchimp-sf-fp__skeleton-bars" aria-hidden="true">
271 <span></span>
272 <span></span>
273 <span></span>
274 <span></span>
275 <span></span>
276 </div>
277 <canvas
278 id="mailchimp-sf-fp-line"
279 class="mailchimp-sf-fp__canvas"
280 role="img"
281 aria-label="<?php esc_attr_e( 'Form views, submissions, and conversion rate chart', 'mailchimp' ); ?>"
282 aria-describedby="mailchimp-sf-fp-data-table"
283 ></canvas>
284 <div
285 id="mailchimp-sf-fp-overlay"
286 class="mailchimp-sf-fp__overlay"
287 role="status"
288 aria-live="polite"
289 ><?php esc_html_e( 'Loading form performance…', 'mailchimp' ); ?></div>
290 </div>
291 </div>
292 <div
293 id="mailchimp-sf-fp-data-table"
294 class="mailchimp-sf-fp__data-table screen-reader-text"
295 ></div>
296 </div>
297 </section>
298
299 <section
300 class="mailchimp-sf-analytics-card mailchimp-sf-sa is-loading"
301 data-section="subscriber-activity"
302 aria-labelledby="mailchimp-sf-sa-title"
303 >
304 <header class="mailchimp-sf-analytics-card__header">
305 <h2 id="mailchimp-sf-sa-title" class="mailchimp-sf-analytics-card__title">
306 <?php esc_html_e( 'Subscriber change over time', 'mailchimp' ); ?>
307 </h2>
308 <p
309 id="mailchimp-sf-sa-daterange"
310 class="mailchimp-sf-analytics-card__subtitle"
311 aria-live="polite"
312 ><?php esc_html_e( 'Loading subscriber activity…', 'mailchimp' ); ?></p>
313 </header>
314
315 <div
316 id="mailchimp-sf-sa-notice"
317 class="mailchimp-sf-sa__notice"
318 role="status"
319 hidden
320 ></div>
321
322 <div class="mailchimp-sf-sa__chart-heading">
323 <h3 class="mailchimp-sf-sa__chart-title">
324 <?php esc_html_e( 'Subscriber Count', 'mailchimp' ); ?>
325 </h3>
326 <p class="mailchimp-sf-sa__chart-subtitle">
327 <?php esc_html_e( 'Subscribers gained vs lost', 'mailchimp' ); ?>
328 </p>
329 </div>
330
331 <div
332 id="mailchimp-sf-sa-error-banner"
333 class="mailchimp-sf-sa__error-banner"
334 role="alert"
335 hidden
336 >
337 <span class="mailchimp-sf-sa__error-banner-icon" aria-hidden="true">
338 <svg viewBox="0 0 24 24" width="20" height="20" focusable="false" aria-hidden="true">
339 <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2"/>
340 <line x1="12" y1="7.5" x2="12" y2="13" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
341 <circle cx="12" cy="16.5" r="1" fill="currentColor"/>
342 </svg>
343 </span>
344 <div class="mailchimp-sf-sa__error-banner-body">
345 <p class="mailchimp-sf-sa__error-banner-title">
346 <?php esc_html_e( 'API Disconnected', 'mailchimp' ); ?>
347 </p>
348 <p
349 id="mailchimp-sf-sa-error-message"
350 class="mailchimp-sf-sa__error-banner-message"
351 >
352 <?php esc_html_e( 'Unable to load data for the selected date range. Please check your connection and try again.', 'mailchimp' ); ?>
353 </p>
354 </div>
355 <button
356 type="button"
357 id="mailchimp-sf-sa-error-retry"
358 class="mailchimp-sf-button btn-secondary btn-small mailchimp-sf-sa__error-banner-action"
359 >
360 <?php esc_html_e( 'Resolve error', 'mailchimp' ); ?>
361 </button>
362 </div>
363
364 <div class="mailchimp-sf-sa__body">
365 <div class="mailchimp-sf-sa__chart">
366 <div class="mailchimp-sf-sa__canvas-wrap">
367 <div class="mailchimp-sf-sa__skeleton-bars" aria-hidden="true">
368 <span></span>
369 <span></span>
370 <span></span>
371 <span></span>
372 <span></span>
373 </div>
374 <canvas
375 id="mailchimp-sf-sa-bar"
376 class="mailchimp-sf-sa__canvas"
377 role="img"
378 aria-label="<?php esc_attr_e( 'Subscriber change bar chart', 'mailchimp' ); ?>"
379 aria-describedby="mailchimp-sf-sa-data-table"
380 ></canvas>
381 <div
382 id="mailchimp-sf-sa-overlay"
383 class="mailchimp-sf-sa__overlay"
384 role="status"
385 aria-live="polite"
386 ><?php esc_html_e( 'Loading subscriber activity…', 'mailchimp' ); ?></div>
387 </div>
388 <div
389 id="mailchimp-sf-sa-data-table"
390 class="mailchimp-sf-sa__data-table screen-reader-text"
391 ></div>
392 </div>
393
394 <aside class="mailchimp-sf-sa__totals" aria-labelledby="mailchimp-sf-sa-totals-title">
395 <h3 id="mailchimp-sf-sa-totals-title" class="mailchimp-sf-sa__totals-title">
396 <?php esc_html_e( 'Totals for the selected date range', 'mailchimp' ); ?>
397 </h3>
398 <div class="mailchimp-sf-sa__donut-wrap">
399 <div class="mailchimp-sf-sa__skeleton-donut" aria-hidden="true"></div>
400 <canvas
401 id="mailchimp-sf-sa-donut"
402 class="mailchimp-sf-sa__canvas"
403 aria-hidden="true"
404 ></canvas>
405 <div class="mailchimp-sf-sa__donut-center">
406 <span id="mailchimp-sf-sa-net" class="mailchimp-sf-sa__net">&mdash;</span>
407 </div>
408 </div>
409 <ul class="mailchimp-sf-sa__legend">
410 <li class="mailchimp-sf-sa__legend-item is-new">
411 <span class="mailchimp-sf-sa__legend-swatch" aria-hidden="true"></span>
412 <span class="mailchimp-sf-sa__legend-label">
413 <?php esc_html_e( 'New Subscribers', 'mailchimp' ); ?>
414 </span>
415 <span
416 id="mailchimp-sf-sa-total-new"
417 class="mailchimp-sf-sa__legend-value"
418 >&mdash;</span>
419 </li>
420 <li class="mailchimp-sf-sa__legend-item is-unsub">
421 <span class="mailchimp-sf-sa__legend-swatch" aria-hidden="true"></span>
422 <span class="mailchimp-sf-sa__legend-label">
423 <?php esc_html_e( 'Unsubscribes', 'mailchimp' ); ?>
424 </span>
425 <span
426 id="mailchimp-sf-sa-total-unsubs"
427 class="mailchimp-sf-sa__legend-value"
428 >&mdash;</span>
429 </li>
430 </ul>
431 </aside>
432 </div>
433 </section>
434
435 <?php if ( $dc ) : ?>
436 <div class="mailchimp-sf-analytics-deep-link">
437 <a href="<?php echo esc_url( 'https://' . $dc . '.admin.mailchimp.com/analytics/audience-analytics/' ); ?>"
438 target="_blank"
439 rel="noopener noreferrer"
440 class="mailchimp-sf-button btn-primary btn-small">
441 <?php esc_html_e( 'View detailed analytics in Mailchimp', 'mailchimp' ); ?>
442 <span class="dashicons dashicons-external" aria-hidden="true"></span>
443 </a>
444 </div>
445 <?php endif; ?>
446 </div>
447 </div>
448 </div>
449 </div>
450