22

✏️ Editing: html-main-general.php

<?php

namespace PixelYourSite;

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

?>
<div class="cards-wrapper cards-wrapper-style1 general-page-wrapper gap-24">
    
    <div class="card card-static card-style1">
        <div class="card-header card-header-style1 d-flex align-items-center">
            <div class="d-flex align-items-center">
                <?php PYS()->render_switcher_input("enable_all_tracking_ids", false, false, false, 'secondary'); ?>
                <h4 class="font-semibold main-switcher ml-22">Pixel IDs</h4>
            </div>
        </div>
        <div class="card-body">

<input type="checkbox" class="general-settings-checkbox" id="fb_settings_switch" style="display: none">
            <div class="d-flex pixel-wrap align-items-center justify-content-between">
                <div class="pixel-heading d-flex justify-content-start align-items-center">
                    <img class="tag-logo" alt="meta-logo" src="<?php echo PYS_FREE_URL; ?>/dist/images/meta-logo.svg">
                    <h3 class="secondary_heading">Your Meta Pixel</h3>
                </div>
                <div>
                    <label for="fb_settings_switch">
                        <?php include PYS_FREE_VIEW_PATH . '/UI/properties-button-off.php'; ?>
                    </label>
                </div>
            </div>
           <div class="settings_content_wrap">
                <div class="settings_content">
                    <div class="plate pixel_info mb-24">
                        <div class="d-flex align-items-center pixel-switcher-enabled mb-24">
							<?php
							Facebook()->render_switcher_input( "enabled" );
							?>
                            <h4 class="switcher-label secondary_heading">Enable Pixel</h4>
                        </div>
                        <div class="pixel-data-wrap">
                            <div class="d-flex align-items-center">
                                <?php Facebook()->render_checkbox_input( "use_server_api", 'Enable Conversion API (add the token below)' ); ?>
                            </div>
                            <div class="facebook-description">
                                <p class="text-gray pb-8">
                                    <?php _e('Install multiple Meta Pixels with CAPI support:', 'pys');?>
                                    <a href="https://www.youtube.com/watch?v=HM98mGZshvc" target="_blank"
                                       class="link">watch video</a>
                                </p>
                                <p class="text-gray">
                                    <?php _e('What is Events Matching and EMQ and how you can improve it:', 'pys');?>
                                    <a href=" https://www.youtube.com/watch?v=3soI_Fl0JQw" target="_blank"
                                       class="link">watch video</a>
                                </p>
                            </div>
                            <div>
                                <h4 class="primary_heading mb-4">Meta Pixel ID:</h4>
                                <?php Facebook()->render_pixel_id( 'pixel_id', 'Meta Pixel ID' ); ?>
                                <div class="form-text mt-4">
                                    <a href="https://www.pixelyoursite.com/docs/meta-facebook-settings-setup"
                                       target="_blank" class="link link-small">How to get it?</a>
                                </div>
                            </div>

<div>
                                <h4 class="primary_heading mb-4">Conversion API:</h4>
                                <?php Facebook()->render_text_area_array_item( "server_access_api_token", "Api token" ) ?>
                            </div>

<div>
                                <p class="text-gray">
                                    Send events directly from your web server to Facebook through the Conversion
                                    API. This
                                    can help you capture more events. An access token is required to use the
                                    server-side
                                    API.
                                    <a href='https://www.pixelyoursite.com/strategy/facebook-conversion-api'
                                       target='_blank' class="link">Learn
                                        how to generate the token and how to test Conversion API</a>
                                </p>
                            </div>

<div>
                                <h4 class="primary_heading mb-4">Test Event Code:</h4>
                                <?php Facebook()->render_text_input_array_item( "test_api_event_code", "Code" ); ?>
                                <?php Facebook()->render_text_input_array_item( "test_api_event_code_expiration_at", "", 0, true ); ?>
                                <div class="mt-6">
                                    <p class="form-text text-small">
                                        Use this if you need to test the server-side event. <strong>Remove it after
                                            testing.</strong> The code will auto-delete itself after 24 hours.
                                    </p>
                                </div>
                            </div>

<div>
                                <?php if(isWPMLActive()) : ?>
                                    <p>
                                        <strong>WPML Detected. </strong> With the <a class="link" target="_blank" href="https://www.pixelyoursite.com/plugins/pixelyoursite-professional?utm_medium=plugin&utm_campaign=multilingual">Advanced and Agency</a> licenses, you can fire a different pixel for each language.
                                    </p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                    <div class="line"></div>
                    <?php addMetaTagFields( Facebook(), "https://www.pixelyoursite.com/verify-domain-facebook" ); ?>
                    <div class="line"></div>
                </div>
           </div>
            <div class="line"></div>

<input type="checkbox" class="general-settings-checkbox" id="ga_settings_switch" style="display: none">
            <div class="d-flex pixel-wrap align-items-center justify-content-between">
                <div class="pixel-heading d-flex justify-content-start align-items-center">
                    <img class="tag-logo" alt="meta-logo"
                         src="<?php echo PYS_FREE_URL; ?>/dist/images/google-analytics-logo.svg">
                    <div>
                        <h3 class="secondary_heading">Your Google Analytics</h3>
                        <?php
                        $noticeRenderNotSupportUA = false;
                        $noticeOnlyUA = true;
                        if ( GA()->enabled() && !empty( GA()->getOption( 'tracking_id' ) ) ) {
                            $trackingId = GA()->getOption( 'tracking_id' );
                            if ( !isGaV4( $trackingId ) ) {
                                $noticeRenderNotSupportUA = true;
                            } else {
                                $noticeOnlyUA = false;
                            }
                        }
                        if ( $noticeRenderNotSupportUA ) {
                            ?>
                            <div class="align-items-center not-supported mr-20 mt-4">
                                <?php
                                if ( $noticeOnlyUA ) {
                                    ?>
                                    <p class="lh-140">The old Universal Analytics properties are not supported by Google
                                        Analytics anymore. You must use the new GA4 properties instead.</p>
                                    <a class="lh-140 link link-underline"
                                       href="https://www.youtube.com/watch?v=KkiGbfl1q48"
                                       target="_blank">Watch this video to find how to get your GA4 tag</a>.
                                    <?php
                                } else {
                                    ?>
                                    <p class="lh-140">Your old Universal Analytics property doesn't send data anymore,
                                        consider removing it.
                                        Google Analytics supports only GA4 properties.
                                    </p>
                                    <a class="lh-140 link link-underline"
                                       href="https://www.youtube.com/watch?v=KkiGbfl1q48"
                                       target="_blank">Watch this video to find how to get your GA4 tag</a>.
                                    <?php
                                } ?>
                            </div>
                            <?php
                        } ?>
                    </div>
                </div>
                <div>
                    <label for="ga_settings_switch">
                        <?php include PYS_FREE_VIEW_PATH . '/UI/properties-button-off.php'; ?>
                    </label>
                </div>
            </div>
            <div class="settings_content_wrap">
                <div class="settings_content">
                    <div class="plate pixel_info mb-24">
                        <div class="d-flex align-items-center pixel-switcher-enabled mb-24">
                            <?php
                            GA()->render_switcher_input( "enabled" );
                            ?>
                            <h4 class="switcher-label secondary_heading">Enable Pixel</h4>
                        </div>

