Develop Reference

How to create a sharable url containing dynamic html (javascript)

What is the best practice to create unique shareable urls for some text lists users create?
It's a single page website with a content div where users create text lists. Once they click share, how can I store those values inside a shareable url so that another user going to that address loads the same list?
I'm using html, js, jquery, php.
EDIT: as suggested below i'm already saving the lists on a database (firebase), and each have an unique ID, so I'd need to understand how I can create urls with a list id in it, and how to read the url back.
EDIT 2: so this is the code i'm using right now, combining answers from marzelin and the Alchemist Shahed in my other question about my database structure (Firebase how to find child knowing its id but not its parent's id (js)):
//js inside window load function:
const keyOfDynamicHtmlItemRef = new URL(window.location).searchParams.get("share")
if (keyOfDynamicHtmlItemRef) {
var dynamicHtmlListRef = firebase.database().ref('users');
// var dynamicHtmlItemRef = dynamicHtmlListRef.child(keyOfDynamicHtmlItemRef);
// console.log(keyOfDynamicHtmlItemRef);
// dynamicHtmlItemRef.once("value").then(dynamicHtmlSnap => {
// texta.innerHTML = dynamicHtmlSnap.val();
// });
dynamicHtmlListRef.once('value').then((snapshot)=>{
snapshot.forEach(function(data) {
if (data.key == keyOfDynamicHtmlItemRef) {
myVar = data.c;
myContentDiv.innerHTML = myVar;
}
});
});
}
and i'm simply trying to manually write the url in the searchbar as a first step, as https://example.com/?share=<random list id i copied from db>, but it does nothing.

So the way I would to this is I would have the users share click trigger a save to database saving all the dynamically generated content into a table.
One of the table values would be a randomly generated unique identifier of some sort that I would use as a query in the url like https://www.example.org/?share=skd822475
Then when a user visits the site and that query is in the url id use the unique identifier to look up the database and publish the dynamic content back on the page.
I would also put a half life on the database entry's of say no more than 30 days so that it doesn't clog up the db.

Saving data and creating shareable link:
document.querySelector(".share").addEventListener("click" => {
var dynamicHtmlListRef = firebase.database().ref('dynamic_html');
var dynamicHtmlItemRef = dynamicHtmlListRef.push();
dynamicHtmlItemRef.set(userCreatedDynamicHtml);
var keyOfDynamicHtmlItem = dynamicHtmlItemRef.key;
var linkToDynamicHtmlItem = `${window.location}?share=${keyofDynamicHtmlItem}`;
alert(`link: ${linkToDynamicHtmlItem}`)
})
Showing the dynamic HTML based on query parameters:
const keyOfDynamicHtmlItemRef = new URL(window.location).searchParams.get("share")
if (keyOfDynamicHtmlItemRef) {
var dynamicHtmlListRef = firebase.database().ref('dynamic_html');
var dynamicHtmlItemRef = dynamicHtmlListRef.child(keyOfDynamicHtmlItemRef);
keyOfDynamicHtmlItemRef.once("value").then(dynamicHtmlSnap => {
document.querySelector(".dynamic-html-mountpoint").innerHTML = dynamicHtmlSnap.val();
});
}

