Send Inquiry and GA4 Event

Workflow Trigger Code 202211

DEMO

Workflow App example

Trigger Code

通信処理（XMLHttpRequestやFetch）依存の「画面遷移のない form submit ボタン」の場合、クリックされても “form_submit” イベントは計測されません。
JavaScript で GA4 DataStreams の『測定ID／Measurement ID』（「G-」で始まる ID）を指定し、イベント情報を送信します。
GA4 “form_submit” event is not measured in the case of form submit button without screen transition which depends on XMLHttpRequest or Fetch.
JavaScript sends Event data to GA4 DataStreams “Measurement ID” starting with “G-“.

<script async src="https://www.googletagmanager.com/gtag/js?id=G-YourMesuID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-YourMesuID');
</script>

<form id="ga4_event_trigger" style="background:#f4f5f7;border-radius:10px;padding:10px 40px;margin:0px 10px 20px;">
  <br>
  <label for="qEmail"><strong>Email Address ／ メールアドレス</strong>:</label><br>
  <input  id="qEmail" type="email" name="q_Email"
    placeholder="you@example.com" required size="32" maxlength="64"><br>
  <br>
  <label   for="qInquiryText"><strong>Inquiry ／ 問合</strong>:</label><br>
  <textarea id="qInquiryText" name="q_InquiryText" rows="5" cols="33"></textarea><br>
  <br>
  <button type="button" id="qSubmit" class="qCorsSubmit">Submit ／ 送信</button><br>
  <span id="ga4_event_log"></span><br>
</form>

<script>
const strGa4Id            = "G-YourMesuID";               // ★★ See GA4 Admin DataStreams ★★
const strGa4EventName     = "sign_up";                    // ★★ Event Name Count As ★★
const numGa4EventValue    = 5000;                         // ★★ Event Value for Conversion ★★
const strGa4EventCurrency = "JPY";                        // ★★ USD, JPY, EUR... ★★
const strGa4EventMethod   = "Camp202212";                 // ★★ form parameter "method" ★★

const strStartUrl   = "https://example.questetra.net/System/Event/MessageStart/99/0/start"; // ★★
const strKey        = "sYJDWsP09zFT2rkoVLmFnUgvmphfrgzq";       // ★★ See your workflow app ★★
const strIdLog      = "#ga4_event_log";                         // ★must be same as Log dom id★
const strIdTrigForm = "#ga4_event_trigger";                     // ★
const strIdEmail    = "#qEmail";                                // ★
const strIdInquiry  = "#qInquiryText";                          // ★
const strIdSubmit   = "#qSubmit";                               // ★

const elTriggerForm = document.querySelector ( strIdTrigForm );
const elOutput      = document.querySelector ( strIdLog );
const elEmail       = document.querySelector ( strIdEmail );
const elInquiry     = document.querySelector ( strIdInquiry );

document.querySelector ( strIdSubmit ).addEventListener( 'click', ()=>{
  gtag( 'event', strGa4EventName, {
    'value':    numGa4EventValue,
    'currency': strGa4EventCurrency,
    'mothod':   strGa4EventMethod,
    'send_to':  strGa4Id
  });
  // https://developers.google.com/tag-platform/gtagjs/reference?#event

  let objFormData   = new FormData();
  objFormData.append ( 'key', strKey );
  objFormData.append ( 'q_Email'   , elEmail.value   ); // ★
  objFormData.append ( 'q_Inquiry' , elInquiry.value ); // ★
  elOutput.innerHTML = "Uploading ...";
  fetch( strStartUrl, { method: 'POST', mode: 'cors', body: objFormData } ).then( response => {
    console.log( 'response: ' + response.ok + " " + response.status + " " + response.statusText );
      // https://developer.mozilla.org/docs/Web/API/Response
    if ( !response.ok ) { throw new Error( "response was not ok" ); } // goto "catch"
    return response.text(); // QBPMS responces the string PID.
  })
  .then( (text) => {
    elOutput.innerHTML = "Accepted (ID: " + text + ").";
    elTriggerForm.reset();
      // https://developer.mozilla.org/docs/Web/API/HTMLFormElement/reset
  })
  .catch( (error) => {
    elOutput.innerHTML = error;
  });

});
</script>