FlutterFlow Course from Basic to Advanced
Flutter App Development Course in Hindi
Article by: Manish Methani
Last Updated: November 14, 2023 at 2:04pm IST
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:
Step 2: Create an AdSense Account:
Step 3: Create Ad Units in AdSense:
<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! 🚀