Ninja Space Content Tech Blog

Integrating Google Adsense in a React App

August 17, 2021
For several years, I've been embedding Google Adsense on my websites to earn revenue. Part of the process is when I'm adding ads to a new site that I've just launched, I would need to add that site under settings for my Google Adsense account and wait for a review.

My Steps
  1. Go to your Google Adsense account and on the left side, select "Sites." 
  2. Go ahead and add a site here. Embed your code with your publisher ID in the head section of your website.
  3. Then, request Google Adsense to review it. 
  4. You will see this message: "Getting your site ready to show ads Please bear with us! This usually takes a few days, but in some cases can take up to 2 weeks. We'll notify you as soon as we've run some checks on your site. Make sure you don't remove your site and resubmit it because this can delay the process. In the meantime, place the code on every page you want ads to appear. After our checks are complete, your site will be ready to show ads. Remember to go to Ads and choose the ad formats you want to show"
  5. Now, this is the part that you'll need to be patient for awhile. When you check the console of your React App, you'll see this red error in the console "Failed to load resource: the server responded with a status of 403 ()" but don't fret, just be patient. It's because Google Adsense hasn't approved your request yet. When it has approved it, it will go away. 
I'll update this post to let you know how long this particular request took to approve.

Sept 14, 2021 Update: 
I was denied for Adsense for this website for not having enough content! I'm going to follow my own advice when I said, "Don't fret". I was successful with other websites that I've built for so I can make this work in a few months. Here was my denied message below from Google.

"We’ve found some policy violations on your site which means your site isn’t ready to show ads yet. Valuable Inventory: Not enough content It's important for a site displaying AdSense to offer significant value to the user by providing unique and relevant content, and not to place ads on auto-generated pages or pages with little to no original content. This may include, but is not limited to:
  • copying portions of text content from other sources
  • websites dedicated to embedded videos from other hosts
  • websites with gibberish content that makes no sense or seems auto-generated
  • templated or pre-generated websites that provide duplicate content to users."
So let's write more content, guys!

Suggested Rainbow Work Space Accessory:
 

G4 Property Configuration for Google Analytics

August 10, 2021
I went into my Google Analytics today to create a new property for a new website that I've just deployed yesterday and new properties are now automatically G4 (new for Google Analytics)! The original Google Analytics still remain if you've configured a property way before this new set-up. However, you're not going to be able to find the tracking info that you're familiar with in the new set-up. 

Usually after I've created a new property, I can find my tracking code under "Tracking Info" but I couldn't find it with the new property set-up. I went back to an old property and I can see that right away since those were configured way before this.

The reason why I can't find a "Tracking Info" option for the new property that I have just set up is because the way that Google Analytics is set up now is tracked through tags! You can still use existing UA codes for the older properties and sites but for these new configurations now with G4 (Google Analytics 4), they don't supply a UA code. You just embed the gtag code.


How to find to your code with G4
As mentioned, new Google Analytics properties are set up with G4, which use gtag. To find your gtag code with the new G4 property config, go to 'Admin' just like before. But instead of looking for 'Tracking Info" (since it won't exist on the new interface), go to 'Data Streams'.


Then click "Add stream" and add your site URL and info. It will give you Tagging instructions. Find the "Global site tag (gtag.js)" and it'll have the Global site tag (gtag.js) - Google Analytics there.

Copy and paste that gtag script into the head section of your website. Then, deploy the site with this tag. You should see your site tracked on your dashboard after visiting it. The fastest way to check if it is tracking properly is after you've deployed the site with the gtag, go on your website URL in the browser and view the 'Realtime overview' dashboard. You should see that visit show up immediately (maybe within 2 seconds). It's pretty simple but it was a shock to me at first because I was so used to seeing that "Tracking Info" link for over a decade of my life. 

See my screenshot of my real-time dashboard of the Google Analytics property that I have just set up this morning.

Read about the differences that I've noticed between Google Analytics UA and Google Analytics G4 via this blog link.

 

Bootstrap and React Update

August 9, 2021
I'm looking up documentation on React-Bootstrap this morning and I noticed there's an addition in the npm install command. 
It is now:  npm install react-bootstrap@next bootstrap@5.0.2

Before, the documentation didn't mention the "@next part" nor the "@5.0.2". Then, in my main index.js file, I still imported the following at the top:
import 'bootstrap/dist/css/bootstrap.min.css';

It works the same. I am a big fan of the accordian component from bootstrap. So to use that, I just need to import the following at the top of the file where I'm using the component:  import Accordion from 'react-bootstrap/Accordion' and then copy and paste the snippet from bootstrap's official doc.
 

Week Nine of Learning Angular

August 4, 2021
Oh my goodness, I am so tired this morning. I only had 2 hours of sleep!

My contracting work is slow this week so I am getting back to Learning Angular with Mosh (self-paced tutorial) again. I am 34% of the way. I know you're probably wondering why it is taking me so long to finish! As mentioned in my other weekly blog recaps with learning notes for Angular, it's because it takes me a long time to debug version differences as I am running a new version of Angular, whereas Mosh's tutorial is teaching with a much older version. I'm coding along while I'm listening to his videos.

Optimistic vs Pessimistic Updates
Modern updates utilizes Optimistic Updates as it'll render changes faster, which is where you make the changes like using a splice method before you make a call to an API server.

