Wordpress 'wp_enqueue_script' 不能在 'wp_login' 钩子上工作

Question

I want to execute a javascript when user logs in into my wordpress system. To be specific I need to execute a Google Tag Manager Javascript. Please refer the code below,

function gtm_wp_login() {
    wp_enqueue_script( 'gtm-on-login', get_stylesheet_directory_uri() . '/assets/js/gtm_on_login.js', array());
    echo "<script>alert('Welcome');</script>";
    echo "One";
    echo "<script>console.log('Welcome Theme');</script>";
    echo "Two";
    print_r($_REQUEST);
    echo "Three";
    die();
}
add_action( 'wp_login', 'gtm_wp_login');

I put the above code in the functions.php file of Wordpress theme. In enqueued file gtm_on_login.js, I have only done console.log at the moment to check if it gets enqueued. I got to see a weird behavior, when I put die() statement at the end of callback function

1. the inline javascript echoed, shows the output including the alert('Welcome') statement.
2. the console.log in enqueued script do not display. (I checked the wp_enqueue_script statement by putting it outside the callback to check its syntax correctness, it shows output in that case)

However, on removing the die() statement neither Pt 1 nor Pt. 2 output gets displayed, In other words, no javascript gets entertained in the flow. Please guide, how can I execute a script by enqueing and echoing it directly when user logs in the wordpress system.

Answer 1

I think you're approaching this problem slightly incorrectly. Have you verified 100% that your script is inside the source code of the login page? I'm willing to bet that you won't find your added JS on that login page.

What you are trying to utilize wp_enqueue_script which doesn't work properly with adding the said scripts to particular pages that are deemed as backend WordPress pages. This is an action hook which injects scripts/styles even if need be to the front-end of the site.

From what I'm gathering, you're trying to track users in the WP backend after they've logged in, or have some sort of a trigger hit when they do log into the WP backend. In order to do this properly and have it work with a WP login page I would look into creating a front-end login utility which is more or less just an empty page with your header, and footer. This will allow you to control exactly what is injected and ran on that particular page without really trying to mess around with injecting scripts into the admin-core. Furthermore, you can then lean on GTM to create a trigger when that particular button is either clicked, or there is some sort of a successful message posted to the user, which would then track the data independently in your GTM dashboard.

Here's some supporting code which can get you started on the custom login page. Keep in mind you might want to create a custom page template and delegate this code towards that rather than the wp-login.php page like the code in this example:

/* Main redirection of the default login page */
function redirect_login_page() {
    $login_page  = home_url('/login/');
    $page_viewed = basename($_SERVER['REQUEST_URI']);

    if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}
add_action('init','redirect_login_page');

/* Where to go if a login failed */
function custom_login_failed() {
    $login_page  = home_url('/login/');
    wp_redirect($login_page . '?login=failed');
    exit;
}
add_action('wp_login_failed', 'custom_login_failed');

/* Where to go if any of the fields were empty */
function verify_user_pass($user, $username, $password) {
    $login_page  = home_url('/login/');
    if($username == "" || $password == "") {
        wp_redirect($login_page . "?login=empty");
        exit;
    }
}
add_filter('authenticate', 'verify_user_pass', 1, 3);

/* What to do on logout */
function logout_redirect() {
    $login_page  = home_url('/login/');
    wp_redirect($login_page . "?login=false");
    exit;
}
add_action('wp_logout','logout_redirect');

Some useful information for reference: https://themetrust.com/build-custom-wordpress-login-page/

Answer 2

The solution that worked for me, may be it is a work around.

In the functions.php of my theme folder I added the following code,

add_filter('login_redirect', 'login_query_parameter', 99, 3);

function login_query_parameter($url, $request, $user) {
    if(strpos($url, 'wp-admin') !== false) {
        return $url;
    }
    else {
        return $url."?login=success";
    }   
}

I have added if else in above code, as I only want to track login via frontend and not wordpress backend. Further in functions.php file of the theme I am enqueing the script if the user is found logged in.

if(is_user_logged_in()) {
        wp_enqueue_script( 'gtm-on-login', get_stylesheet_directory_uri() . '/assets/js/gtm_on_login.js', array());
        wp_localize_script(
            'gtm-on-login',
            'gtm_on_login_obj',
            array(
                'user_id' => get_current_user_id()              
            )
        );

    }

I am enqueuing the script if the user is found logged in and passing the necessary data using wp_localize_script() function, in my case current user's id.

And inside the gtm_on_login.js,

var url = window.location.toString();
if(url.indexOf("login=success") > -1) {
   
  // Any Javacript to execute on Login, in my case GTM Code

   var trimmed_uri = url.replace('?login=success','');
   window.history.replaceState({}, document.title, trimmed_uri); 
} 

So now with the above set of code, gtm_on_login.js is loaded on the page only when user is found logged in and the based on the query parameter check my javascript gets executed only once when user logs in. The following 2 lines in above code removes the query parameter from the url to prevent re-execution of the script on same page reload.

var trimmed_uri = url.replace('?login=success','');
window.history.replaceState({}, document.title, trimmed_uri);