How to read UTM tags and redirect url in react - html

I have an URL with UTM tags as below. When a user clicks/ hits the below URL(source), I would like to read UTM tags and redirect to another url(target).
Does anyone have a documentation link to read UTM tags and redirect the url in react?
Example:
Source
https://www.CustomDomain.com/?utm_source=linkedin&utm_medium=email&utm_campaign=sale&utm_id=123&utm_term=job&utm_content=ad
Target
https://www.CustomDomain.com/dashbord

With the latest react-router-dom *v6*, you can use a new hook named useSearchParams. Use it to get query params and you can then store them into localStorage,:
const [searchParams, setSearchParams] = useSearchParams();
searchParams.get("utm_source"); // similar for the rest of query params
With React router v4, You need to use this.props.location.search for generic or this.props.location (with useLocation) for functional components and parse the query parameters either by yourself or using a package

Related

Querystring and /#/ in URL

Our new URL structure is like below
http://domain.com/#/test?utm_source=test&utm_medium=test
We need to keep # (hash sign) in URL as the application depends upon it but at same time we also need querystring to work but the problem is browsers are skipping querystring from request if URL contain # and application / server not even receiving them.
You can't do that:
https://en.wikipedia.org/wiki/Fragment_identifier
The fragment identifier introduced by a hash mark # is the optional last part of a URL for a document. It is typically used to identify a portion of that document. The generic syntax is specified in RFC 3986. The hash mark separator in URIs does not belong to the fragment identifier.
Solutions:
Omit this tag and use hashtags always in this routing place
Use as $_GET param with urldecode
Read this Usage of Hash(#) in URL
First thing, it will not work; but one thing you can do is, put a javascript code on the page, where you compare the routes & AJAX request to the API ( that returns only data needed ). pseudo code can be,
window.onload = function(){
if(window.location.hash == "you needed"){
xhr(url_needed_with_json_or_xml);
}
}
NOTE: downside is you may need to keep routes in client side js, otherwise go change hash based url routing.

MEAN.js $http.get() return index html content instead of json file

I'm doing a web app based on original MEAN.js framework. When I want to request local json test file using $http.get() method in my AngularJS file, it returned my index html content.Is it a routing problem? I didnot change the original mean.js routing code(https://github.com/meanjs/mean), just added a $http.get() method in home.client.controller.js file. Can anyone help me with this? Thanks!
That is most likely happening, because you didn't define an endpoint for that particular GET request in your app.
Everytime you make a request to your server (for example a GET request to /my-request) nodejs/express are configured in MEAN.js so that your server will try to find the endpoint for that request, if it does not find any, that request will be handled by this particular code block (specified in /modules/core/server/routes/core.server.routes.js):
// Define application route
app.route('/*').get(core.renderIndex);
Which will basically render the index view.
I'm not sure if you're using a custom module or not, eitherway, if you want that request to be handled in a different way in MEAN.js, you can specify your endpoint in your custom module routes file (or in core.server.controller.js) like so:
// Define application route
app.route('/my-request').get(core.sendMyJSON);
Be careful, because this route must be placed before the one I mentioned earlier, otherwise your request will still be handled the same way and the index view will be rendered and served again.
Then you will have to create the controller that should be called to handle that request:
exports.sendMyJSON = function (req, res) {
// logic to serve the JSON file
};
This way you should be able to get it done with a few adjustments.
Side note:
I'm not entirely sure but I think if you place your JSON file in the public directory of your app you should be able to directly access it without the need for the extra logic.

pass paramter that is a url with parameters

I'm using asp.net mvc
I have a url that have some parameters, one of them is a url
e.g
www.example.com?p1=v1&p2=v2&p3=url&p4=v4...
the url i want to add has few parameters. how can i add them to this url? becuase from the second parameter the first url take them
e.g
www.example.com?p1=v1&p2=v2&p3=www.example2.com?p21=v21&p22=v22&p23=v23&p4=v4...
p21,p22,p23 belongs to the second url (www.example2.com) but the first url (www.example.com) taking p22, p23 has it's own
p.s
i can't control the first url process
Thank you all for your help
You should url encode the value of the query string parameter before sending it in the url:
http://www.example.com?p1=v1&p2=v2&p3=www.example2.com%3Fp21%3Dv21%26p22%3Dv22%26p23%3Dv23%26p4%3Dv4..
So in this example the value of the p3 parameter is properly url encoded for transmission over the HTTP protocol and can be unambiguously decoded back to its original value of www.example2.com?p21=v21&p22=v22&p23=v23&p4=v4 at the receiving site.
There are built-in methods in .NET for achieving this. For example the EscapeDataString method:
string urlEncoded = Uri.EscapeDataString("www.example2.com?p21=v21&p22=v22&p23=v23&p4=v4");
// Will produce: www.example2.com%3Fp21%3Dv21%26p22%3Dv22%26p23%3Dv23%26p4%3Dv4
Of course if you are using the built-in helpers in ASP.NET MVC this url encoding will happen automatically.
If on the other hand you cannot control the building of this url then you will most definitely end up with an ambiguous and wrong url (like the one shown in your question) that no valid system will be able to understand. That's the reason why certain standards have been imposed.

Angular Route vs $Resource

So I have a few REST URLs that I would like to load and bind to html when requested. When user searches for first name and if first name is found html gets populated from json. This works fine (Initial URL).
Initial URL
var url = http://localhost:8080/userSearch/name/find?firstName='+enteredValue.firstName+'&lastName=&
$http.get(url).success(function(data){
$scope.dataItems= data;
Now using ng-click on first name I want to request address and location based on these URLs
//URLs
var url = http://localhost:8080/userSearch/addr/find?address=&address
var url = http://localhost:8080/userSearch/loca/find?location=&location
So I started looking into UI-Router and $Resource. My first thought is to use $Resource but seems as if others have had problems with ports.
Could I use Router as well to solve this problem or should I stick with Resource?
ui-router and $resource are completely different things. ui-router is used to provide navigation between different states in your app while $resource is used to make calling server side APIs more convenient. If you need to retrieve data from a RESTful backend then $resource is the way to go. I'm not sure what you're referring to about the ports but I've built web applications that service millions of users daily on top of $resource and not had any port problems.

How can we construct custom URLs in HTML form with GET method?

I am using Django for making a website. I am using an HTML form with GET as the method.
The problem is that by default the get url is like this:
/search?name=user&place=place
But I want it to be something like:
my_site/search/user/place
How can that be done?
Why not use POST as method and retrieve the parameters in your view from request.POST? In this way they won't appear in your url.
Also, if you're expecting a list of results i recommend using ListView from views.generic, and in the dispatch() method you'll retrieve your parameters based on which you'll filter the user model (i guess).
It is better with a get request immo, but if you want something like: my_site/search/user/place it is easy, you just have to define the variables in your url and get the arguments in your function.
You can find more detail in django documentation
The only way you can do this in the browser is with Javascript. You will need to build the URL from the form contents. There are many mistakes you can make around encoding the values for the URL. You should be asking why you want to do it this way instead of using the QUERY_PARAMS as the form is doing.
Decoding it with Django isn't that hard, they are just variables in the URL pattern, but unless you have some kind of earth shattering new technology, you should let the browser send them to you without using JS to handcraft the URL.
Using the GET method send data via the web page. This means that the URL can be copied and rechecked at any time.