Let's start with the first question "How to create urls with a list id in it?"
The thing is that to answer this one we need to answer the second question first witch is
"How to read the url back?"
Consider that you have a php page named "draft". when a user visit https://www.example.com/draft?listId=an_id you will get listId using php like so $_GET("listId") and use that value to retrieve the list data and display the page content.
Now coming back to the first question, if the user share the draft like in social media (ex: facebook) then there is no problem because he will share a link and all his followers and any other user can access it easily. but if the user just save the draft then you will have to change the page url dynamically like this window.history.pushState(null, null, '/draft?listId=your_newly_created_id'); and so the user will copy the url and do whatever he wnt with it (sharing it in stackoverflow maybe example using jsfiddle http://jsfiddle.net/F2es9/ (you can change the url to look like this using 'htaccess' file)) at the end I would like to tell you that we don't "create" urls.
Edit
without using php code (or any other server side code). the difference will be in retrieving the data.
instead of using $_GET("listId") you will use new URL(window.location).searchParams.get("listId") to get the list id in javascript then using this value you can retrieve data from firebase and display your content

Google Tag Manager Virtual Page View

I have a little problem setting up a virtualPageView which should override the URL which is sent to google when no result is present.
Heres what I have as JavaScript code:
function returnNoSearchResultsGoogleTagManagerCode($searchterm){
if ($searchterm == "") return "";
$requestUri = $_SERVER['REQUEST_URI'] . "&no_result=".$searchterm;
$js = "<script>
$(document).ready(function(){
dataLayer.push({
'event':'empty_result',
'virtualPageURL':'".$requestUri."'
});
});
</script>";
return $js;
}
As you can see, I want to use an event trigger (empty_result).
In google, I use a Trigger to determine if the Page is a no result Page. First i created a custom Variable with custom JS
function(){
if (document.getElementsByClassName('ga-no-result').length > 0){
return true;
}else{
return false
}
}
The class is set, if the SearchEngine can't find a result. So far so good.
I also created a dataLayer variable to hold the virtualPageURL
Now I need an event which is triggered if the variable is true.
Finally I created a Tag with type PageView which is fired when the event occurs:
Until now it seems okay, the Tag is properly configured (i guess) but if I do a search which has no result, the Page URL is not overridden
The Tag is properly fired and the variables are filled. The overview of the dataLayer shows a correct dataLayer event.
But the PageURL is not overridden... Even if I wait a whole day, the category isn't sent to google.
What am I doing wrong?
I would be very thankful if someone would have an idea or even a solution :)
Thanks in advance
exa.byte
UPDATE:
Hey, I forgot to mention, that I want to use the new page variable as the string which google should use to determine the searchterm and the searchcategory
In Google Analytics I configuered the search as the "q" parameter and the "no_result" as the category.
Is it even possible to change the string which google will parse in the end?

To send a virtual pageview to Google Analytics, the field you need to change is page not {{Page Url}} , also the title field is often used.
That's really the only two things you need to do to send a simple virtual pageview.
Extra: I always start my pagepath with /virtual/ to be able to recognize which ones are virtual pageviews easily in GA

For virtual page view you have to change Field "page" - in your GTM-OnSearchEmptyResult you are changing "{{Page URL}}" - I don't think that's correct way to send virutal pageview. Also if you need to change hostname use Fieldname "hostname".
In preview mode you will not see Page URL changed in Variables Tab, you have to go to the actual GA tag that is fired and check it's values. You can either do this in GTM's preview tool or you can use standard developer tools - Network Tab and see what values are being sent to GA:
You can see "dl" parameter is the current page, if you set up virtual page you should also see parameter called "dp" this is going to be the new value of page in your GA.

If you want to setup virtual pageview you have to use page instead of {{Page URL}} in your fieldname and for Document title use title in you fieldname.
for more field reference of google analytics follow below link
https://developers.google.com/analytics/devguides/collection/analyticsjs/field-reference#hitType.

If you don't want to mess around with custom Tag Manager events it's still possible to use the good old ga method, even if you don't include the Analytics code on the page. You just need to fetch the right tracker dynamically, as explained by Simo Ahava in this thread.
if (typeof ga === "function") {
ga.getAll().forEach((tracker) => {
tracker.set('page', '/my/path'); // <- change here
tracker.send('pageview');
});
}
I also put it in a gist here.

thanks for your help. I think I got rid of the Problem and have solved it now. I will describe my solution below:
The solution is quite simple.
I had an error/ spelling error # google backend. I set the search_category parameter to "no_results", but used "no_result" for implementation...
Pretty dumb, but sometimes you just won't see the wood for the trees...
I created a new Trigger as helper "HelperDomReady" to trigger the only if DOM is ready and the variable "isEmptySearch" equals "(bool)true"
Now I can see the searchterms which have no result in google backend in the "sitesearch categories" summary. Since I won't set the parameter at all, if the search had at least one hit, the site-search category shows "not-set" for successful results. Therfore the category-section will only show searches without a hit. Problem solved :)
Disadvantage: The searchterm is also listed in the normal list. But I think this is negligible

What is getParameterByName in Firebase?

Firebase says that in the customize email action handler that they will implement getParameterByName. What does that exactly mean?

