How to Add Google Analytics (GA4) & Adsense to Google Web Stories?

Article by: Manish Methani

Last Updated: November 14, 2023 at 2:04pm IST
5 min 14 sec

Introduction:

Google Web Stories provide a visually engaging way to tell stories on the web. To enhance the performance and gain insights into your Google Web Stories, it's crucial to integrate Google Analytics (GA4) for tracking and AdSense for potential monetization. In this Codzify Tech Tutorial, we'll guide you through the step-by-step process of adding Google Analytics (GA4) and AdSense to your Google Web Stories.

Step 1: Create a Google Analytics (GA4) Property:

  1. Visit the Google Analytics website (https://analytics.google.com/).
  2. Sign in with your Google account or create a new account.
  3. Click on "Start for free" to set up a new Google Analytics property.
  4. Follow the on-screen instructions to create a new GA4 property. Make sure to choose the correct settings for your website.

Step 2: Create an AdSense Account:

  1. Visit the Google AdSense website (https://www.google.com/adsense/start/).
  2. Sign in with your Google account or create a new AdSense account.
  3. Complete the necessary information and submit your application.
  4. Once approved, you can access your AdSense account dashboard.

Step 3: Create Ad Units in AdSense:

  1. In your AdSense dashboard, click on "Ads" in the left sidebar.
  2. Click on the "+ New Ad Unit" button.
  3. Customize the ad settings based on your preferences.
  4. Click "Create" to generate the ad code.
<html>
<head>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
></script>

<link rel="canonical" href="https://codzify.com/how-to-answer-tell-me-about-yourself" />
<script async custom-element="amp-analytics" 
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async custom-element="amp-story-auto-ads" 
src="https://cdn.ampproject.org/v0/amp-story-auto-ads-0.1.js"></script>
<link as="script" rel="preload" href="https://cdn.ampproject.org/v0/amp-consent-0.1.js">

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>

<style amp-boilerplate>

body {
-webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
animation: -amp-start 8s steps(1, end) 0s 1 normal both;
}

@-webkit-keyframes -amp-start {
from {
visibility: hidden;
}

to {
visibility: visible;
}
}

@-moz-keyframes -amp-start {
  from {
   visibility: hidden;
  }

   to {
     visibility: visible;
     }
  }

@-ms-keyframes -amp-start {
  from {
     visibility: hidden;
   }

   to {
      visibility: visible;
    }
 }

@-o-keyframes -amp-start {
   from {
      visibility: hidden;
    }

   to {
     visibility: visible;
     }
  }

@keyframes -amp-start {
    from {
       visibility: hidden;
      }

      to {
      visibility: visible;
      }
  }

</style>

<noscript>
   <style amp-boilerplate>
      body {
        -webkit-animation: none;
        -moz-animation: none;
         -ms-animation: none;
          animation: none;
        }
   </style>
</noscript>


</head>

<body>

<amp-story standalone publisher="" title="" 
publisher-logo-src="https://codzify.com/dash/imgs/main_icons/codzfy_without_border.png"
poster-portrait-src="https://codzify.com/assets/images/stories/tellMeAboutYourself/poster.jpg">
   <amp-story-page id="my-first-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/1.jpg"
           width="900" height="1600" alt="This is my First Image">

    </amp-img>
   </amp-grid-layer>
 </amp-story-page>


   <amp-story-page id="my-second-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/2.jpg"
            width="900" height="1600" alt="This is my Second Image">

    </amp-img>
   </amp-grid-layer>
 </amp-story-page>


   <amp-story-page id="my-third-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/3.jpg" 
           width="900" height="1600" alt="This is my Third Image">

    </amp-img>
   </amp-grid-layer>
 </amp-story-page>

   <amp-story-page id="my-fourth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/4.jpg"
            width="900" height="1600" alt="This is my Fourth Image">

    </amp-img>
   </amp-grid-layer>
 </amp-story-page>


   <amp-story-page id="my-fifth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/5.jpg" 
           width="900" height="1600" alt="This is my Fifth Image">

    </amp-img>
   </amp-grid-layer>
 </amp-story-page>


   <amp-story-page id="my-sixth-page">
        <amp-grid-layer template="fill">
           <amp-img src="https://codzify.com/assets/images/stories/tellMeAboutYourself/6.jpg"
            width="900" height="1600" alt="This is my Sixth Image">

    </amp-img>
    <amp-story-page-outlink layout="display">
        <a href="https://youtube.com/@codzify" role="link">Codzify Youtube Channel</a>
    </amp-story-page-outlink>
   </amp-grid-layer>
   <amp-geo layout="nodisplay">
    <script type="application/json">
     {
        "ISOCountryGroups":{"eeaAndusca": ["preset-eea", "prese-us-ca"]}} </script>
     }
    </script>
   </amp-geo>
   <amp-consent id="storyconsent" layout="nodisplay">
    <script type="application/json">
        {
            "consentInstanceId":"world-wide-consent",
            "consentRequired":false,
            "promptUI":"storyConsentUi",
            "geoOverride":{
                "eeaAndusca":{
                    "consentRequired":true
                }
            }
        }
    </script>
    <amp-story-consent id="storyConsentUi" layout="nodisplay">
        <script type="application/json">
           {
           "title": "Cookies Help Us Serve You Well",
           "message": "This website uses cookies to analyze performance and enhance user experience.
            By continuing to browse this website, you are agreeing to our policy of using cookies.
             For more information, please visit the link below",
           "vendors": [],
           "externalLink": {
           "title": ""
           },
           "onlyAccept":true
           }
        </script>
     </amp-story-consent>
   </amp-consent>
    <amp-analytics type="googleanalytics">
        <script type="application/json">
            {
                "vars": {
                    "account": "55555555555"
                },
                "triggers":{
                    "default pageview":{
                        "on": "visible",
                        "request":"pageview",
                        "vars": {
                            "title":"Tell me about yourself | Codzify"
                        }
                    }
                }
            }
        </script>
    </amp-analytics> 

    <amp-story-auto-ads>
        <script type="application/json">
            {
            "ad-attribute":{
                "type": "adsense",
                "data-ad-client": "ca-pub-yourpublisherId",
                "data-ad-slot": "yourDataSlotId"
            }
        }
        </script>
    </amp-story-auto-ads>


 </amp-story-page>



</body>
</html>

Conclusion: Congratulations! You've successfully added Google Analytics (GA4) for tracking and AdSense for monetization to your Google Web Stories. These integrations will help you analyze user engagement and potentially earn revenue through advertisements. Stay tuned to Codzify for more tech tutorials and updates! 🚀

Learn Flutter, FlutterFlow,
Firebase & Angular.

Looking to learn how to create the production-ready apps
from scratch? Well, you are at the right place.

₹1299 or $15.56

Learn to create the Dating App using No-Code Tool FlutterFlow

Level: Advanced

Explore Curriculum
₹1299 or $15.56

Flutter Mobile App Development Course

Explore Curriculum
₹1299 or $15.56

The Complete Angular Course

Explore Curriculum
₹1299 or $15.56

Dart Programming for Absolute Beginners

Coming Soon
FREE

Next.js course

Start Watching
FREE

Fundamentals of Computer Programming Languages

Start Watching
FREE

Learn HTML, CSS & Bootstrap

Start Watching

Latest Web Stories

1

Learn how to open WhatsApp using FlutterFlow | Step by Step Guide

Test your skills with these expert-led curated
Mock Tests.

C Programming Test

Test your C Programming skills with this comprehensive mock test on C Programming.

Take Test

Flutter Test

Solve most asked Interview Questions on Flutter and Test your foundational skills in flutter.

Take Test

GATE(CSE) Operating Systems

Solve most asked GATE Questions in Operating Systems and test your Gate Score.

Take Test

HTML,CSS Test

This is a mock test designed to help you assess your knowledge and skills in HTML and CSS.

Take Test

(GATE CSE) Data Structures & Algorithms Test

Solve most asked GATE Questions in Data Structures and Algorithms and test your Gate Score.

Take Test

Download the Codzify
Mobile App


Learn Anytime, Anywhere at your own pace. Scan the QR Code with your Mobile Camera to Download the Codzify Mobile App.

Codzify Mobile App Codzify Mobile App
Codzify Logo

Terms and Conditions    Cookie Policy   Refund Policy   Adsense Disclaimer