Google Analytics 4

is it normal to have "Direct source" for the most of the traffic and purchses for new website | React and Google Analytics

Posted by Jesse on 4 August 2022 at 6:44 pm

My website here newminatis has its most traffic from direct sources, which is weird as it doesn’t have good SEO practices.
I’m running ads through social media and I would expect honestly to have the traffic from there, am I missing something in my implementation?

I’m using react-ga4 and Google Analytics 4.

here is how my Root looks.

import MarketShop from 'pages/index'
import FAQs from 'pages/legal/FAQs'
import PrivacyPolicy from 'pages/legal/privacyPolicy'
import ReturnPolicy from 'pages/legal/returnPolicy'
import ShippingInformation from 'pages/legal/shippingInformation'
import TermAndCondition from 'pages/legal/termsAndCondition'
import React, { lazy, Suspense } from 'react'
import {
    createBrowserRouter,
    RouterProvider,
    useLocation,
} from 'react-router-dom'
import { ToastContainer } from 'react-toastify'
import Child from './Child'
import Checkout from 'pages/checkout'
import Cart from 'pages/cart'
import Shop from 'pages/shop'
import Profile from 'pages/profile'
import Blogs from 'pages/blogs'
import OurStory from 'pages/legal/OurStory'
import BackdropLoading from 'components/loading/BackdropLoading'
import ReactGA from 'react-ga4'
import ReactPixel from 'react-facebook-pixel'
const LoginPage = lazy(() => import('pages/login'))
const ProductDetails = lazy(() => import('pages/product/[slug]'))
const Orders = lazy(() => import('pages/orders'))
const OrderDetails = lazy(() => import('pages/orders/[id]'))
const Payment = lazy(() => import('pages/payment'))
const ReviewOrder = lazy(() => import('pages/reviewOrder'))
const SignUpPage = lazy(() => import('pages/signup'))
const AddressList = lazy(() => import('pages/address'))
const AddressEditor = lazy(() => import('pages/address/[id]'))
const ReviewPage = lazy(() => import('pages/reviewPage'))

ReactGA.initialize('G-xxxxxxxx')
ReactPixel.init('xxxxxxxxxxxxx', null, {
    autoConfig: true,
    debug: true,
})
ReactPixel.pageView()

const Root = () => {
    const router = createBrowserRouter([
        {
            path: '/',
            element: <Child />,
            children: [
                {
                    path: '',
                    element: <MarketShop />,
                },
                {
                    path: 'faqs',
                    element: <FAQs />,
                },
                {
                    path: 'blogs',
                    element: <Blogs />,
                },
                {
                    path: 'terms-and-conditions',
                    element: <TermAndCondition />,
                },
                {
                    path: 'privacy-policy',
                    element: <PrivacyPolicy />,
                },
                {
                    path: 'shipping-information',
                    element: <ShippingInformation />,
                },
                {
                    path: 'return-policy',
                    element: <ReturnPolicy />,
                },
                {
                    path: 'our-story',
                    element: <OurStory />,
                },
                {
                    path: '/cart',
                    element: <Cart />,
                },
                {
                    path: '/checkout',
                    element: <Checkout />,
                },
                {
                    path: '/payment',
                    element: <Payment />,
                },
                {
                    path: '/review_order',
                    element: <ReviewOrder />,
                },
                {
                    path: '/register',
                    element: <SignUpPage />,
                },
                {
                    path: '/login',
                    element: <LoginPage />,
                },
                {
                    path: '/shop',
                    element: <Shop />,
                },
                {
                    path: '/product/:id',
                    element: <ProductDetails />,
                },
                {
                    path: '/profile',
                    element: <Profile />,
                },
                {
                    path: '/address',
                    element: <AddressList />,
                },
                {
                    path: '/address/:id',
                    element: <AddressEditor />,
                },
                {
                    path: '/address/newAddress',
                    element: <AddressEditor />,
                },
                {
                    path: '/orders',
                    element: <Orders />,
                },
                {
                    path: '/orders/:id',
                    element: <OrderDetails />,
                },
            ],
        },
        {
            path: '/review-product/:key',
            element: (
                <Suspense fallback={<BackdropLoading open={true} />}>
                    <ReviewPage />
                </Suspense>
            ),
        },
    ])

    return (
        <div className="app">
            <ToastContainer />
            <RouterProvider router={router} />
        </div>
    )
}

export default Root

Firing Event Add To Cart

 ReactGA.event('add_to_cart', {
                currency: 'USD',
                value: action.payload.price,
                items: items,
            })

Firing Event Purchase

ReactGA.event('purchase', {
                currency: 'USD',
                transaction_id: order_create.depoterOrderId,
                value: order_create.total,
            })

Appreciate any assistance!

Jesse replied 1 year, 4 months ago 1 Member · 0 Replies

0 Replies

Sorry, there were no replies found.