<div class="pixel-data-wrap">
                            <div class="d-flex align-items-center justify-content-between mb-24">
                                <div class="d-flex align-items-center">
                                    <?php renderDummySwitcher(false); ?>
                                    <h4 class="switcher-label">Enable Measurement Protocol (add the api_secret)</h4>
                                </div>
                                <?php renderProBadge(); ?>
                            </div>
                            <div class="align-items-center">
                                <h4 class="primary_heading mb-4">Google Analytics tracking ID:</h4>
                                <?php GA()->render_pixel_id( 'tracking_id', 'Google Analytics tracking ID' ); ?>

<?php
                                $pixels = GA()->getPixelIDs();
                                if ( count( $pixels ) ) {
                                    ?>
                                    <div class="mt-6 text-small">
                                        <?php
                                        if ( strpos( $pixels[ 0 ], 'G' ) === 0 ) {
                                            echo '<span class="form-text text-small">We identified this tag as a GA4 property.</span>';
                                        } else {
                                            echo '<span class="not-support-tag form-text text-small">We identified this tag as a Google Analytics Universal property.</span>';
                                        }
                                        ?>
                                    </div>
                                    <?php
                                }
                                ?>

<div class="form-text mt-4">
                                    <a href="https://www.pixelyoursite.com/docs/google-analytics-ga4"
                                       target="_blank" class="link link-small">How to get it?</a>
                                </div>
                            </div>
                            <div>
                                <h4 class="primary_heading mb-8 d-flex align-items-center justify-content-between">Measurement Protocol API secret: <?php renderProBadge(); ?></h4>
                                <?php renderDummyTextInput("API secret") ?>
                            </div>
                            <div>
                                <p class="text-gray">
                                    Generate the API secret inside your Google Analytics account: navigate to <b>Admin
                                        > Data Streams > choose your stream > Measurement Protocol API secrets</b>.
                                    The Measurement Protocol is used for WooCommerce and Easy Digital Downloads
                                    "Google Analytics Advanced Purchase Tracking" and refund tracking. Required for
                                    GA4 properties only.
                                </p>
                            </div>

<div class="d-flex align-items-center">
                                <input type="text" class="custom-control-input"
                                       name="pys[ga][first_party_collection][-1]" value="0" checked/>
                                <?php GA()->render_checkbox_input( "first_party_collection", "First party cookies selector first_party_collection (recommended)" ); ?>
                            </div>
                            <div class="d-flex align-items-center">
                                <input type="checkbox" class="custom-control-input"
                                       name="pys[ga][is_enable_debug_mode][-1]" value="0" checked/>
                                <?php GA()->render_checkbox_input_array( "is_enable_debug_mode", "Enable Analytics Debug mode for this property" ); ?>
                            </div>
                            <div class="line-dark"></div>
                            <div class="d-flex flex-column">
                                <div class="d-flex">
                                    <input type="text" class="custom-control-input"
                                           name="pys[ga][enable_server_container][-1]" value="0" checked/>
                                    <?php GA()->render_switcher_input( "enable_server_container" ); ?>
                                    <h4 class="switcher-label secondary_heading">Enable Server container url
                                        (Beta)</h4>
                                </div>

<div class="form-text mt-12">
                                    Learn how to use it:
                                    <a href="https://www.youtube.com/watch?v=WZnmSoSJyBc"
                                       target="_blank"
                                       class="link"
                                    >watch video</a>
                                </div>
                            </div>

<div>
                                <h4 class="primary_heading mb-4">Server container url (optional):</h4>
                                <input type="text" class="custom-control-input"
                                       name="pys[ga][server_container_url][-1]" value="0" checked/>
                                <?php GA()->render_text_input_array_item( "server_container_url", "https://analytics.example.com", 0 ); ?>
                            </div>

<div>
                                <h4 class="primary_heading mb-4">Transport url (optional):</h4>
                                <input type="text" class="custom-control-input"
                                       name="pys[ga][transport_url][-1]" value="0" checked/>
                                <?php GA()->render_text_input_array_item( "transport_url", "https://tagging.mywebsite.com", 0 ); ?>
                            </div>

<div class="line-dark"></div>
                            <div>
                                <p class="text-gray pb-8">
                                    How to enable Google Consent Mode V2:
                                    <a href=https://www.pixelyoursite.com/google-consent-mode-v2-wordpress?utm_source=plugin&utm_medium=pro&utm_campaign=google-consent"
                                       target="_blank" class="link">click here</a>
                                </p>
                                <p class="text-gray pb-8">
                                    Learn how to get the Google Analytics 4 tag ID and how to test it:
                                    <a href="https://www.youtube.com/watch?v=KkiGbfl1q48" target="_blank"
                                       class="link">watch video</a>
                                </p>
                                <p class="text-gray pb-8">
                                    Install the old Google Analytics UA property and the new GA4 at the same time:
                                    <a href="https://www.youtube.com/watch?v=JUuss5sewxg" target="_blank"
                                       class="link">watch video</a>
                                </p>
                                <p class="text-gray">
                                    Learn how to get your Measurement Protocol API secret:
                                    <a href="https://www.youtube.com/watch?v=cURMzxY3JSg" target="_blank"
                                       class="link">watch video</a>
                                </p>
                            </div>
                            <div>
                                <?php if(isWPMLActive()) : ?>
                                    <p>
                                        <strong>WPML Detected. </strong> With the <a class="link" target="_blank" href="https://www.pixelyoursite.com/plugins/pixelyoursite-professional?utm_medium=plugin&utm_campaign=multilingual">Advanced and Agency</a> licenses, you can fire a different pixel for each language.
                                    </p>
                                <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

<div class="line"></div>
            <div class="d-flex pixel-wrap align-items-center justify-content-between">
                <div class="pixel-heading d-flex justify-content-start align-items-center">
                    <img class="tag-logo" src="<?php echo PYS_FREE_URL; ?>/dist/images/google-ads-square-small.svg">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="link-feature-block">
                            <h3 class="secondary_heading">Add the Google Ads tag with the <a class="link"
                                                                                             href="https://www.pixelyoursite.com/google-ads-tag?utm_source=pixelyoursite-free-plugin&utm_medium=plugin&utm_campaign=free-plugin-ids"
                                                                                             target="_blank">pro version</a>.</h3>
                            <div class="text-gray">
                                How to enable Google Consent Mode V2:
                                <a class="link" href="https://www.pixelyoursite.com/google-consent-mode-v2-wordpress?utm_source=plugin&utm_medium=free&utm_campaign=google-consent" target="_blank">click here</a>
                            </div>
                            <div class="text-gray">
                                Learn how to install the Google Ads Tag:
                                <a class="link" href="https://www.youtube.com/watch?v=dft-TRigkj0" target="_blank">watch video</a>
                            </div>
                            <div class="text-gray">
                                How to configure Google Ads Conversions:
                                <a class="link" href="https://www.youtube.com/watch?v=5kb-jQe-Psg" target="_blank">watch video</a>
                            </div>
                            <div class="text-gray">
                                Lear how to use Enhanced Conversions:
                                <a class="link" href="https://www.youtube.com/watch?v=-bN5D_HJyuA" target="_blank">watch video</a>
                            </div>
                        </div>
                        <?php renderProBadge(); ?>
                    </div>
                </div>
            </div>

