Global site tag (gtag.js) - Google Analytics --> ... we use gtag with the 'purchase' event to send the data that we have received.
GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinGeekCultureHowtoMeasurePurchasesWithgtag.jsFromiFrameSenddatafrombeds24iframetoGoogleAnalyticsPhotobyMarkusWinkleronUnsplashYoumightbeusingGoogleAnalyticsonyourwebsitetotracksomeinformationaboutyourvisitors—thedemographics,theirbehavior,whattechnologytheyuseetc.Ifyouusea3rdpartysoftwareonyourwebsitethatenablesyourcustomerstopurchase/tobooksomething,youmightwanttotrackmoreinformation—what’stheirshoppingbehavior,whatdotheypurchase?Toshowaspecificexample,I’llbeusingbeds24,whichisapropertymanagementandbookingsystem.Youcanapplythestuffdescribedherewithothersystemstoo.Butyoumusthaveaccesstotheiframe.Otherwiseyouwon’tbeabletosendthenecessarydatafromit.I’llbrieflyexplainhowyoucandoitinthefollowing4simplesteps:SettingupGoogleAnalyticsSendingdatafromtheiframe(e.g.beds24bookingsystem)Receivingdataandsendingitviagtag(UniversalAnalytics)SettingupGoogleTagManager1.SettingupGoogleAnalyticsIwon’tgointomuchdetailsherebutIassumeyoualreadyhaveyourGoogleAnalyticsaccount.InordertocollectcertainEcommerceinformation,wehavetoenablethatfeaturefirst.Navigatetoyouraccount,property,andviewtoenableEcommerce.enableEcommerceinGoogleAnalyticsAlsomakesurethatyouhavethegtagincludedintheheadofyourwebsite:
WewillalsohavetocreateacontainerinGoogleTagManager,butwewillgettoitlater.2.SendingdatafromtheiframeOk,whatisiframe?Justtomakesureweknowwhatwearetalkingabouthere’sadefinitionbyMDN:TheHTMLInlineFrameelement(Theusercanbrowseandbookthepropertieswithintheiframethen.Let’ssaywewanttocapturethebookingoftheproperty.Thatmeanstofireaneventaftertheusergetstotheconfirmationpage.Inbeds24wecanaccesstheHTMLsettingsforindividualpropertiesandinsertascripttoelement.Wecanseethere’salsoaConfirmationPage:beds24HTMLsettingsNote:Ifyouarenotdirectlyincontroloftheiframecodeandyouusedifferentservices,lookforsimilaroptionsthatwouldallowyoutoinsertJavascriptcodetothepages.InthefieldwehavetoinserttheJavascriptcodethatcanlooklikethis.What’simportanthereisthepostMessage()method.Itenablescommunicationbetweentheiframeandthepageinwhichtheiframeisembedded.Thewindow.postMessage()methodsafelyenablescross-origincommunicationbetweenWindowobjects;e.g.,betweenapageandapop-upthatitspawned,orbetweenapageandaniframeembeddedwithinit.Thefirstargumentwepasstothemethodisthemessage.IntheexampleabovewesendaJavascriptobjectwithpropertiesthatfollowthestructureasdescribedintheEcommercedocumentationformeasuringpurchases(Itmaydifferbasedonyourusecase).Goodnewsiswedon’thavetoserializethedataasthemethodtakescareofthat.Thevaluesarebeds24templatevariableslikeprice,propertyIDetc.ThesecondargumentistargetOrigin,sobasicallyparentURI.3.ReceivingthedataandsendingitviagtagWhentheusercompletesthebooking,themessageissentandnowwehavetolistentoit.Outsideofiframe,inyourparentpagewehavetoinsertanotherscript.Again,asdescribedintheGAdocs,weusegtagwiththe‘purchase’eventtosendthedatathatwehavereceived.Makesurethegtagisdefined(seestepnumber1).4.SettingupGoogleTagManager(GTM)Atthispoint,westillcan’tseeanyeventstriggeredinGA.WehavetodefinetheminGoogleTagManager.Createacontainerforyourwebsitefirst.ThenwehavetodefineVariables,TriggersandTags.GTMmenuVariablesGotoUser-DefinedVariables,clickNewandchooseGoogleAnalyticsSettingsEnteryourTrackingIDandinMoreSettingsenableEcommerce.TriggersCreateanewtriggercalled‘Purchase’forexampleandselectCustomEventEventnameispurchase(aswedefinedinthecodeexamplesabove)soitlookslikethis:TagsLastlywehavetodefineatag.Createanew‘Purchasetag’andinTagconfigurationselectGoogleAnalytics:UniversalAnalytics.Wealsohavetochooseatrigger,whichwedefinedpreviously:Publishthechanges,refreshthepageandmakesomebookings.YoushouldbeabletoseeneweventstriggeredinGoogleanalytics.ConclusionIdescribedhowtomeasurepurchaseswithgtag.jsfromtheiframe.Asanexample,Iusedbeds24bookingandpropertymanagementsystem.Aslongasyouhaveaccesstotheiframe,youcanapplythesameprinciplesdescribedtoothersystems,becausewelearnedhowthecommunicationbetweentheparentwindowandtheiframework.WealsolearnedhowtoenableEcommerceinGAandthenwefollowedgtagdocumentationformeasuringpurchases,althoughGoogleAnalyticsandGTMsettingscanalsovarydependingonyourneeds.Ihopeyoufindthearticleusefulevenifitdoesn’tmeetexactlyyourprojectcriteriabutitgivesyousomeguidance.Thanksforreading!MorefromGeekCultureAnewtechpublicationbyStartitup(https://medium.com/swlh).ReadmorefromGeekCultureRecommendedfromMediumAsifMahmudJavaScriptarrayiterationArunvelSriramAirflowTimeZoneConversionInsideJinjaTemplateSafrinLearnThroughHelpingEachOtherMarekUrbanowiczDevelopanddockerize .NETCoreappwithReactSPAfrontend,includingpre-renderingMichaelChenMyExperienceWithPhaserEvgeniykravtsovinITNEXT5BrowserAPIsYouShouldKnowAboutin2022ShomariRobertsMyexperiencebuildingtheCityspireappandimplementingMapboxD'ontreyeNeroinLevelUpCodingPrettyPrintYourSitewithJavaScriptAboutHelpTermsPrivacyGettheMediumappGetstartedMiroslavŠlapka65FollowersWebDeveloperandhobbyphotographer(IG:miresk)FollowMorefromMediumBishwajeetParhiHowIusedGitpodtomakeanOpenSourceContributioninAppwriteFiveDotTwelveinTech&startups — FiveDotTwelveblogWhatareCustomOfferCodesandhowtosetthemupintheAppStoreConnectLanaVoutikBestBackendTechnologiesforMobileAppDevelopmentin2022SendbirdinCodeXUnderstandingChannelsinSendbirdChatHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable
Gtag pageview