How to track user clicks on Phaser web-game?-CodePudding

So I've made a web game with the Phaser.js framework. Without a database, I want to track events/actions in the game. The data consist of at least two strings: time_stamp & event (i.e. "click the 'Play' button").
My current attempt is to write the data to my google sheets. How to do that?

I want something like:

Function for 'Play' button

playGame() {  
  // Go to gameplay scene  
  scene.start(Gameplay)
  // Script to insert data to google sheet  
  submitEvent(timestamp, "click the 'Play' button"){  
  }
}

Or maybe there's an easier way to do the tracking? Need to be a free service and capable to store data online with javascript.

I tried the Google Sheet API but was confused with the doc, it seems like I need the player to log in and authorize, is it possible to avoid that? Most tutorials use HTML Form to send data, which I didn't use.

CodePudding user response：

I believe your goal is as follows.

You want to put the values of timestamp and "click the 'Play' button" to your Google Spreadsheet using Javascript without authorization process.

In the current stage, in order to put a value to Spreadsheet using Sheets API, it is required to use the access token retrieved from OAuth2 and the service account. I'm worried that in this case, the script might be a bit complicated, and it might not your expected direction.

If you want to put a value to your Spreadsheet with a simple script without the authorization process, how about using Web Apps created by Google Apps Script? When Web Apps is used, your goal might be able to be achieved. When the method for putting a value to Spread sheet with Web Apps is implemented in Javascript, please do the following flow.

Usage:

1. Create Spreadsheet.

Please create Spreadsheet. You can create a new Spreadsheet by accessing https://docs.google.com/spreadsheets/create. In this case, the Spreadsheet is created in the root folder of your Google Drive. And please open the script editor on Spreadsheet.

2. Prepare Google Apps Script.

Please copy and paste the following script to the script editor and save the script.

function doGet(e) {
  const { value1, value2 } = e.parameter;
  SpreadsheetApp.getActiveSpreadsheet().getSheets()[0].appendRow([value1, value2]);
  return ContentService.createTextOutput("Done.");
}

3. Deploy Web Apps.

The detailed information can be seen in the official document.

Please set this using the new IDE of the script editor.

On the script editor, at the top right of the script editor, please click "click Deploy" -> "New deployment".
Please click "Select type" -> "Web App".
Please input the information about the Web App in the fields under "Deployment configuration".
Please select "Me" for "Execute as".
Please select "Anyone" for "Who has access".
Please click "Deploy" button.
When "The Web App requires you to authorize access to your data." is shown, please click "Authorize access" button. And, please authorize the scopes.
- This authorization process is only one time. When you access Web Apps using Javascript, no authorization is required, because it has already been done here. I thought that this might be an important point to your expected direction.
Copy the URL of the Web App. It's like https://script.google.com/macros/s/###/exec. This URL is used for your HTML.

4. Testing.

When the values of value1 and value2 are timestamp and "click the 'Play' button", the sample script of Javascript is as follows. And, please set your Web Apps URL. And, please use this script in your script.

function sample(value1, value2) {
  const webAppsURL = "https://script.google.com/macros/s/###/exec"; // Please set your Web Apps URL.

  fetch(`${webAppsURL}?value1=${value1}&value2=${value2}`).then(async (res) => console.log(await res.text()));
}

When you run sample(value1, value2) by giving the values, the values are put to the 1st sheet of the Spreadsheet.

Note:

When you modified the Google Apps Script of Web Apps, please modify the deployment as a new version. By this, the modified script is reflected in Web Apps. Please be careful about this.
You can see the detail of this in my report "Redeploying Web Apps without Changing URL of Web Apps for new IDE (Author: me)".