<div class="d-flex pixel-wrap align-items-center justify-content-between">
                <div class="pixel-heading d-flex justify-content-start align-items-center">
                    <img class="tag-logo" src="<?php echo PYS_FREE_URL; ?>/dist/images/tiktok-logo.svg">
                    <div class="d-flex align-items-center justify-content-between">
                        <div class="link-feature-block">
                            <h3 class="secondary_heading">Add the TikTok tag with the <a class="link"
                                                                                         href="https://www.pixelyoursite.com/google-ads-tag?utm_source=pixelyoursite-free-plugin&utm_medium=plugin&utm_campaign=free-plugin-ids"
                                                                                         target="_blank">pro version</a>.</h3>
                            <div class="text-gray">
                                How to install the TikTok tag and how to enable TikTok API: <a class="link" href="https://www.youtube.com/watch?v=OCSR6zacnFM" target="_blank">watch video</a>
                            </div>
                        </div>
                        <?php renderProBadge(); ?>

</div>
                </div>
            </div>

<?php do_action( 'pys_admin_pixel_ids' ); ?>

</div>
    </div>

<div class="card card-style1 card-static">
        <div class="card-header card-header-style1 d-flex align-items-center">
            <div class="d-flex align-items-center">
                <h4 class="font-semibold main-switcher">GTM Tag</h4>
            </div>
        </div>
        <div class="card-body">
            <input type="checkbox" class="general-settings-checkbox" id="gtm_settings_switch" style="display: none">
            <div class="d-flex pixel-wrap align-items-center justify-content-between">
                <div class="pixel-heading d-flex justify-content-start align-items-center">
                    <img class="tag-logo" src="<?php echo PYS_FREE_URL; ?>/dist/images/gtm-logo.svg" alt="gtm-logo">
                    <h3 class="secondary_heading">Your GTM Tag</h3>
                </div>
                <div>
                    <label for="gtm_settings_switch">
                        <?php include PYS_FREE_VIEW_PATH . '/UI/properties-button-off.php'; ?>
                    </label>
                </div>
            </div>

<div class="settings_content_wrap">
                <div class="settings_content">
                    <div class="plate pixel_info mb-24">
                        <div class="d-flex align-items-center pixel-switcher-enabled mb-24">
                            <?php GTM()->render_switcher_input( 'enabled' ); ?>
                            <h4 class="switcher-label secondary_heading">Enable GTM</h4>
                        </div>
                        <div class="pixel-data-wrap">
                            <div>
                                <h4 class="primary_heading mb-4">GTM Tag:</h4>
								<?php GTM()->render_pixel_id( 'gtm_id', '' ); ?>
                            </div>
                            <div>
                                <div class="d-flex align-items-center">
                                    <?php GTM()->render_switcher_input( 'gtm_just_data_layer' ); ?>
                                    <h4 class="switcher-label secondary_heading"><?php _e( 'Send just the data layer', 'pys' ); ?></h4>
                                </div>
                            </div>

<div>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Beta version:</span>
                                    This feature is now in Beta and can change in the future.
                                </p>
                            </div>
                            <div>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Important:</span>
                                    <?php _e( 'Don\'t use GTM and our native integrations for the same tag/pixel ID. A pixel installed with the native integration must not be installed with GTM.', 'pys' ); ?>
                                </p>
                            </div>

<div class="line-dark"></div>
                            <?php $containers = new gtmContainers();
                            $download_template_nonce = wp_create_nonce('download_template_nonce');
                            if(!empty($containers)):
                                ?>
                                <div>
                                    <p class="primary-text-color primary_heading pb-8">
                                        <?php _e( 'GTM Container Import:', 'pys' ); ?>
                                    </p>
                                    <?php
                                    foreach ( $containers->getContainersForDisplay() as $container ) {
                                        if ( !$container[ 'enable' ] || empty( $container[ 'file_name' ] ) ) continue;
                                        ?>
                                        <p class="primary-heading-color mb-8">
                                            <a href="<?php echo esc_url( add_query_arg(['download_container' => $container['file_name'], '_wpnonce_template_logs' => $download_template_nonce],buildAdminUrl( 'pixelyoursite' ))); ?>"
                                               target="_blank"
                                               class="link"
                                               download><?php echo $container[ 'show_name' ]; ?></a><?php echo !empty( $container[ 'description' ] ) ? ' - ' . $container[ 'description' ] : ''; ?>
                                        </p>
                                        <?php
                                    } ?>
                                </div>
                                <p class="text-gray">
                                    <?php _e( 'Learn how to use the file: ', 'pys' ); ?>
                                    <a href="https://www.youtube.com/watch?v=qKJ3mmCgT3M" target="_blank"
                                       class="link">watch video</a>
                                </p>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
            <input type="checkbox" id="gtm_settings_switch" style="display: none">
        </div>
    </div>
    <div class="link_youtube">
        <div class="youtube_description">
            <img src="<?php echo PYS_FREE_URL; ?>/dist/images/youtube-logo.svg" alt="youtube-logo"/>
            <div>
                <p class="primary_heading">Subscribe to our YouTube Channel to learn how to use the plugin and improve
                    tracking</p>
            </div>
        </div>
        <div class="youtube_button">
            <?php renderBlackButton( 'Go to YouTube', 'https://www.youtube.com/channel/UCnie2zvwAjTLz9B4rqvAlFQ' ); ?>
        </div>
    </div>

