Facebook Pixel | Webflow University

With the Webflow Facebook pixel integration, you can track pageviews, ... pixel form your project's code before adding your pixel ID in the Facebook pixel ... UniversityCoursesLessonsContactMoreCommunityHireanexpertCommunityResourcesWebflowcertificationBetaBlogIntegrationsForumWishlistAPIDocsGlossary101crashcourseTryWebflow —it'sfree2021portfoliocourseCoursesLessonsForumLearningdashboardAccountsettingsSupportCommunityHireanexpertCommunityResourcesBlogIntegrationsWishlistAPIDocsGlossaryTryWebflow —it'sfreeAccountWebflowUniversityLearningdashboardBetaAccountsettingsSupportWebflowTryWebflow —it'sfreeSignoutThankyou!Yoursubmissionhasbeenreceived!Oops!SomethingwentwrongwhilesubmittingtheformLessonlibraryFacebookPixelSelectedtopics&lessonsGettingstartedIntrotoHTML&CSSIntrototheboxmodelIntrototheDesignerIntrototheCMSEditorElementsSectionContainerGridDivblockButtonLinkblockListHeadingParagraphImageVideoLottieanimationFormsNavbarLightboxSliderTabsMapSocialmediaSitesearchLayout&designEffectsTypographyDisplaysettingsSpacingSizeBackgroundsGridPositionFlexboxBordersBoxshadowTextshadowTransformsFiltersOpacityStatesTransitionsInteractions&animationsIntrotoInteractionsLottieoverviewLottieanimationPageloaderanimation3Dmovement&parallaxRotateonmouseoverScrollprogressindicatorNavbarshow&hideonscrollRevealonscrollRevealonhoverShowandhideonclickCMS&dynamiccontentOverviewdynamiccontentIntrotoWebflowCMSCMSCollectionsImport collectionitemsCollectionlistCollectionpagesModifyacollectionIntrototheCMSEditorFilterCollectionlistsConditionalvisibilityEcommerceOverviewEcommerceCollectionsDesignyourstoreCustomizetheCartbuttonCustomizeshoppingcart&checkoutexperienceCreateproductvariantsCustomizeecommerceemailsLaunchyourecommercestoreHosting&codeexportWebflowsiteplansManagesiteplansClientbillingConnectacustomdomainSetadefaultdomainBuyacustomdomainSSLhostingTroubleshootwebsiteperformanceissuesSEOPaidvs.organicsearchContent-drivendesignUserstories&informationarchitectureContentstrategyGooglesiteverificationGoogleAnalytics301redirectsTemplatesWebflowtemplatesoverviewCreativeMarkettemplateThemeForesttemplateProjectsettingsShowcaseaprojectDuplicate,transfer,ordeleteaprojectPublishSave&restorebackupsSharearead-onlylinkFaviconsandtouchiconsWebflowbrandingEditorbrandingCustomcodeUpload customfontsProjectandpagepasswordsAccount&billingAccountplansTeamaccountAccountbillingTeambillingProjectbillingIntegrationsViewalllessons BacktoalllessonsLessonlibraryAlllessonsFacebookPixelLessonlibraryAlllessonsFacebookPixelFacebookPixelBringthepowerofFacebookAnalyticstoyourWebflowproject—embedFacebookpixel.ThisvideofeaturesanoldUI.Updatedversioncomingsoon!ClonethisprojectTranscriptFacebookpixelallowsyoutotrackyourwebsitevisitors'actions.TrackedconversionswillappearinyourFacebookAdsManagerandyourFacebookAnalyticsdashboardandcanbeusedtoanalyzetheeffectivenessofyourconversionfunnelandtodefinecustomaudiencesfordynamicadcampaigns.InthisguideIntegrateyourFacebookpixelIDEnableecommerceevents‍DelayforcookieconsentCreateapixelcookieconsentbanner‍SetupadvancedeventtrackingIntegrateyourFacebookpixelIDWiththeWebflowFacebookpixelintegration,youcantrackpageviews,productviewed,productaddedtocart,andproductpurchased.ToembedaFacebookpixelinyourWebflowproject,pastethepixelIDinprojectsettings>integrations>Facebookpixel.Learnmore:AboutcreatingaFacebookpixel,grabbingtheID,checkingthatyourpixel'sworking,troubleshootingpixelerrors,andmore[↗]AddmultiplepixelsYoucanonlyaddonepixeltoyoursiteusingthisintegration.Ifyouneedtoaddmorepixels,usecustomcodetoembedyourpixels.LearnhowtoaddthePixelcode.Important:Toavoidconflict,ifyou'vealreadyembeddedpixelonyoursite,makesuretoremovethecodethatinitiatesthepixelformyourproject'scodebeforeaddingyourpixelIDintheFacebookpixelintegrationsection.EnableecommerceeventsOnceyouenableEcommerceforaproject,WebflowwillautomaticallypassthefollowingeventsovertoFacebookBusinessManager:ViewedproductAddedproducttocartPurchasedproductTheseeventswillallowyoutoeffectivelymeasureandimproveyouradvertisingcampaignsonFacebookandInstagram.ResourcesSyncingproductstoFacebookCatalogManagerSettingupInstagramShoppingSetupDynamicFacebookAdsforyourproducts[↗]DelayforcookieconsentIfyouhostwebsitesthatcollectpersonaldatafromEUresidents,youneedtocomplywithGDPR.Todothat,youcandelayloadingthepixeluntilyoursitevisitorsacceptyourcookieconsent.Ofcourse,whenyouenablethis,you'llneedtorequestconsentonyoursite.Todothat,addacookieconsentbanner.DelayforcookieconsentsectionwiththeoptiontoturnthefeaturefromNotoYes.NoisselectedwhichmeansPixelwillloadwithoutconsent.CreateapixelcookieconsentbannerTorequestconsent,createaFacebookpixelcookieconsentbanner.SimplycreateabannerintheDesignerandaddthecustomcodeinyourproject'sfooter.Design yourbannerCreatethebanner.Includeyourcookienotificationmessage. GivethebanneranID.We'reusingthefollowingID:consentPopupAddan"Acceptpixelcookies"buttonortextlink.Giveitaclass.GivethisbuttonanIDaswell.We'reusing:consentBtnAdda"decline"or"close"button.Giveitthesameclass.(optional)Includea"learnmore"linkandlinkyouruserstoyourprivacypolicypage.Dragthebannerinsideofadivblock,giveitaclass:"Popupwrapper".Setthiswrapper'spositiontofixed.Chooseapresetpositionormanuallyadjustthepositionofyourpopupwrapper.SavethePopupwrapperasasymbol.Addittoallofyourpages.Create theinteractionsSelectthe"Accept"button.Addamouseclicktrigger.Setthetriggertoaffecttheclassofthebutton.Underonmouseclick,createanewanimation:"Closethecookiepopup".Selectthe"Popupwrapper"andaddanaction:Move→y-axis=100%.Makesuretosetthetargetto affect the class.Selectthe"Decline"button.Addamouseclicktrigger.Setthetriggertoaffecttheclassofthebutton.Underonmouseclick,select"Closethecookiepopup".Addapagetrigger.Underwhenpagestartstoload,createanewanimation:"Showthecookiepopup".Selectthe"Popupwrapper"andadd2actions:Move→y-axis=100%.Setthisastheinitialstate.Makesuretosetthetargetto affect the class.Move→y-axis=0.Gotoeachofyourpagesandaddapagetrigger.Underwhenpagestartstoload,choose"Showthecookiepopup".Important:Makesurethatyouselectthe"Popupwrapper"whencreatinganimationactions.Ifyouapplytheactionstothebanneritself,thecustomcodemaynotfunctioncorrectly.Embed thecodeTomakethecookieconsentwork,embedthefollowingcodeinyourproject'sfooter: varpopup=document.getElementById('consentPopup');  varalreadyLoaded=window.localStorage.getItem('fbGrantConsent')==='true'; //Showtheconsentbannerifconsentisnotgranted,hideitifconsentisalreadygranted.  if(alreadyLoaded){   popup.style.display='none';   fbq('consent','grant');  }else{   popup.style.display='block';  } //GrantconsentandstoreitinlocalStorageofthebrowser  varconsentBtn=document.getElementById('consentBtn');  consentBtn.addEventListener("click",function(){  fbq('consent','grant');   window.localStorage.setItem('fbGrantConsent','true');  }); CopycodeCopied! ‍Important:Ifyou'veuseddifferentIDsforyourpopupand"accept"buttons,makesuretoreplacetheboldedIDsinthecodeabovewiththeone'syou'reusing.Replace"consentPopup"withtheIDyou'vesetforthebanner.Replace"consentBtn"withtheIDyou'vesetforthe"Acceptcookies"button.ResourcesCheckour Facebook'sconsentguide[↗] tolearnmoreaboutcreatingacookieconsentCheckouttheEuropeanCommission’sCookieConsentKit[↗]SetupadvancedeventtrackingForadvancedpixeleventtracking,checkoutFacebook’seventsguide[↗].Also,checkoutadditionalFacebookpixelusecases[↗]liketrackingclicksonbuttons.AddtheeventcodeYoucanaddtheseeventstothecodesectionofoneormorepagesonyoursite.Ifyouwanttotrackclicksonlinksorbuttons,makesureto setanID forthoseelementsintheDesigner.Then,embedthescriptinyourpage'scode.Don'tforgetto replacetheID inthecodewiththeoneyouappliedtoyourbuttonsandlinks.Needtoknow:Youdon'tneedtoaddthe Facebookpixelcode toyoursiteifyou'vealreadyaddedthe pixelID inyour projectsettings→integrations→Facebookpixel section.ExampleFacebookpixelcodeincludinglinesofcodewithinascripttag.ThenfireAddToCarteitheronanewpageloadorontheclickofanAddToCartbutton.Therearemultiplewaystohandleclicksonbuttons.Here'sanexampleaddingeventListenertoabutton.ThisisanexamplecodefromFacebook.Youcangetthecodefortheeventthatyouneedfromthepixeleventsguide.Needmorehelp?Ifyouneedmorehelpintegratingpixelevents,youcanalwayspostonthecodehelpsection[↗]oftheWebflowCommunityForum[↗]withasmuchinformationaspossible(read-onlylink,screenshots,thecodeyou'retryingtointegrate,andadescriptionoftheissue),andouramazingcommunityandstaffcanhelpyouthere.Share TryWebflow —it'sfreeNoitemsfound.Wasthislessonhelpful?Letusknow!Yes,thanks!Sortof,thanks!NotreallyThanksforthefeedback!Thiswillhelpusimproveourcontent.ReachouttoourcommunityContactthesupportteamSomethingwentwrongwhilesubmittingtheform.Pleasecontactsupport@webflow.comGotalessonsuggestion? LetusknowNeedmorehelp?Wanttoreportabug? ContactsupportHavefeedbackonthefeature?SubmitfeaturefeedbackThankyou!Yoursubmissionhasbeenreceived!Oops!Somethingwentwrongwhilesubmittingtheform. ThisvideofeaturesanoldUI.Updatedversioncomingsoon!CommunityforumShareandgethelpfromouractivecommunity.ContactsupportWe'reavailableMonday–Friday,6a.m.–6p.m.PT.©2021Webflow,Inc.Allrightsreserved.ProductDesignerInteractionsCMSEcommerceEditorHostingSEOAccessibilityPricingEnterpriseTemplatesFeatureIndexCompanyAboutCareersWe'rehiring!PressAccessibilityStatementMerchStoreTermsofServicePrivacyPolicyCookiePolicyCookiePreferencesSitemapBecomeanAffiliateLearn& GethelpCoursesWebflow101BlogEbooksForumCommunityHireanExpertCustomersWebflowvs.WordPressNoCodeMovementStatusSupportWishlistInspirationSocialYouTubeTwitterFacebookInstagramTikTok