Add Google Tag Manager

Single modal for the purchasing process

1. Step 1 (Create Account): The user clicks a button like “Start Checkout” to open the modal and see the first form.
2. Step 2 (Payment Method): The user clicks a “Continue” button inside the modal to proceed to the payment details section.
3. Step 3 (Purchase Complete): The user clicks a final “Buy Now” button, and a success message appears within the modal or it closes.

The goal would be to track each of these button clicks to understand the user’s progress through the funnel.

Step 1: Create the Tags

The tags themselves are the same as before because you’re still tracking the same events in Google Analytics.

• Tag 1:GA Event - Checkout Funnel - Step 1
  • Event Category: Checkout Funnel
  • Event Action: Create Account
• Tag 2:GA Event - Checkout Funnel - Step 2
  • Event Category: Checkout Funnel
  • Event Action: Payment Method
• Tag 3:GA Event - Checkout Funnel - Purchase Complete
  • Event Category: Checkout Funnel
  • Event Action: Purchase Complete

Step 2: Create the Triggers

You’ll create Click triggers, which fire when a user interacts with a specific on-page element. To do this, you’ll need a unique identifier for each button (like a CSS Class or ID).

• Trigger 1 (Modal Open): A Click – All Elements trigger.
  • Condition: Click ID equals start-checkout-button (or whatever the unique ID of the button is).
• Trigger 2 (Continue Button): A Click – All Elements trigger.
  • Condition: Click Class contains continue-btn (or whatever the unique class is).
• Trigger 3 (Buy Button): A Form Submission or Click – All Elements trigger.
  • Condition: Click ID equals buy-now-button or Form ID equals checkout-form. A Form Submission trigger is often more reliable for the final step.

Step 3: Link Tags and Triggers

You’ll connect each tag with its specific trigger in GTM:

• The GA Event - Checkout Funnel - Step 1 tag will fire with the Modal Open trigger.
• The GA Event - Checkout Funnel - Step 2 tag will fire with the Continue Button trigger.
• The GA Event - Checkout Funnel - Step 3 tag will fire with the Continue with checkout (Providers).
• The GA Event - Checkout Funnel - Purchase Complete tag will fire with the Button trigger.

This setting allows you to track the entire funnel, including dropouts.