<?php
    $videos = array(

array(
          'url'   => 'https://www.youtube.com/watch?v=rmkZZcLxP2I',
          'title' => 'How to install the Reddit Pixel',
          'time'  => '4:19',
      ),

array(
          'url'   => 'https://www.youtube.com/watch?v=Jm8dFTOLjJE',
          'title' => 'WooCommerce Google Ads Conversion Import',
          'time'  => '9:19',
      ),

array(
          'url'   => 'https://www.youtube.com/watch?v=WUrl-2fgTxg',
          'title' => 'Fix SAFARI Google Ads Tracking - GCLID missing solution',
          'time'  => '4:59',
      ),
      array(
          'url'   => 'https://www.youtube.com/watch?v=eoJT1fSIar0',
          'title' => 'Google AUTOMATED Discounts + WooCommerce',
          'time'  => '14:26',
      ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=Wv6KhJQqFL4',
            'title' => 'HOT: Secret Trick to Boost Your Meta EMQ Score: Facebook Login Integration',
            'time'  => '6:20',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=wUsqwomsYMo',
            'title' => 'Conditions: Improved Event Tracking - Meta, Google, TikTok, GTM',
            'time'  => '5:09',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=kWozitdarSA',
            'title' => 'How to use Custom Events for Meta Ads',
            'time'  => '7:49',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=7BNHWbLbbdg',
            'title' => 'Meta Limited Data Use - Privacy Options for USA States - WordPress',
            'time'  => '6:17',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=bEK3qaaRvNg',
            'title' => 'Google Tag Manager and PixelYourSite',
            'time'  => '7:48',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=DZzFP4pSitU',
            'title' => 'Meta Pixel, CAPI, and PixelYourSite MUST WATCH',
            'time'  => '8:19',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=QqAIO1ONc0I',
            'title' => 'How to test Facebook Conversion API',
            'time'  => '10:16',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=kEp5BDg7dP0',
            'title' => 'How to fire EVENTS with PixelYourSite',
            'time'  => '22:28',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=EvzGMAvBnbs',
            'title' => 'How to create Meta (Facebook) Custom Audiences & Lookalikes based on Events & Parameters',
            'time'  => '21:53',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=w97FATUy7ok',
            'title' => 'How to configure Custom Conversions on Meta (Facebook) based on Events & Parameters',
            'time'  => '11:03',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=snUKcsTbvCk',
            'title' => 'Improve META (Facebook) EMQ score with form automatic data detection',
            'time'  => '11:48',
        ),
        array(
            'url'   => 'https://www.youtube.com/watch?v=c4Hrb8WK5bw',
            'title' => 'Fire a LEAD event on form submit - WordPress & PixelYourSite',
            'time'  => '5:58',
        ),
    );

renderRecommendedVideo( $videos );
    ?>

<div class="card card-style2">
        <div class="card-header card-header-style4 d-flex justify-content-between">
            <div class="d-flex align-items-center">
                <?php PYS()->render_switcher_input( "automatic_events_enabled", false, false, false, 'primary' ); ?>
                <h4 class="font-semibold main-switcher ml-22">Track key actions with the automatic events</h4>
            </div>
            <div>
                <?php
                if ( !PYS()->getOption( 'automatic_events_enabled' ) ) {
                    cardCollapseBtn( 'style="display:none"', 'icon-settings' );
                } else {
                    cardCollapseBtn( '', 'icon-settings' );
                } ?>
            </div>
        </div>

