Learn business growth with Google Analytics 4 Forums Google Analytics 4 Troubleshooting input value recognition in Angular using dev tools

  • Troubleshooting input value recognition in Angular using dev tools

    Posted by Sophie on 11 February 2023 at 4:02 am

    Hey, I’ve been working on making my workflow a bit more efficient with GA4 by creating a set of dimensions for a long list of GA4 properties. Basically, I have a script that I run in the dev tools console that does the grunt work for me. It’s basically like having an extra pair of hands to click and type for me.

    The only issue is that after running the code, the page acts like the field hasn’t changed. It seems like some sort of validation step isn’t kicking in, so the save button is just hanging out there, disabled. What’s weird is if I manually click into the field, it displays a validation error but then if I copy and paste the same text, it’s suddenly fine.

    Disabled Save Button

    Here’s a peek at the code I’m currently running:

    
    document.querySelector('button.create-definition-button').click();
    document.querySelector('definition-builder input.custom-name-control').value = dimensions[i].customName;
    

    I tried perfecting my code to mirror as close as possible to what I’d manually do by adding varying combinations of the following:

    
    document.querySelector('definition-builder input.custom-name-control').click();
    document.querySelector('definition-builder input.custom-name-control').blur();
    document.querySelector('definition-builder input.custom-name-control').dispatchEvent(new Event('change'));
    

    No dice though. Can’t seem to crack it. Any thoughts?

    Jesse replied 10 months, 4 weeks ago 3 Members · 2 Replies
  • 2 Replies
  • David

    Member
    26 February 2023 at 2:37 am

    Yep, the issue is solved. I’m not exactly sure which specific event needed to be triggered, but I found a trick. First, I ran ‘monitorEvents(el)’ in the tools console. After then manually interacting with the form field–the way that gets the field validated–I looked over all the events that appeared. This way, you can try likely events directly instead of going through everything.

    Now, the surefire solution was to trigger a bunch of events, like this:

    `javascript
    el.dispatchEvent(new Event(“focus”));
    el.dispatchEvent(new Event(“pointerup”));
    el.dispatchEvent(new Event(“mouseup”));
    el.dispatchEvent(new Event(“click”));
    el.dispatchEvent(new Event(“keydown”));
    el.dispatchEvent(new Event(“input”));
    el.dispatchEvent(new Event(“keyup”));
    el.dispatchEvent(new Event(“keypress”));
    el.dispatchEvent(new Event(“textInput”));
    el.dispatchEvent(new Event(“blur”));
    `
    This worked like a charm!

  • Jesse

    Member
    12 June 2023 at 10:04 am

    It looks like the issue might be that you’re trying to trigger a change, but the system is not recognizing it. Because of how some systems are built, your script may need to not just make the change but also trigger a specific event to make the system realize the change happened. You may have more luck if you use a different method, like trying to trigger an “input” event instead, as some systems listen for this instead of a “change” event.

Log in to reply.