At the bottom of the screen, a debug console will appear. Click the Pageview event and you should see that your Facebook Pixel tag has fired.
Search
April2,2021
HowtoInstallFacebookPixelwithGoogleTagManager
Updated:April2nd,2021
Ifyouareusingpaidadvertisingtoacquirenewtraffic,it’sverylikelythatyoualreadyuseFacebookads.However,ifyoudon’tmeasuretheeffectivenessofyouradcampaignsandjustburndollarshopingthatmaybesomethingisworking,you’redoingitwrong.
IfyouuseFacebookadstoacquiretraffic,youneedtouseFacebookPixeltomeasurethesuccessofyourcampaigns.Wheneveravisitorconverts,youshouldtrackthatconversion(e.g.,lead,purchase,etc.)withthepixel.
Inthisguide,IwillshowyouhowtoinstallFacebookPixelwithGoogleTagManager(notonlybasicpageviewsbutalsootherthings,likeevents).Thetopicisquiteextensive,therefore,Irecommendbucklingup,andlet’sdiveintothis.Also,considersubscribingtomynewslettertostayup-to-datewithGTM.
P.S.somescreenshotsinthisarticleshowtheolderversionoftheGTMpreviewmode(butitshouldnothaveALOTofimpactonyourlearningprocess).Ifyouarelookingforamoreup-to-dateguide/tutorial,IhaveextensivelessonsaboutFBPixel+GTMinmyGTMcourseforbeginners.
Tableofcontents
+Showtableofcontents+
AQuickIntroductiontoFacebookPixel
HowtogetFacebookPixelcode?
#1.HowToInstallFacebookPixelwithGoogleTagManager:Pageview
#1.1.AddFacebookPixelCustomTemplate
#1.2.FacebookPixelPageviewTag
#1.3.ConstantVariableforthePixelID
#1.4.TesttheFacebookPixelTag
#2.OtheroptionsonhowtoinstallFacebookPixelwithGoogleTagManager
#2.1.ManualinstallationusingtheCustomHTMLtag
#2.2.“Doneforyou”
#3.HowtoTrackEventswithFacebookPixelandGoogleTagManager
#3.1StandardvsCustomFacebookPixelevents
#3.2ATag+atriggerforaStandardEvent
#3.3TesttheStandardFacebookPixelEvent
#3.4ATag+atriggerforaCustomEvent
#3.5TesttheCustomEvent
#3.6Tips/Ideasonhowtotrackothercustomevents
#4.SendadditionalparameterstoFacebookPixelwithGoogleTagManager
#4.1.Example–PurchaseTrackingwithAdditionalParameters
#4.2.Testtheeventwithadditionalparameters
#4.3.Bonus–reuseGoogleAnalyticsEcommercedata(fromtheDataLayer)inyourFacebookPixel
#4.4.Testthesetup
#5.WhatCanYouDowiththeDataThatYouHaveJustTrackedviaFacebookPixel?
#6.OtherThingstoKnowaboutFacebookPixelwithGoogleTagManager
#6.1.AutomaticDataDetection
#6.2.SendingDatatoMultipleFacebookPixelsontheSamePage
#6.3.AdvancedMatching
#7.UserProperties
#7.1.VariablewiththeUserID
#7.2.FacebookPixelTag
#7.3.TestFacebookPixelUserProperties
#8.GettheConsentBeforeTracking(#GDPR,oranyotherrelatedprivacyregulations)
#8.1.ConsentGranted
#8.2.ATagthatFiresWhenConsentWasGiven
FacebookPixelwithGoogleTagManager:FinalWords
BeforeWeContinue
IfyouaresupernewtoGoogleTagManager,Irecommendthatyoureadmyfreee-bookGoogleTagManagerforBeginners beforeyoucontinuewiththisblogpostaboutFacebookPixel.
Otherwise,youwillfeelwaytoooverwhelmedandmightgetlost.
AQuickIntroductiontoFacebookPixel
FacebookPixelisasolutioncreatedbyFacebookthatallowsyoutomeasureuser/visitorbehavioronyoursiteandthentrackconversionsorbuildaudiencesbasedonthedatayousend.
OnceyouplacecertainJavaScriptcodesnippetsonyoursite(andactivatethembasedonuser/visitorbehavior),Facebookwillstartgettingdata.Iwillnotdivedeeperintothepossibilities(becausethisblogpostismorefocusedontheimplementation).ButifyouaresupernewtoFBPixel,youcangetmoreinformationhere.
Inanutshell,byusingFacebookPixelyouwillbeableto:
Createcustomaudiencesforremarketingpurposes(e.g.retargetthosewhohavescrolledatleast50%andspentatleastaminuteorthosewhoaddedaproducttoacartbutdidnotpurchase).
Trackconversions.Conversionisanimportantaction(tothebusiness)thatavisitor/usercompleted,e.g.,signup,subscription,purchase,etc.Bytrackingconversions,youwillbeabletotellFacebookthatXvisitorhascompletedtheactionthatyoudesired. Thismeansthatyourreportswillshowwhichadsaremoreeffectiveinreachingyourgoalsandwhichonesaren’t.
Additionaltargetingopportunities.Bytrackingcertaininteractions(likeleadsorpurchases),youcaninstructFacebooktofindmorelookalikepeopleandshowyouradstothembasedonthosewhohavealreadyconvertedonyoursite.
Let’sputallthefluffasideandfocusonthenitty-grittyside—technicalimplementation:howtoaddFacebookPixeltoyoursitewithGoogleTagManager,howtosendevents,howtoimplementadvancedmatching,userproperties,etc.
HowtogetFacebookPixelcode?
Firstthingsfirst,let’sgototheFacebookPixelBusinessmanagerandgetthePixelID(thatwillbeneededinthenextchaptersofthisblogpost.
Disclaimer:Facebookisconstantlychangingtheuserinterfacehere,therefore,thereisahighchancethatmyscreenshotswillnotmatchwhatyouactuallysee.Infact,onceIhadacasewhere4peopleinmyGTMworkshopsawdifferentversionsoftheinterfaceatthesametime.So,ifyoudon’tfindacertainoption,justkeeplooking.
Inthetoprightcorner,clicktheMenuiconandgotoEventsManager.
Thengoto DataSourcesandchoosethePixelthatyou’reinterestedin.
Ifyoudon’thaveanyPixelsyet,clicktheSetUpPixelandfollowallthenecessarysteps.
Inoneofthesteps,Facebookwillofferyouseveralwaystoaddthepixel.Closethiswindowfornow.
Yourmaingoal,fornow,istogetthePixelIDthatlookslikethis(ofcourse,thevaluewillbedifferent):
Onceyougetit,copyit(becausewe’llneeditinthenextchapterofthisblogpost).
#1.HowToInstallFacebookPixelwithGoogleTagManager:Pageview
Backintheolderdays(pre-2019),theonlywaytoinstallFacebookPixelviaGoogleTagManagerwasbyusingtheCustomHTMLtagtemplate.ThismeantthatyouhadtoworkdirectlywithaJavaScriptcode,edititabit,etc.
Thesedays,thingsaremuchsimplerandmoreelegantbecauseSimoAhava hascreatedaFacebookPixelCustomTemplateandshareditwitheveryone.ItwillmaketheentireFBPixeltagmanagementprocessmoreconvenientandlesspronetoerrors.
Update: LaterthistemplatewasacquiredbyFacebook(facebookincubator).Nevertheless,itisstillthesametemplate.Somescreenshotsofthisarticlewillstillshow“gtm-templates-simo-ahava”astheowner.
Also,morenewFacebookPixeltemplateshavebeenintroducedtotheGTMcommunitygallerylately.Ihaven’tworkedwiththemsoIcan’ttelliftheyaregoodornot.
#1.1.AddFacebookPixelCustomTemplate
IfyougotoTags>New(inGoogleTagManager)andsearchfor“Facebook”,youwillnotfindanytagtemplate.That’sbecause,bydefault,nosuchtagexistsintheGTMcontainer.Youhavetoadditmanually.
Luckily,thereisaveryconvenientfeaturecalledCommunityTemplateGallerywhereanyoneinthecommunity(whocancode)cancreatecustomtemplatesofVariablesorTags.
InGoogleTagManager,gotoTemplates>TagTemplates>SearchGalleryandinthesearchfield,enter Facebook.
Youwillseethistemplate,clickitandaddittoyourWorkspace.Onceyoudothat,anewtemplatewillappearintheTags>New>Customsectionandyouwillbeabletoreuseitmultipletimesinmultipletagsinthesamecontainer.
#1.2.FacebookPixelPageviewTag
EverythingstartswiththebasicimplementationoftheFacebookpixel.Inotherguides(especiallyintheolderones)foundonline,youmightseeatermcalled FacebookPixelBaseCode(orsomethingsimilar).ThenextseveralstepsthatI’mgoingtodemonstrateexplainexactlythat(butwithoutusingtheterm BaseCode).
InGTM,gotoTags>New>FacebookPixelandenterthefollowingsettings(ifsomefieldsarenotvisibleinthescreenshot,Ididnotchangeanythingthere):
IntheFacebookPixelID(s)field,enterthePixelIDyoucopiedintheHowtogetFacebookPixelID?chapter.Thankstothisfield,GTMwillknowtowhichexactFBadaccounttosendthisdata.
Fornow,leavealltheothersettingsastheyare(fornow).
SetthetagtofireonAllPages.
#1.3.ConstantVariableforthePixelID
Spoileralert:foreachinteractionyouwanttotrackwiththeFacebookPixel,wewillneedtocreateaseparateFBPixeltag. Ineverytag,youwillneedtodefineaFacebookPixelID.
Eventually,youmightendupwith50(orevenmore)tagsthatsenddatatoFacebook.ThismeansthatyouwillhavetomanuallyinsertthePixelID50+times.Butwhatifoneday,youhavetoswitchtoanotherPixelID?YouwillneedtomanuallychangetheID50+times.
Tomakethingsmoreoptimal,youcouldcreateaGTMvariablethatcontainsyourFBPixelIDandthenjustreusethesamevariableeverytimeyouneedit.OnceyouneedtochangethePixelID,you’llneedtodothatjustonce—intheVariable.
InGTM,yougoVariables>User-definedVariables>New>ConstantandpasteyourFacebookPixel’sID.
SavetheVariable.ThenopenthepreviouslycreatedFacebookPixelpageviewtag,andinserttheConstantVariableinsteadofplainPixelID.
#1.4.TesttheFacebookPixelTag
Now,it’stimetomakesurethatyouhaveimplementedeverythingcorrectly.
GTMPreviewandDebugmode. InGTM,enablethePreviewandDebugmode,thenrefreshthepagewhereyouwanttoinstallFacebookPixelwithGoogleTagManager.
Atthebottomofthescreen,adebugconsolewillappear.ClickthePagevieweventandyoushouldseethatyourFacebookPixeltaghasfired.
FacebookPixelHelper.Theprevioustip doesnotmeanthateverythingwassenttoFacebookPixelproperly!Thereareotherplacesweneedtocheck.Oneofthemis FacebookPixelhelper.InstallitandyouwillseethisiconappearinthetoprightcornerofyourChromebrowser.OnceyourefreshthepageANDifFacebookPixelisimplementedonapage,itscolorwillchangetoblueandyouwillseeanumberwithinthaticon.
Clickthaticonandlet’scheck.WeseethataPageViewwastrackedandthereisagreencheckmarkiconnexttoit.That’sgood!Iftherewasaloaderoryellowicon,that’dmeanapossibleproblem.Butagreeniconisexactlywhatwearelookingfor.
FacebookPixelReports
InFacebookBusinessManager,gotoEventsManager>DataSources>Select yourPixelandthenTestEvents.
EntertheURLofyourwebsite(ifIwasworkingwithmysite,Iwouldenterhttps://www.analyticsmania.com)andclickOpenWebsite.Afteryouareredirectedtoyourownwebsite,gobacktothe TestEventsofyourPixelandcheckwhetheryouseePageviewscomingfromyourowndevice.Ifnothingappears,gobacktoyoursiteandrefreshthepageonceagain.
Ifeverythingisfine,thismeansthatyouhaveimplementedFacebookPixelwithGoogleTagManagercorrectly.
#2.OtheroptionsonhowtoinstallFacebookPixelwithGoogleTagManager
TherearetwootheroptionsonhowtoinstallthepixelbutI’llmentionthemjustverybriefly(becausewestillhavealotofmaterialtocover):
ManuallybyusingtheCustomHTMLtag(semi-recommended).Itwasarecommendedmethodbeforeearly2019(whentheCustomTemplatewasnotavailableyet).
“Doneforyou”.Idon’trecommendthisone.
#2.1.ManualinstallationusingtheCustomHTMLtag
Inanutshell,youjustneedtocopytheentireFacebookpixelcodetotheCustomHTMLtag,domodificationsdirectlyinitscode(ifyouneeded)andyoualsohadtohandleTagSequencing tomakesurethatFacebookPixelbasecodeisalreadyloadedbeforeyoutrytosendsomeevent(orpageview)toit.
WherecanyougetthefullFacebookPixelcode?GotoyourFBPixelintheEventsManager,openyourpixelandinthetoprightcornerclick SetUp>InstallPixel.
ThenchooseManuallyaddpixelcodetowebsite andcopythemaincode:
InGoogleTagManager,gotoTags>New>CustomHTMLtagandpastethecode.