<div class="card-body global-events-body">
            <div class="global-events-list">
                <div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
							<?php PYS()->render_switcher_input( 'automatic_event_form_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track Forms</h4>
                        </div>
						<?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel( 'automatic_event_form', true, true, true, true, true, true, true );
                            ?>

<p>The Form event will fire when a form is successfully submitted for the following
                                plugins: Contact Form 7, Forminator, WP Forms, WS Forms, Formidable Pro, Ninja Forms,
                                and Fluent Forms. For forms added by different means, we will fire the event when the
                                submit button is clicked. Watch <a href="https://www.youtube.com/watch?v=c4Hrb8WK5bw"
                                                                   target="_blank" class="link">this video</a> to learn
                                more.
                            </p>

<p>Fires when the website visitor clicks form submit buttons.</p>

<?php
                            $eventsFormFactory = apply_filters( "pys_form_event_factory", [] );
                            if ( !empty( $eventsFormFactory ) ) : ?>
                                <div>
                                    <?php
                                    foreach ( $eventsFormFactory as $activeFormPlugin ) : ?>
                                        <p class="primary-heading-color detecting-form-description">
                                            <span class="primary-text-color primary_heading"><?php echo $activeFormPlugin->getName(); ?> detected</span>
                                            - we will fire the Form event for each successfully submitted form.
                                        </p>

<?php endforeach; ?>
                                </div>
                            <?php endif;

if ( $eventsFormFactory ) :
                                ?>
                                <div>
                                    <?php PYS()->render_checkbox_input( 'enable_success_send_form', 'Fire the event only for the supported plugins, when the form is successfully submitted.' ); ?>
                                </div>
                                <p>Configure Lead or other events using our <a
                                            href="<?php echo buildAdminUrl( 'pixelyoursite', 'events' ); ?>"
                                            class="link">events
                                        triggers</a>. Learn how from <a
                                            href="https://www.youtube.com/watch?v=c4Hrb8WK5bw"
                                            target="_blank" class="link">this video</a></p>
                            <?php endif; ?>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Event name:</span>
                                Form
                            </p>

<?php if ( isRedditActive() ) : ?>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                    FormSubmit (custom event)
                                </p>
	                        <?php endif; ?>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Specific parameters:</span>
                                <span class="purple-label">text</span>
                                <span class="purple-label">from_class</span>
                                <span class="purple-label">form_id</span>
                            </p>
                        </div>
                    </div>
                </div>

<div class="card-body">
                        <div class="gap-24">
                            <?php if ( Facebook()->enabled() ) : ?>
                                <?php if ( isWooCommerceActive() && Facebook()->getOption( "woo_complete_registration_fire_every_time" ) ) : ?>
                                    <div class="d-flex align-items-center">
                                        <?php Facebook()->render_switcher_input( 'automatic_event_signup_enabled_disable', false, true );
                                        ?>

<h4 class="switcher-label secondary_heading">Enable on Facebook</h4>
                                    </div>

<div class="d-flex align-items-center">
                                        <p>
                                            Facebook CompleteReservation is fired every time a WooCommerce takes
                                            place.<br/>
                                            You can change this from the WooCommerce events
                                            <a href="<?= buildAdminUrl( 'pixelyoursite', 'woo' ) ?>" target="_blank"
                                               class="link">
                                                settings
                                            </a>
                                        </p>
                                    </div>
                                <?php else: ?>
                                    <div class="d-flex align-items-center">
                                        <?php Facebook()->render_switcher_input( 'automatic_event_signup_enabled' ); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on Facebook</h4>
                                    </div>
                                <?php endif; ?>
                            <?php endif; ?>

<?php if ( GA()->enabled() ) : ?>
                            <div class="d-flex align-items-center">
                                <?php GA()->render_switcher_input( 'automatic_event_signup_enabled' ); ?>
                                <h4 class="switcher-label secondary_heading">Enable on Google Analytics</h4>
                            </div>
                        <?php endif; ?>

<?php if ( Bing()->enabled() ) : ?>
                            <div class="d-flex align-items-center">
                                <?php Bing()->render_switcher_input( 'automatic_event_signup_enabled' ); ?>
                                <h4 class="switcher-label secondary_heading">Enable on Bing</h4>
                            </div>
                        <?php endif; ?>

<?php if ( Pinterest()->enabled() ) : ?>
                            <div class="d-flex align-items-center">
                                <?php Pinterest()->render_switcher_input( 'automatic_event_signup_enabled' ); ?>
                                <h4 class="switcher-label secondary_heading">Enable on Pinterest</h4>
                            </div>
                        <?php endif; ?>

<?php if ( Reddit()->enabled() ) : ?>
                            <div class="d-flex align-items-center">
                                <?php Reddit()->render_switcher_input( 'automatic_event_signup_enabled' ); ?>
                                <h4 class="switcher-label secondary_heading">Enable on Reddit</h4>
                            </div>
                        <?php endif; ?>

<?php if ( GTM()->enabled() ) : ?>
                            <div class="line"></div>
                                <div class="d-flex align-items-center">
                                    <?php GTM()->render_switcher_input('automatic_event_signup_enabled'); ?>
                                    <h4 class="switcher-label secondary_heading">Enable on GTM dataLayer</h4>
                                </div>
                            <div class="line"></div>
                        <?php endif; ?>

<p>Fires when the website visitor signup for a WordPress account.</p>

<div>
                                <p class="primary-text-color primary_heading mb-8">Event name:</p>
                                <p class="primary-heading-color mb-8">On Google Analytics the event is called sign_up
                                    (standard
                                    event).</p>
                                <p class="primary-heading-color mb-8">On Facebook the event is called
                                    CompleteRegistration
                                    (standard event).</p>
                                <p class="primary-heading-color mb-8">On Pinterest the event is called Signup (standard
                                    event).</p>
                                <p class="primary-heading-color mb-8">On Bing the event is called sign_up (custom
                                    event).</p>
	                            <?php if ( isRedditActive() ) : ?>
                                    <p class="primary-heading-color mt-8">On Reddit the event is called SignUp (standard
                                        event).</p>
	                            <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_login_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track user login</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_login', true, true, true, true, true, false, true);
                            ?>
                            <p>Fires when the website visitor logins a WordPress account.</p>

<div>
                                <p class="primary-text-color primary_heading mb-8">Event name:</p>
                                <p class="primary-heading-color mb-8">On Google Analytics the event is called login
                                    (standard event).</p>
                                <p class="primary-heading-color mb-8">On Google Ads the event is called login (custom
                                    event).</p>
                                <p class="primary-heading-color mb-8">On Facebook, Pinterest, Bing<?php if ( isRedditActive() ) : ?>, Reddit<?php endif; ?> the event is
                                    called
                                    Login (custom event).</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_download_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track Downloads</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_download', true, true, true, true, true, true, true);
                            ?>
                            <div>
                                <div class="primary_heading">Extension of files to track as downloads:</div>
                                <?php PYS()->render_tags_select_input( 'automatic_event_download_extensions' ); ?>

<p class="form-text text-small mt-8">Fires when the website visitor open files with the
                                    designated format.</p>
                            </div>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Event name:</span>
                                Download
                            </p>

<?php if ( isRedditActive() ) : ?>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                    Download (custom event)
                                </p>
	                        <?php endif; ?>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Specific parameters:</span>
                                <span class="purple-label">download_type</span>
                                <span class="purple-label">download_name</span>
                                <span class="purple-label">download_url</span>
                            </p>

<p class="form-text text-small">*Google Analytics 4 automatically tracks this action with an
                                event called "file_download". If you want, you can disable this event for Google
                                Analytics</p>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_comment_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track comments</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_comment', true, true, true, true, true, false, true);
                            ?>
                            <p>Fires when the website visitor ads a comment.</p>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Event name:</span>
                                Comment
                            </p>

<?php if ( isRedditActive() ) : ?>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                    Comment (custom event)
                                </p>
	                        <?php endif; ?>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_scroll_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track page scroll</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_scroll', true, true, true, true, true, false, true);
                            ?>
                            <div class="d-flex align-items-center">
                                <label class="primary_heading mr-16">Trigger for scroll value</label>
                                <?php PYS()->render_number_input_percent( 'automatic_event_scroll_value', '', false, 100 ); ?>
                            </div>

<p>Fires when the website visitor scrolls the page.</p>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Event name:</span>
                                PageScroll
                            </p>

<?php if ( isRedditActive() ) : ?>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                    PageScroll (custom event)
                                </p>
	                        <?php endif; ?>

<p class="form-text text-small">*Google Analytics 4 automatically tracks 90% page scroll
                                with an event called "scroll". If you want, you can disable this event for Google
                                Analytics</p>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_time_on_page_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track time on page</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_time_on_page', true, true, true, true, true, false, true);
                            ?>
                            <div class="d-flex align-items-center">
                                <label class="primary_heading mr-16">Trigger for time</label>
                                <?php PYS()->render_number_input( 'automatic_event_time_on_page_value', '', false, 100 ); ?>
                                <label class="ml-20">seconds</label>
                            </div>

<p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Event name:</span>
                                TimeOnPage
                            </p>

<?php if ( isRedditActive() ) : ?>
                                <p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                    TimeOnPage (custom event)
                                </p>
	                        <?php endif; ?>
                        </div>
                    </div>
                </div>
                <div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_404_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track 404 pages</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>

<div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_404', false, true, false, true, false, false, false);
                            ?>
                            <p class="primary-heading-color">
                                <span class="primary-text-color primary_heading">Event name:</span>
                                404
                            </p>
                        </div>
                    </div>
                </div>
                <div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="d-flex align-items-center">
                            <?php PYS()->render_switcher_input( 'automatic_event_search_enabled' ); ?>
                            <h4 class="card-heading secondary_heading">Track searches</h4>
                        </div>
                        <?php cardCollapseSettings(); ?>
                    </div>
                    <div class="card-body">
                        <div class="gap-24">
                            <?php
                            enableEventForEachPixel('automatic_event_search', true, true, true, true, true, true, true);
                            ?>
                            <div>
                                <p class="primary-text-color primary_heading mb-8">Event name:</p>
                                <p class="primary-heading-color mb-8">On Google Analytics the event is called search
                                    (standard
                                    event).</p>
                                <p class="primary-heading-color mb-8">On Google Ads the event is called search (custom
                                    event).</p>
                                <p class="primary-heading-color mb-8">On Facebook, Pinterest called Search (standard
                                    event).</p>
                                <p class="primary-heading-color mb-8">On Bing the event is called search (custom
                                    event).</p>
	                            <?php if ( isRedditActive() ) : ?>
                                    <p class="primary-heading-color mt-8">On Reddit the event is called Search (standard
                                        event).</p>
	                            <?php endif; ?>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="disable-card d-flex align-items-center">
                            <?php renderDummySwitcher(); ?>
                            <h4 class="card-heading secondary_heading">Track AdSense</h4>
                        </div>
                        <div class="d-flex align-items-center flex-collapse-block">
                            <?php renderProBadge(); ?>
                            <?php cardCollapseSettings(); ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pro-feature-container">
                            <div class="gap-24">
                                <?php
                                DummyEventForEachPixel();
                                ?>

<p>Fires when the website visitor clicks on an AdSense ad.</p>

<p class="primary-heading-color">
                                        <span class="primary-text-color primary_heading">Event name:</span>
                                        AdSense
                                    </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="disable-card d-flex align-items-center">
                            <?php renderDummySwitcher(); ?>
                            <h4 class="card-heading secondary_heading">Track internal</h4>
                        </div>
                        <div class="d-flex align-items-center flex-collapse-block">
                            <?php renderProBadge(); ?>
                            <?php cardCollapseSettings(); ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pro-feature-container">
                            <div class="gap-24">
                                <?php
                                    DummyEventForEachPixel();
                                ?>

<p>Fires when the website visitor clicks on internal links.</p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name:</span>
                                    InternalClick
                                </p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name on TikTok:</span>
                                    ClickButton
                                </p>

<?php if ( isRedditActive() ) : ?>
                                    <p class="primary-heading-color">
                                        <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                        ClickButton (custom event)
                                    </p>
	                            <?php endif; ?>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Specific parameters:</span>
                                    <span class="purple-label">text</span>
                                    <span class="purple-label">target_url</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="disable-card d-flex align-items-center">
                            <?php renderDummySwitcher(); ?>
                            <h4 class="card-heading secondary_heading">Track outbound</h4>
                        </div>
                        <div class="d-flex align-items-center flex-collapse-block">
                            <?php renderProBadge(); ?>
                            <?php cardCollapseSettings(); ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pro-feature-container">
                            <div class="gap-24">
                                <?php
                                DummyEventForEachPixel();
                                ?>

<p>Fire this event when the visitor clicks on links to other domains.</p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name:</span>
                                    OutboundClick
                                </p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Specific parameters:</span>
                                    <span class="purple-label">text</span>
                                    <span class="purple-label">target_url</span>
                                </p>

<p class="form-text text-small">*Google Analytics 4 automatically tracks clicks on links to
                                    external
                                    domains with an event called "click". If you want, you can disable this event for Google
                                    Analytics</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="disable-card d-flex align-items-center">
                            <?php renderDummySwitcher(); ?>
                            <h4 class="card-heading secondary_heading">Track embedded YouTube or
                                Vimeo video views</h4>
                        </div>
                        <div class="d-flex align-items-center flex-collapse-block">
                            <?php renderProBadge(); ?>
                            <?php cardCollapseSettings(); ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pro-feature-container">
                            <div class="gap-24">
                                <?php if ( Facebook()->enabled() ) : ?>
                                    <div class="d-flex align-items-center">
                                        <?php renderDummySwitcher(); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on Facebook</h4>
                                    </div>
                                <?php endif; ?>

<?php if ( GA()->enabled() ) : ?>
                                    <div class="d-flex align-items-center">
                                        <?php renderDummySwitcher(); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on Google Analytics</h4>
                                    </div>

<div class="d-flex align-items-center">
                                    <?php renderDummySwitcher(); ?>
                                    <h4 class="switcher-label secondary_heading">Enable on Google Ads</h4>
                                </div>

<?php if ( Bing()->enabled() ) : ?>
                                    <div class="d-flex align-items-center">
                                        <?php renderDummySwitcher(); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on Bing</h4>
                                    </div>
                                <?php endif; ?>

<?php if ( Pinterest()->enabled() ) : ?>
                                    <div class="d-flex align-items-center">
                                        <?php renderDummySwitcher(); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on Pinterest</h4>
                                    </div>
                                <?php endif; ?>

<div class="d-flex align-items-center">
                                    <?php renderDummySwitcher(); ?>
                                    <h4 class="switcher-label secondary_heading">Enable on TikTok</h4>
                                </div>

<div class="d-flex align-items-center">
                                    <label class="primary_heading mr-8">Trigger for scroll value</label><?php
                                    renderDummySelectInput( 'Play' ); ?>
                                </div>

<?php if ( Reddit()->enabled() ) : ?>
                                    <div class="d-flex align-items-center">
			                            <?php Reddit()->render_switcher_input( 'automatic_event_video_enabled' ); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on Reddit</h4>
                                    </div>
	                            <?php endif; ?>

<?php if ( GTM()->enabled() ) : ?>
                                    <div class="d-flex align-items-center">
                                        <?php renderDummySwitcher(); ?>
                                        <h4 class="switcher-label secondary_heading">Enable on GTM dataLayer</h4>
                                    </div>
                                <?php endif; ?>

<p>Fires when the website visitor watches embedded YouTube or Vimeo
                                    videos.</p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name:</span>
                                    WatchVideo
                                </p>

<?php if ( isRedditActive() ) : ?>
                                    <p class="primary-heading-color">
                                        <span class="primary-text-color primary_heading">Event name on Reddit:</span>
                                        WatchVideo (custom event)
                                    </p>
	                            <?php endif; ?>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Specific parameters:</span>
                                    <span class="purple-label">progress</span>
                                    <span class="purple-label">video_type</span>
                                    <span class="purple-label">video_title</span>
                                    <span class="purple-label">video_id</span>
                                </p>

<p class="form-text text-small">*Google Analytics 4 automatically tracks YouTube embedded
                                    videos with two events called "video" and "video_progress". You can disable this event for
                                    Google Analytics YouTube videos.</p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="disable-card d-flex align-items-center">
                            <?php renderDummySwitcher(); ?>
                            <h4 class="card-heading secondary_heading">Track tel links</h4>
                        </div>
                        <div class="d-flex align-items-center flex-collapse-block">
                            <?php renderProBadge(); ?>
                            <?php cardCollapseSettings(); ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pro-feature-container">
                            <div class="gap-24">
                                <?php
                                DummyEventForEachPixel();
                                ?>

<p>Fires when the website visitor clicks on HTML links marked with "tel".</p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name:</span>
                                    TelClick
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

<div class="card card-style6">
                    <div class="card-header card-header-style2 has_switch">
                        <div class="disable-card d-flex align-items-center">
                            <?php renderDummySwitcher(); ?>
                            <h4 class="card-heading secondary_heading">Track email links</h4>
                        </div>
                        <div class="d-flex align-items-center flex-collapse-block">
                            <?php renderProBadge(); ?>
                            <?php cardCollapseSettings(); ?>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="pro-feature-container">
                            <div class="gap-24">
                                <?php
                                DummyEventForEachPixel();
                                ?>

<p>Fires when the website visitor clicks on HTML links marked with "email".</p>

<p class="primary-heading-color">
                                    <span class="primary-text-color primary_heading">Event name:</span>
                                    EmailClick
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div class="card card-style2">
        <div class="card-header card-header-style4 d-flex justify-content-between">
            <div class="d-flex align-items-center">
                <?php PYS()->render_switcher_input( "fdp_enabled", false, false, false, 'primary' ); ?>
                <h4 class="font-semibold main-switcher ml-22">Dynamic Ads for Blog Setup</h4>
            </div>
            <div>
                <?php
                if ( !PYS()->getOption( 'fdp_enabled' ) ) {
                    cardCollapseBtn( 'style="display:none"', 'icon-settings' );
                } else {
                    cardCollapseBtn( '', 'icon-settings' );
                } ?>
            </div>
        </div>
        <div class="card-body">
            <div class="gap-24">
                <div>
                    <p>Legacy Strategy: This approach is no longer recommended. Meta requires catalog items to be real
                        products, making dynamic promotion of blogs less effective. We plan to remove this feature in
                        future updates.</p>
                </div>
                <div class="line-dark"></div>
                <div>
                    <div class="mb-8 d-flex align-items-center">
                        <p>This setup will help you to run Facebook Dynamic Product Ads for your blog content.</p>
                    </div>

<div class="d-flex align-items-center">
                        <a href="https://www.pixelyoursite.com/facebook-dynamic-product-ads-for-wordpress"
                           target="_blank"
                           class="link">Click here to learn how to do it</a>
                    </div>
                </div>
                <?php if ( Facebook()->enabled() ) : ?>
                    <div class="line-dark"></div>
                        <div class="pro-feature-container d-flex align-items-center justify-content-between">
                            <div class="gap-24">
                                <div class="d-flex align-items-center">
                                    <?php renderDummySwitcher(); ?>
                                    <h4 class="switcher-label secondary_heading">
                                        Fire this events just for this Pixel ID with the
                                        <a class="link" href="https://www.pixelyoursite.com/?utm_source=pixelyoursite-free-plugin&utm_medium=plugin&utm_campaign=free-plugin-ids" target="_blank">pro version</a>
                                    </h4>
                                </div>
                                <div>
                                    <h4 class="primary_heading mb-4">Meta Pixel ID:</h4>
                                    <?php renderDummyTextInput(  ); ?>
                                </div>
                            </div>
                            <?php renderProBadge();?>
                        </div>
                    <div class="line-dark"></div>

<div class="d-flex align-items-center">
                        <label class="primary_heading mr-8">Content type:</label><?php
                        $options = array(
                            'product' => 'Product',
                            ''        => 'Empty'
                        );
                        Facebook()->render_select_input( 'fdp_content_type', $options ); ?>
                    </div>

<div class="d-flex align-items-center">
                        <label class="primary_heading mr-8">Currency:</label><?php
                        $options = array();
                        $cur = getPysCurrencySymbols();
                        foreach ( $cur as $key => $val ) {
                            $options[ $key ] = $key;
                        }
                        Facebook()->render_select_input( 'fdp_currency', $options ); ?>
                    </div>

<div class="d-flex align-items-center">
                        <?php Facebook()->render_switcher_input( 'fdp_view_content_enabled' ); ?>

<h4 class="switcher-label secondary_heading">Enable the ViewContent on every blog page</h4>
                    </div>
                    <div class="d-flex align-items-center">
                        <?php Facebook()->render_switcher_input( 'fdp_view_category_enabled' ); ?>

<h4 class="switcher-label secondary_heading">Enable the ViewCategory on every blog
                            categories page</h4>
                    </div>
                    <div class="d-flex align-items-center">
                        <?php Facebook()->render_switcher_input( 'fdp_add_to_cart_enabled' ); ?>

<h4 class="switcher-label secondary_heading">Enable the AddToCart event on every blog
                            page</h4>
                    </div>

<div class="switcher-subinput gap-24">
                        <div class="d-flex align-items-center">
                            <label class="primary_heading mr-8">Value:</label>

<?php Facebook()->render_number_input( 'fdp_add_to_cart_value', "Value" ); ?>
                        </div>

<div class="d-flex align-items-center">
                            <label class="primary_heading mr-16">Fire the AddToCart event:</label>

<?php Facebook()->render_select_input( 'fdp_add_to_cart_event_fire', $options ); ?>
                            <span id="fdp_add_to_cart_event_fire_scroll_block" class="ml-16">
                                <?php Facebook()->render_number_input_percent( 'fdp_add_to_cart_event_fire_scroll', 50 ); ?>
                            </span>
                        </div>
                    </div>

<div class="d-flex align-items-center">
                        <?php Facebook()->render_switcher_input( 'fdp_purchase_enabled' ); ?>

<h4 class="switcher-label secondary_heading">Enable the Purchase event on every blog
                            page</h4>
                    </div>

<div class="switcher-subinput gap-24">
                        <div class="d-flex align-items-center">
                            <label class="primary_heading mr-8">Value:</label>

<?php Facebook()->render_number_input( 'fdp_purchase_value', "Value" ); ?>
                        </div>

<div class="d-flex align-items-center">
                            <label class="primary_heading mr-16">Fire the Purchase event:</label>

<?php
                            $options = array(
                                'scroll_pos'    => 'Page Scroll',
                                'comment'     => 'User commented',
                                'css_click'     => 'Click on CSS selector',
                                //Default event fires
                            );
                            Facebook()->render_select_input( 'fdp_purchase_event_fire',$options ); ?>
                            <span id="fdp_purchase_event_fire_scroll_block" class="ml-16">
                                    <?php Facebook()->render_number_input_percent( 'fdp_purchase_event_fire_scroll', 50 ); ?>
                                </span>

<span class="ml-24">
                                    <?php Facebook()->render_text_input( 'fdp_purchase_event_fire_css', "CSS selector" ); ?>
                                </span>
                        </div>
                    </div>
                    <p class="primary-heading-color">
                        <span class="primary-text-color primary_heading">You need to upload your blog posts into a Facebook Product Catalog.</span>
                        You can do this with our dedicated plugin: <a
                                href="https://www.pixelyoursite.com/wordpress-feed-facebook-dpa" target="_blank"
                                class="link">Click
                            Here</a>
                    </p>
                <?php endif; ?>
            </div>

</div>
    </div>

<div class="card card-style2">
        <div class="card-header card-header-style4 d-flex justify-content-between">
            <div class="d-flex align-items-center">
                <h4 class="font-semibold main-switcher">Control the Global Parameters</h4>
            </div>
            <?php cardCollapseBtn( '', 'icon-settings' ); ?>
        </div>
        <div class="card-body" >
            <div class="mb-24 d-flex align-items-center">
                <p>You will have these parameters for all events, and for all installed tags. We recommend to
                    keep these parameters active, but if you start to get privacy warnings about some of them,
                    you can turn those parameters OFF.</p>
            </div>
            <div class="global-parameters mb-18">
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( "enable_page_title_param" ); ?>
                        <h4 class="font-semibold ml-16">page_title</h4>
                    </div>
                </div>
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( "enable_post_type_param" ); ?>
                        <h4 class="font-semibold ml-16">post_type</h4>
                    </div>
                </div>
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( 'enable_post_category_param' ); ?>
                        <h4 class="font-semibold ml-16">post_category</h4>
                    </div>
                </div>
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( "enable_post_id_param" ); ?>
                        <h4 class="font-semibold switcher-label ml-16">post_id</h4>
                    </div>
                </div>
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( 'enable_content_name_param' ); ?>
                        <h4 class="font-semibold switcher-label ml-16">content_name</h4>
                    </div>
                </div>
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( 'enable_event_url_param' ); ?>
                        <h4 class="font-semibold switcher-label ml-16">event_url</h4>
                    </div>
                </div>

<div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php PYS()->render_switcher_input( 'enable_user_role_param' ); ?>
                        <h4 class="font-semibold switcher-label ml-16">user_role</h4>
                    </div>
                </div>

<div class="global-parameter-item global-parameter-item-pro">
                    <div class="global-parameter-inputs">
                        <?php renderDummySwitcher(); ?>
                        <h4 class="font-semibold switcher-label ml-16">landing_page (PRO)</h4>
                    </div>

<div class="global-parameter-property">
                        <img src="<?php echo PYS_FREE_URL; ?>/dist/images/crown.svg" alt="crown"
                             class="global-parameter-property-icon">
                    </div>
                </div>
                <div class="global-parameter-item global-parameter-item-pro">
                    <div class="global-parameter-inputs">
                        <?php renderDummySwitcher(); ?>
                        <h4 class="font-semibold switcher-label ml-16">event_day (PRO)</h4>
                    </div>

<div class="global-parameter-property">
                        <img src="<?php echo PYS_FREE_URL; ?>/dist/images/crown.svg" alt="crown"
                             class="global-parameter-property-icon">
                    </div>
                </div>
                <div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php renderDummySwitcher( true ); ?>
                        <h4 class="font-semibold switcher-label ml-16">search (mandatory)</h4>
                    </div>

<div class="global-parameter-item">
                    <div class="global-parameter-inputs">
                        <?php renderDummySwitcher( true ); ?>
                        <h4 class="font-semibold switcher-label ml-16">plugin (mandatory)</h4>
                    </div>

<div class="global-parameter-property">
                        <img src="<?php echo PYS_FREE_URL; ?>/dist/images/alert.svg" alt="crown"
                             class="global-parameter-property-icon">
                    </div>
                </div>
            </div>
            
            <div class=" card card-style3 about-params">
                <div class="card-header card-header-style2">
                    <div class="d-flex align-items-center">
                        <i class="icon-Info"></i>
                        <h4 class="heading-with-icon bold-heading">About Parameters:</h4>
                    </div>
                </div>

<div class="card-body" style="display: block;">
                    <div class="gap-24">
                        <p>Parameters add extra information to events.

<p>They help you create Custom Audiences or Custom Conversions on Facebook, Goals, and
                            Audiences on Google,
                            Audiences on Pinterest, Conversions on Bing.</p>

<p>The plugin tracks the following parameters by default for all the events and for
                            all installed
                            tags: <span class="parameters-list">page_title, post_type, post_id, landing_page, event_url, user_role, plugin, event_time (pro),
                            event_day (pro), event_month (pro), traffic_source (pro), UTMs (pro).</span></p>

<p>Facebook, Pinterest, and Google Ads Page View event also tracks the following
                            parameters: <span class="parameters-list">tags,
                            category</span>.</p>

<p>You can add extra parameters to events configured on the Events tab. WooCommerce or
                            Easy Digital
                            Downloads events will have the e-commerce parameters specific to each tag.</p>

<p>The Search event has the specific search parameter.</p>

<p>The automatic events have various specific parameters, depending on the action that fires the
                            event.</p>
                    </div>

</div>
            </div>
        </div>
    </div>

// Set the initial state
        setCardBodyState( mainCheckbox.checked, cardBody );

// Checkbox state change handler
        mainCheckbox.addEventListener( "change", function () {
            setCardBodyState( this.checked, cardBody );
        } );

//pixel disable
        const checkboxesPixel = document.querySelectorAll( "#pys .pixel-switcher-enabled .custom-switch-input" );

checkboxesPixel.forEach( checkbox => {
            const parentCardPixel = checkbox.closest( ".pixel_info" );
            const cardBodyPixel = parentCardPixel.querySelector( ".pixel-data-wrap" );
            // Set the initial state
            setCardBodyState( checkbox.checked, cardBodyPixel );
        } );

document.addEventListener( "change", function ( event ) {
            if ( event.target && event.target.matches( "#pys .pixel-switcher-enabled .custom-switch-input" ) ) {
                const parentCardPixel = event.target.closest( ".pixel_info" );
                const cardBodyPixel = parentCardPixel.querySelector( ".pixel-data-wrap" );

setCardBodyState( event.target.checked, cardBodyPixel );
            }
        } );
    } );
