To show a pop-up form when a visitor comes to your site with specific UTM parameters (e.g., utm_source, utm_medium, etc.), you can implement this in React using the following steps:
---
Steps to Implement
1. Detect UTM Parameters
Use the browser's window.location.search to extract UTM parameters from the URL.
2. Check for Specific UTM
Once you extract the UTM parameters, check if they match the desired values (e.g., utm_source=google).
3. Show the Pop-Up Form
If the desired UTM is present, display a pop-up form. You can use a modal component (like from Material-UI, React Bootstrap, or a custom one).
---
Code Example
Here’s an example implementation in React:
1. Create a Helper to Parse UTM Parameters
2. Display Pop-Up Form if UTM Parameters Are Present
How It Works
1. URL with UTM: When the user visits your site with a URL like:
The getUTMParams function will extract these values.
2. Check and Show:
useEffect checks for the presence of utm_source.
If a valid UTM parameter is found, the state (showPopup) is set to true, triggering the pop-up.
3. Close Functionality:
Clicking the close button sets showPopup to false, hiding the form.
---
Using a Library for the Modal
If you'd rather use a library for styling and accessibility, you can replace the custom PopupForm with a library like:
React Modal
Material-UI Dialog
React Bootstrap Modal
Example with react-modal:
Additional Tips
1. Save UTM Parameters:
You might want to store UTM parameters in localStorage or state for later use (e.g., analytics or form submission).
localStorage.setItem("utm_source", utmParams.utm_source);
2. Prevent Repeated Pop-Ups:
Use localStorage to check if the pop-up has already been shown:
3. Customization:
Tailor the pop-up to display different forms or messages depe
nding on the UTM values.
---
This implementation ensures the pop-up only appears for visitors arriving with specific UTM parameters, improving targeting and user experience.
---
Steps to Implement
1. Detect UTM Parameters
Use the browser's window.location.search to extract UTM parameters from the URL.
2. Check for Specific UTM
Once you extract the UTM parameters, check if they match the desired values (e.g., utm_source=google).
3. Show the Pop-Up Form
If the desired UTM is present, display a pop-up form. You can use a modal component (like from Material-UI, React Bootstrap, or a custom one).
---
Code Example
Here’s an example implementation in React:
1. Create a Helper to Parse UTM Parameters
2. Display Pop-Up Form if UTM Parameters Are Present
How It Works
1. URL with UTM: When the user visits your site with a URL like:
The getUTMParams function will extract these values.
2. Check and Show:
useEffect checks for the presence of utm_source.
If a valid UTM parameter is found, the state (showPopup) is set to true, triggering the pop-up.
3. Close Functionality:
Clicking the close button sets showPopup to false, hiding the form.
---
Using a Library for the Modal
If you'd rather use a library for styling and accessibility, you can replace the custom PopupForm with a library like:
React Modal
Material-UI Dialog
React Bootstrap Modal
Example with react-modal:
Additional Tips
1. Save UTM Parameters:
You might want to store UTM parameters in localStorage or state for later use (e.g., analytics or form submission).
localStorage.setItem("utm_source", utmParams.utm_source);
2. Prevent Repeated Pop-Ups:
Use localStorage to check if the pop-up has already been shown:
3. Customization:
Tailor the pop-up to display different forms or messages depe
nding on the UTM values.
---
This implementation ensures the pop-up only appears for visitors arriving with specific UTM parameters, improving targeting and user experience.
Last edited: