Skip to content

Added: grouped Custom events, hash based routing and IE compatibility under Advanced Options section. #258

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Dan0sz merged 1 commit into from
May 7, 2025
Merged

Added: grouped Custom events, hash based routing and IE compatibility under Advanced Options section. #258

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions assets/src/css/admin/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

div[id$="_content"] .toggle-container {
@apply mt-6;
}
1 change: 1 addition & 0 deletions assets/src/css/admin/main.min.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
@tailwind base;@tailwind components;
15 changes: 15 additions & 0 deletions assets/src/js/admin/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,19 @@ document.addEventListener('DOMContentLoaded', () => {
this.showMessages();
},

toggleSection: function (target) {
let section = document.getElementById(target + '_content');
let chevron = document.getElementById(target + '_chevron');

if (section.className.indexOf('hidden') !== -1) {
section.className = 'block';
chevron.classList.add('rotate-180');
} else {
section.className = 'hidden';
chevron.classList.remove('rotate-180');
}
},

/**
* Toggle Option and store in DB.
*
Expand Down Expand Up @@ -563,5 +576,7 @@ document.addEventListener('DOMContentLoaded', () => {
}
}

plausibleToggleSection = plausible.toggleSection;

plausible.init();
});
2 changes: 1 addition & 1 deletion assets/src/js/admin/main.min.js
View file
Open in desktop

Large diffs are not rendered by default.

44 changes: 31 additions & 13 deletions src/Admin/Settings/API.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,12 +139,12 @@ public function settings_page() {
<nav class="flex items-center justify-between py-8" aria-label="Global">
<div class="flex items-center gap-x-12">
<a href="#" class="-m-1.5 p-1.5">
<img alt="Plausible logo" class="w-44 -mt-2 dark:hidden"
<img alt="Plausible logo" class="w-44 -mt-2"
src="<?php echo PLAUSIBLE_ANALYTICS_PLUGIN_URL . 'assets/dist/images/icon.svg'; ?>">
</a>
<?php $this->render_navigation(); ?>
</div>
<div class="flex item-center gap-x-6 md:flex hidden">
<div class="hidden item-center gap-x-6 md:flex">
<?php echo $this->render_quick_actions(); ?>
</div>
</nav>
Expand All @@ -153,6 +153,7 @@ public function settings_page() {
<?php foreach ( $this->fields[ $current_tab ] as $tab => $field ): ?>
<div class="plausible-analytics-section shadow sm:rounded-md sm:overflow-hidden">
<?php
/** @var string $type checkbox|group|toggle_group|button|text */
$type = $field[ 'type' ] ?? '';

if ( $type ) {
Expand Down Expand Up @@ -184,7 +185,7 @@ private function show_wizard() {
<div class="flex flex-col h-full">
<!-- logo -->
<div class="w-full my-8 text-center">
<img alt="Plausible logo" class="w-44 -mt-2 dark:hidden"
<img alt="Plausible logo" class="w-44 -mt-2"
src="<?php echo PLAUSIBLE_ANALYTICS_PLUGIN_URL . 'assets/dist/images/icon.svg'; ?>">
</div>
<?php $this->render_notices_field(); ?>
Expand Down Expand Up @@ -542,6 +543,31 @@ private function get_quick_actions() {
];
}

/**
* Render Toggle Group Field.
*
* @since 2.4.0
* @return string
*/
public function render_toggle_group_field( array $group, $hide_header = false ) {
ob_start();
?>
<div id="<?php echo $group[ 'slug' ]; ?>_toggle" onclick="plausibleToggleSection('<?php echo $group[ 'slug' ]; ?>')" class="flex items-center mt-4 space-x-3 hover:cursor-pointer">
<span class="dark:text-gray-100 text-lg">
<?php echo $group[ 'label' ]; ?>
</span>
<!-- Chevron -->
<svg xmlns="http://www.w3.org/2000/svg" id="<?php echo $group[ 'slug' ]; ?>_chevron" class="h-6 w-6 ml-2 text-gray-400 dark:text-gray-500 transition-transform duration-250" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="m4.5 15.75 7.5-7.5 7.5 7.5"/>
</svg>
</div>
<div class="hidden" id="<?php echo $group[ 'slug' ]; ?>_content">
<?php echo $this->render_group_field( $group, true ); ?>
</div>
<?php
return ob_get_clean();
}

/**
* Render Group Field.
*
Expand All @@ -550,24 +576,16 @@ private function get_quick_actions() {
* @return string
*/
public function render_group_field( array $group, $hide_header = false ) {
$toggle = $group[ 'toggle' ] ?? [];
$fields = $group[ 'fields' ];
ob_start();
?>
<div
class="<?php echo $hide_header ? '' : 'plausible-analytics-group py-6 px-4 space-y-6 sm:p-6'; ?> bg-white dark:bg-gray-800">
<div class="bg-white dark:bg-gray-800<?php echo $hide_header ? '' : ' plausible-analytics-group py-6 px-4 space-y-6 sm:p-6'; ?>">
<?php if ( ! $hide_header ) : ?>
<header class="relative">
<h3 class="text-lg mt-0 leading-6 font-medium text-gray-900 dark:text-gray-100"
id="<?php echo $group[ 'slug' ]; ?>"><?php echo $group[ 'label' ]; ?></h3>
<h3 class="text-lg mt-0 leading-6 font-medium text-gray-900 dark:text-gray-100" id="<?php echo $group[ 'slug' ]; ?>"><?php echo $group[ 'label' ]; ?></h3>
<div class="mt-1 text-sm leading-5 !text-gray-500 !dark:text-gray-200">
<?php echo wp_kses_post( $group[ 'desc' ] ); ?>
</div>
<?php if ( ! empty( $toggle ) && is_array( $toggle ) ) : ?>
<a target="_blank" class="plausible-analytics-link" href="<?php echo $toggle[ 'anchor' ]; ?>">
<?php echo $toggle[ 'label' ]; ?>
</a>
<?php endif; ?>
</header>
<?php endif; ?>
<?php if ( ! empty( $fields ) ): ?>
Expand Down
60 changes: 30 additions & 30 deletions src/Admin/Settings/Page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -207,29 +207,36 @@ public function __construct() {
'value' => 'search',
'caps' => [ self::CAP_GOALS ],
],
'tagged-events' => [
'label' => esc_html__( 'Custom events', 'plausible-analytics' ),
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-setup-custom-events-to-track-goal-conversions',
'slug' => 'enhanced_measurements',
'type' => 'checkbox',
'value' => 'tagged-events',
'caps' => [ self::CAP_GOALS ],
],
'hash' => [
'label' => esc_html__( 'Hash-based routing', 'plausible-analytics' ),
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-enable-hash-based-url-tracking',
'slug' => 'enhanced_measurements',
'type' => 'checkbox',
'value' => 'hash',
'caps' => [],
],
'compat' => [
'label' => esc_html__( 'IE compatibility', 'plausible-analytics' ),
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-track-visitors-who-use-internet-explorer',
'slug' => 'enhanced_measurements',
'type' => 'checkbox',
'value' => 'compat',
'caps' => [],
'advanced-options' => [
'label' => esc_html__( 'Advanced options', 'plausible-analytics' ),
'slug' => 'advanced_options',
'type' => 'toggle_group',
'fields' => [
'tagged-events' => [
'label' => esc_html__( 'Custom events', 'plausible-analytics' ),
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-setup-custom-events-to-track-goal-conversions',
'slug' => 'enhanced_measurements',
'type' => 'checkbox',
'value' => 'tagged-events',
'caps' => [ self::CAP_GOALS ],
],
'hash' => [
'label' => esc_html__( 'Hash-based routing', 'plausible-analytics' ),
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-enable-hash-based-url-tracking',
'slug' => 'enhanced_measurements',
'type' => 'checkbox',
'value' => 'hash',
'caps' => [],
],
'compat' => [
'label' => esc_html__( 'IE compatibility', 'plausible-analytics' ),
'docs' => 'https://plausible.io/wordpress-analytics-plugin#how-to-track-visitors-who-use-internet-explorer',
'slug' => 'enhanced_measurements',
'type' => 'checkbox',
'value' => 'compat',
'caps' => [],
],
],
],
],
],
Expand Down Expand Up @@ -257,7 +264,6 @@ public function __construct() {
),
'https://plausible.io/wordpress-analytics-plugin#how-to-enable-a-proxy-to-get-more-accurate-stats'
),
'toggle' => '',
'fields' => [
[
'label' => esc_html__( 'Enable proxy', 'plausible-analytics' ),
Expand All @@ -276,7 +282,6 @@ public function __construct() {
'View your site statistics within your WordPress Dashboard.',
'plausible-analytics'
),
'toggle' => '',
'fields' => [
[
'label' => esc_html__( 'View stats in WordPress', 'plausible-analytics' ),
Expand All @@ -302,7 +307,6 @@ public function __construct() {
),
esc_html__( 'See syntax &raquo;', 'plausible-analytics' )
),
'toggle' => '',
'fields' => [
[
'label' => esc_html__( 'Excluded pages', 'plausible-analytics' ),
Expand All @@ -329,7 +333,6 @@ public function __construct() {
'By default, visits from logged in users aren\'t tracked. If you want to track visits for certain user roles then please specify them below.',
'plausible-analytics'
),
'toggle' => false,
'fields' => $this->build_user_roles_array( 'tracked_user_roles' ),
],
[
Expand All @@ -340,7 +343,6 @@ public function __construct() {
'By default, the stats dashboard is only available to logged in administrators. If you want the dashboard to be available for other logged in users, then please specify them below.',
'plausible-analytics'
),
'toggle' => false,
'fields' => $this->build_user_roles_array( 'expand_dashboard_access', [ 'administrator' => true ] ),
],
[
Expand All @@ -351,7 +353,6 @@ public function __construct() {
'Check this option if you don\'t want the Plausible Analytics menu item to be added to the toolbar at the top of the screen.',
'plausible-analytics'
),
'toggle' => false,
'add_sub_array' => false,
'fields' => [
'disable_toolbar_menu' => [
Expand Down Expand Up @@ -380,7 +381,6 @@ public function __construct() {
esc_url( 'https://plausible.io/self-hosted-web-analytics/' ),
esc_html__( 'Learn more about Plausible Community Edition.', 'plausible-analytics' )
),
'toggle' => '',
'fields' => [
[
'label' => esc_html__( 'Domain name', 'plausible-analytics' ),
Expand Down