Observables vs Promises
For Angular, you use can Observables async operations. The async calls will only happen when you call subscribe with an observable. Observable are lazy and promises are eager and nothing happens until you subscribe with observable. You can always change observable into a promise but Mosh doesn't recommend it. You also need .then for observables whereas, you don't need a .then with promises.

The cool thing about observables is you can use something like the .retry(3) operator. You mainly use .map and .catch for observables. You can also chain events before subscribing when using observables.
 

create-react-app and Redux for React Apps Plus Safari Blank Issue

July 21, 2021
I've been creating react apps since October 2020 so it's only 9 months and I've only worked with redux for one of my projects so far and I want to work on another project with redux. For this blog post, I'll be highlighting on creating my new react app with create-react-app and redux implementation.

Through the coding bootcamp, I would just "npm install react react-dom react-scripts" in my command line, and "mkdir" my src and public folders and corresponding files to start my react projects. It's the manual way to do it without the extra stuff. I am glad they taught me this way first. This year, I've created two new post-bootcamp projects this way as well.

Today, I am finally creating a "create-react-app" but first in my command line I "sudo npm install -g create-react-app" on my computer this morning to install this globally onto my machine. Then, I made a new folder and in it using the terminal, I typed the following in the terminal: "create-react-app lipstickstain" and as it was installing a lot of files, my MacBook started to get hot right away. I call it "the take-off" as it sounded like being in a plane that's about to take off when it starts running this hot. I had to close my MacBook for awhile to let it cool down.

I use Node so you'll see my terminal commands have "npm" in it throughout my blog post below.

After Cool Down
Alright, I'm back at it again after it cooled down. I've dabbled in redux earlier this year as I was self-teaching myself and have just been learning it through youtube tutorials. However, it's been a few months since so I am going to relearn it again. I'm following along the "Redux Crash Course With React" from Traversy Media's Youtube Channel. As recommended, I'm also installing ES7 React/Redux/GraphQL/React-Native Snippet extension for my VSC.

Coding Steps
  1. After I've created a new react app with the "create-react-app" command. I created a 'component' folder under the 'src' folder. Then inside the 'component' folder, I created two files: 'Posts.js' and 'Postform.js'.
  2. Shortcuts >>> You can type rcc and then the 'tab' button to quickly get a class component set up or rfc and then the 'tab' button to get a function set-up quickly.
  3. React Legacy Update >>> The video said to use "componentWillMount" but that is now legacy.
  4. When you are ready to maintain state, implement redux and install their libraries so "npm i redux react-redux redux-thunk"
  5. To use redux, I created 2 new folders: actions and reducers. Then, I created the following 5 new files: postActions.js and types.js for 'actions' folder, index.js and postReducer.js for 'reducers' folder and a store.js file
  6. Extra Important Notes:
    • You will need to use Provider in this, which is a react component. It allows us to use redux and react together. You'll wrap <Provider> around the entire app.
    • To see the state in the redux extension tools, remember to add the following: + window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() to the createStore function. You will need to import "compose" as well. Here is how my entire store.js file looks like with this implementation.
    It really seems like I had to create a lot of additional files to just to use redux instead of just using react hooks, but I know the developing world demands it, especially for state management.

    I also want to note that other functions had to be imported because you have to create the store and make sure you connect react to redux.

Big issue:
I had the biggest issue when I was deploying my app onto AWS Amplify! My implementation with redux was not working on Safari so it would just show a blank page. I was exclusively testing on Google Chrome so I didn't pay attention to it very much but after an hour of looking it up, it had to do with my middleware. I had to install the 'redux-devtools-extension' library and implement it to my store. Here is what I had to update to in my store.js file: 
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
const composedEnhancer = composeWithDevTools(applyMiddleware(thunk))
const initialState = {};

const store = createStore(
  rootReducer, 
  initialState, 
  composedEnhancer
);

export default store;

Another Big Issue:
I ran into another deployed issue. When you are fetching data while under development on localhost, the browser doesn't throw an error when the route is http versus https. However, upon deployment, this is very crucial. Data will not pull or fetch if you accidentally forgot the 's' in https in your fetch URL from Heroku (which is where I deployed my API).


Another, Another Big Issue:
After fixing the previous two issues, I still wasn't able to pull data on deployment. On localhost, it was working fine. It ended up being an issue with cors. I use Express and Node and this was my back-end issue. Here is how my updated access control code looks like in my back end to fix the issue: 
server.all('*', (req, res, next) => {
 res.header("Access-Control-Allow-Origin", "*");
 next();
});

Finally
My app is now running as expected on my deployed link from AWS Amplify and no longer has a blank page on Safari, data is fetched successfully and no more scary cors red errors in the console! Phew! I hope these notes will help you debug if you run into the same issues as me. Now, it's time to beef up my content and grow my database by using the post form from my front-end UI. Then, I will think of a strategy to promote it somehow. Maybe though social media ads? 
 

About Ninja Space Content


Ninja Space Content I have been building simple websites on my own since 2008 and currently run several websites at the moment, including this one. I used to be an account manager for an affiliate/e-commerce company, helping affiliates grow their sales so I have some knowledge on the business side and client side of affiliate marketing. Most recently, I decided to complete a JavaScript coding bootcamp and graduated in Dec 2020.
Note: links to resources and promoting special deals may allow me to earn a small commission from each sale.
Work Station Accessories