Always use UTM codes when you post links on social media.
All except the campaign source is optional . But it's best practice to use the medium and campaign for best results.
import React, { useState, useEffect } from 'react';
const CurrencyConverter = () => {
const [amount, setAmount] = useState(1);
const [fromCurrency, setFromCurrency] = useState('CAD');
const [toCurrency, setToCurrency] = useState('EUR');
const [exchangeRate, setExchangeRate] = useState(null);
const [convertedAmount, setConvertedAmount] = useState(null);
const [date, setDate] = useState('');
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const currencies = ['CAD', 'EUR', 'GBP', 'USD'];
// Simulate exchange rates - in a real implementation, you would fetch these from an API
const getExchangeRates = () => {
// Mock exchange rates against EUR as base
const mockRates = {
EUR: 1,
CAD: 1.47,
GBP: 0.85,
USD: 1.08
};
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
year: 'numeric',
month: 'long',
day: 'numeric'
});
setDate(formattedDate);
return mockRates;
};
// Calculate the exchange rate between two currencies
const calculateExchangeRate = (from, to) => {
const rates = getExchangeRates();
// Convert to EUR first (as base), then to target currency
const rate = rates[to] / rates[from];
return rate;
};
// Handle the conversion
const handleConversion = () => {
setIsLoading(true);
setError('');
try {
const rate = calculateExchangeRate(fromCurrency, toCurrency);
setExchangeRate(rate);
setConvertedAmount((amount * rate).toFixed(2));
} catch (err) {
setError('Failed to convert currency. Please try again later.');
setExchangeRate(null);
setConvertedAmount(null);
} finally {
setIsLoading(false);
}
};
// Swap currencies
const handleSwap = () => {
setFromCurrency(toCurrency);
setToCurrency(fromCurrency);
};
// Handle amount input change
const handleAmountChange = (e) => {
const value = e.target.value;
if (value === '' || /^\d*\.?\d*$/.test(value)) {
setAmount(value);
}
};
// Effect to run conversion when currencies or amount changes
useEffect(() => {
if (amount > 0) {
handleConversion();
}
}, [amount, fromCurrency, toCurrency]);
return (
Currency Converter
Amount
From
setFromCurrency(e.target.value)}
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
{currencies.map(currency => (
{currency}
))}
⇄
To
setToCurrency(e.target.value)}
className="w-full p-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
{currencies.map(currency => (
{currency}
))}
{isLoading ? (
Loading...
) : error ? (
{error}
) : exchangeRate && (
{amount} {fromCurrency} = {convertedAmount} {toCurrency}
1 {fromCurrency} = {exchangeRate.toFixed(4)} {toCurrency}
1 {toCurrency} = {(1 / exchangeRate).toFixed(4)} {fromCurrency}
Mid-market rate as of {date}
Rates are for informational purposes only
)}
);
};
export default CurrencyConverter;
You can shorten your link and add additional marketing power to it using
Some Tips on Using UTMs: Most tracking programs support UTM tracking and it will give you better intel on what posts and marketing actions are working. Remember, starting to track better will help you make better decisions. You don't need to be perfect. Just start improving from where you are.
Always use all lowercase and no spaces. There is no perfect source, medium. Try to be consistent and use what makes the most sense to you.
Some helpful resources:
Simple Analytics (Forget GA4)
#1 Recommended Marketing Book
How To Build a Funnel with Free Funnel Builder
Funnel Tracking Software
Best Marketing Software
Leverage the power of other people's social media reach .
How to market your service using "social listening ."