How to organize the sending of the Ya.Metrika goal when registering a user?

Question

1C-Bitrix

You need to send the Yandex.Metrica goal (reachGoal()) at the time of user registration. What is the best way to do this without changing kernel files? Assigning an onclick event to the "Sign up" button is not good because the form may not be submitted - the target should only be called when the form is submitted.

Answer 1

I solved the problem by blocking the form submission with the "submit" button and submitting it myself using an ajax request. Although, the option from the comments to the question seems to be more viable if "real" users are needed to verify their account, and not tracking the registration process itself. It depends on the task and what the advertisers want from you.
I'll describe my solution here.
1. "/template_name/components/bitrix/system.auth.registration/template_name/template.php"
Set the onclick event to the "submit button" here:
2. In the main script file (or in any other file loaded on the page):

function registerSubmit(event) {
  event.preventDefault();

  var form = jQuery(event.target).closest('.registration-form');

  if (form.length) {
    form.find('[name="USER_EMAIL"]').val(form.find('[name="USER_LOGIN"]').val());

    BX.ajax.post(
      form.attr('data-ajax'),
      form.serialize(),
      function(result) {
        var parent;

        result = jQuery(result);

        if (result.attr('id') == 'bx_incl_area_1') {
          yaCounter52684615.reachGoal('LK');
          location.href = '';
        }
        else {
          /*
            Обработка действий в случае неудачной попытки регистрации,
            в этом случае в result приходит разметка формы с текстом ошибок.
          */
        }
      }
    );
  }

  return false;
}

The same for authorization, except that the path to the component template is different and some changes in the function itself. Some actions may be specific to my particular solution and the installed template - I do not know what changes were made to the templates before me. This line:
Fills the invisible input "USER_EMAIL" with the data from the input "USER_LOGIN" (where the user, oddly enough, enters his email address). It may not be needed in the standard (or any other) template.
But the essence remains the same: we get the form-parent of the "submit" button that was clicked, we look for all the fields necessary for registration to be filled in, we serialize the form and send it as a post-request to the required address (I had this address written in "data- ajax"). If everything went well, we reload the page, and if not, we perform other actions. For example, we replace the content of the parent of the form with what came from the server. The code in this section was intentionally removed, because it was definitely specific.
To determine if everything went well, we look at what the server returns in both cases, look for differences between the two results, and so check. At me at successful registration the server returns empty "div" with "id = bx_incl_area_1".

Answer 2

Why don't you like adding a frame (Frame) with the placement of everything you need in it?