firebaser here
I'll assume you're referring to this page of the Firebase Authentication documentation, which contains the following code snippet:
// TODO: Implement getParameterByName()
// Get the action to complete.
var mode = getParameterByName('mode');
// Get the one-time code from the query parameter.
var actionCode = getParameterByName('oobCode'};
// (Optional) Get the API key from the query parameter.
var apiKey = getParameterByName('apiKey'};
Note that I only copied enough of the code to answer your question. Refer to the link for full code.
The custom email handler is an HTML page that is invoked by Firebase when there is an action that you may want to respond to. The Firebase back-end informs your page of the action and its data, by passing these as URL parameters when invoking your page.
So say you have your custom handler in a page called my_email_handler.html, it may invoked your page as: my_email_handler.html?mode=resetPassword&oobCode=123456&apiKey=AZdfshjsdfhj
The/your page then parses these URL parameters and takes the appropriate (custom) action.
The comment is a TODO for you as the application developer, you will need to implement a getParameterByName() method that retrieves the value from a URL parameter with the given name. If you do a search for getParameterByName you'll find quite some implementations of such a function.

Add or update current URL parameter using angular's $location

I have a page with multiple parameters in my URL. I am trying to write a function to use on the click of an element. I want it to check if parameter pthree exists. If it does, update it to a new value (not duplicate it). If it does not exist, append it to my current URL and reload the page.
I am running into an issue when I try to update the current URL.
My current URL structure:
mypage?pone=99.9999999&ptwo=-44.4444444&pthree=1&pfour=1&pfive=1
Controller snippet:
$scope.test = function (){
$location.search('pthree', 0);
}
This partially works. It updates my URL, but it adds #?pthree=0 to the end of my current URL.
The result I would like instead is:
mypage?pone=99.9999999&ptwo=-44.4444444&pthree=0&pfour=1&pfive=1
Any thoughts on what I could do to get my desired result? Thanks in advance!

Here is what worked for me. I found that I needed to set the HTML5 mode of my app. Read more about HTML5 mode here: https://docs.angularjs.org/guide/$location.
After this, I ran into another issue when calling $location.search({ pThree: '0' }. It started writing over all of my other parameters. For example, the URL structure was changing to ?pThree=0. To solve this I had to read all parameters, update pThree, and then write all back.
I hope this helps someone else.

You can do this pretty easily by just doing:
// existing url with params
// http://myurl.com/path/view/etc?param1=abc&param2=def
// add your new param to the search() object
$location.search().param3 = 'ghi';
// set your search again with the updated search object
$location.search( $location.search() );
This will update your url like so:
// http://myurl.com/path/view/etc?param1=abc&param2=def&param3=ghi

How do I post a tweet using javascript, twitter api and node.js?

Ok...I'm new to this >.<
I have my npm from github.com (node-twitterbot...whose dependency is twit)
I've looked at the twitter api..
What I'm trying to do is add an action which is post a tweet.
I can't seem to find out how to define the string for the actionName (which might be...)
var tweet = ("https://api.twitter.com/1.1/statuses/update.json");
and the actionFunction. Then I need to put it all together to post. Also, I have my instructions written below, however I'm not sure how to apply them. My actionName could be "tweet"? I have no idea how to define my actionFunction either...Can someone explain this? I NEED TO KNOW WHAT TO PUT WHERE. I have the twitterbot.js file open and ready to edit along with with all my oauth keys...access and consumer stuff. Please help anyway you can. I can paste my twitterbot.js file if that helps. Below are the instructions on the npm site reads:
Actions
In order to get your node-twitterbot to actually do something, you need to define actions. It is done through the addAction() method. It takes 2 parameters:
actionName: a string value for the name of an action
actionFunction: a function to be called when a given action is scheduled. (See below for method signature)
So our addAction method might look like this:
Bot.addAction("tweet", function(twitter, action, tweet) {
Bot.tweet("I'm posting a tweet!");
});
The twitter variable passed into the function is the Twit object associated with a given node-twitterbot, and can be managed directly. The same Twit object is available as [TwitterBot].twitter as well.
The action variable passed into the function is the TwitterBotAction created by addAction.
And the tweet object is the tweet passed into the action (if there was one)
TwitterBotActions
addAction() returns a TwitterBotAction object.
var tweetAction = Bot.addAction("tweet", function(twitter, action, tweet) {
Bot.tweet("I'm posting a tweet!");
});
But you will rarely need to directly hold onto the tweetAction directly. You can always get a reference to the action by calling
Bot.actionWithName("tweet");
Which will return the TwitterBotAction object, or null if the name is invalid (or the action already removed)
Again, I'm trying to put all of this together so i can post a tweet using the javascript in node.js Thank you for your time and consideration.