</script>
<?php
	function enableEventForEachPixel( $event, $fb = true, $ga = true, $ads = true, $gtm = true, $bi = true, $tic = true, $pin = true, $red = true ) { ?>
        <div class="gap-24">
			<?php if ( $fb && Facebook()->enabled() ) : ?>
                <div class="d-flex align-items-center">
					<?php Facebook()->render_switcher_input( $event . '_enabled' ); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Facebook</h4>
                </div>
			<?php endif; ?>

<?php if ( $ga && GA()->enabled() ) : ?>
                <div class="d-flex align-items-center">
					<?php GA()->render_switcher_input( $event . '_enabled' ); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Google Analytics</h4>
                </div>
			<?php endif; ?>

<?php if ( $bi && Bing()->enabled() ) : ?>
                <div class="d-flex align-items-center">
					<?php Bing()->render_switcher_input( $event . '_enabled' ); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Bing</h4>
                </div>
			<?php endif; ?>

<?php if ( $pin && Pinterest()->enabled() ) : ?>
                <div class="d-flex align-items-center">
					<?php Pinterest()->render_switcher_input( $event . '_enabled' ); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Pinterest</h4>
                </div>
			<?php endif; ?>

<?php if ( $red && Reddit()->enabled() ) : ?>
                <div class="d-flex align-items-center">
			        <?php Reddit()->render_switcher_input( $event . '_enabled' ); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Reddit</h4>
                </div>
	        <?php endif; ?>

<?php if ( $gtm && GTM()->enabled() ) : ?>
                <div class="d-flex align-items-center">
					<?php GTM()->render_switcher_input( $event . '_enabled' ); ?>
                    <h4 class="switcher-label secondary_heading">Enable on GTM dataLayer</h4>
                </div>
			<?php endif; ?>
        </div>
		<?php
	}
    function DummyEventForEachPixel()
    { ?>
        <div class="gap-24">
			<?php if ( Facebook()->enabled() ) : ?>
                <div class="d-flex align-items-center">
					<?php renderDummySwitcher(); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Facebook</h4>
                </div>
			<?php endif; ?>

<?php if ( GA()->enabled() ) : ?>
                <div class="d-flex align-items-center">
                    <?php renderDummySwitcher(); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Google Analytics</h4>
                </div>
			<?php endif; ?>

<?php if ( Bing()->enabled() ) : ?>
                <div class="d-flex align-items-center">
                    <?php renderDummySwitcher(); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Bing</h4>
                </div>
			<?php endif; ?>

<?php if ( Pinterest()->enabled() ) : ?>
                <div class="d-flex align-items-center">
                    <?php renderDummySwitcher(); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Pinterest</h4>
                </div>
			<?php endif; ?>

<?php if ( Reddit()->enabled() ) : ?>
                <div class="d-flex align-items-center">
			        <?php renderDummySwitcher(); ?>
                    <h4 class="switcher-label secondary_heading">Enable on Reddit</h4>
                </div>
	        <?php endif; ?>

<?php if ( GTM()->enabled() ) : ?>
                <div class="d-flex align-items-center">
                    <?php renderDummySwitcher(); ?>
                    <h4 class="switcher-label secondary_heading">Enable on GTM dataLayer</h4>
                </div>
			<?php endif; ?>
        </div>
		<?php
    }
	?>

</div>

MR SKB