How to Install and Debug the Facebook Pixel using Google ...

How to Install and Debug the Facebook Pixel using Google Tag Manager. By Megalytic Staff - August 24, 2018. As a digital marketer, juggling a variety of ... BENEFITS SOLUTIONS ForGoogleDataStudio ForDigitalMarketingAgencies ForVerticalMarketSpecialists Pricing ForGoogleDataStudio MegalyticReporting RESOURCES Blog GoogleAnalyticsPrimer HelpCenter SubmitHelpRequest SIGNIN GDSSIGNIN HowtoInstallandDebugtheFacebookPixelusingGoogleTagManager ByMegalyticStaff-August24,2018 Asadigitalmarketer,jugglingavarietyofadvertisingplatformsisjustapartofeverydaylife.FromGoogleAdsandFacebooktoTwitter,LinkedIn,AdRoll,andmore,you’reusedtohavingalotonyourplate.   Butwhenyouhavetoworryaboutinstallingperformance-trackingtagsandpixelsonyourwebsitesoyoucanoptimizeforeachplatform,thingscangetoverwhelming.Notonlydoyouhavetoaddthistime-consumingtasktoyourITteam’salreadylongto-dolist,butitcreatesalotofadditionalcodetomanage,maintain,andupdate.  Thegoodnewsisthatthere’saneasierway,andit’scalleda tagmanagementsystem.Ifyouhaven’tusedthiskindofsystembefore,it’sanincrediblyeffectivewaytoeaseyourworkloadwhilesavingyoutimeandmoney.Inanutshell,tagmanagementsystemssimplifytheprocessofadding,editing,orremovingtags.TheseautomatedsystemshelpyoumanageyourdatafoundationandstreamlinetagdeploymentssoyourITteamcanfocusonimprovingyoursystems.Tagmanagementsystemscanalsohelpyoulaunchcampaignsmorequickly,improveyourwebsiteperformance,andensurethatyouarecollectingtheanalyticsdatanecessary(e.g.,conversions,leads)tooptimizetheperformanceofyourads.   Infact,today’stagmanagementsystemsareacrucialbestpracticefordeployingtrackingcode.Ifyouhaven’tusedonebefore,GoogleTagManager(GTM)isareliablefreesystem.Anaddedbonusisthatitenjoysthelargestmarketshareamongtagmanagementsystems.   GTMisoverallaterrificsystem,withafewcaveats.Oneoftheseisthatitdoesn’thaveabuilt-intagtypeforFacebook’stag(alsoknownasthe“FacebookPixel”).Ifyoudon’tidentifyasa“techperson,”thiscanbeintimidatingbecauseitrequiresyoutouseGTM'sCustomHTMLtagtypetogetherwithJavaScriptcode. SetUptheFacebookPixelCode YourfirststeptoinstallingGTMistogettheFacebookpixelcodesoyoucanthenuseGTMtoinstallit.Todothis,logintoyourFacebookBusinessManageraccountandopenEventsManager>Pixels     Ifyoudon’talreadyhaveaFacebookPixel,clickonthe“CreateaPixel”button.     Otherwise,clickon“Details”andthen“Setup.”     Onceyourpixelissetup,adialogboxwillappear.Choose“UseanIntegrationorTagManager.”Thiswillmaketheprocessaloteasierbecauseratherthanrequiringyoutocopyandpastecode,itusesautomationtechnologytoautomaticallyintegrateFacebook’spixelcodeintoyourGTMaccount.     Next,you’llseealistofchoices.Fromthelist,pick“GoogleTagManager”andfollowtheinstructions.ThenlogintotheGoogleaccountyou’llusewithGTMandgrantFacebookaccess.ThiswillensurethatFacebookcaneditandupdateyourGTMaccount.     Atthispoint,youcansimplyfollowtheinstructionsonthesubsequentscreenstoverifyandconfirmtheintegrationofyourFacebookandGTMaccounts.Asyoureachtheendoftheprocess,keepinmindthatonceyouclick“FinishSetup,”itmaytakeafewminutesforFacebooktocreatethecorrecttagandpublishitinyourcontainer.Afterthreeminutesorso,logintoyourGTMaccountandrefreshthetags.Here,youshouldseeanewlycreatedFacebookPixeltagthatlookslikethis:     InspectGTM’sCustomHTMLTagCreatedbyFacebook Nowthatyou’vecreatedyourFacebookPixeltag,you’llneedtoinspectittomakesureit’sreadytofire.Toseethepixeltag'scode,clickonthetaginGTM.ThiswillopentheGTMtageditor.Atthetopofyourscreen,you’llseea“TagConfiguration”box,whichisaCustomHTMLtag.Thismeansitusescustomcodetoimplementthetag.InsidetheHTMLbox,you’llseethecustomcodeFacebookhasgeneratedtodeployitstag(theFacebookPixel)onyourwebsite.     Onceyou’vearrivedhere,scrolldowntotheboxlabeled“Triggering.”ThisdefineswhentheFacebookPixelcodewillberun(orbe“fired”).Asyoucansee,itissettofireonAllPages.ThisisthedefaultrecommendedbehaviorfortheFacebookPixel,whichworkssuccessfullyinmostcases.     TesttoMakeSureGTMisFiringtheFacebookPixel Nowthatyou’vecreatedaFacebookPixeltaginyourGoogleTagManageraccount,you’llneedtomakesurethatGTMis“firing”thistagonyourwebsitepages.YoucancheckthisbyusingGTMPreviewMode.Justclickthe“Preview"button.     Onceyou’reinPreviewMode,usethesamebrowsertoopenasecondtab.Thenenteryourwebsite’sURLandrefreshthepage.Hereyou’llseethatabottompanehasopened.IfyoureviewtheSummarysection,youcanviewthetagsthathavefiredonthepageyoujustopened. Inourexample,wecanseethattheFacebookPixelTaghasfiredontheMegalyticwebsite.     Aftercheckingyourfirstpage,takethetimetonavigatetoafewotherpagesandchecktoseethattheFacebookPixeltagisgettingfiredonallofthem.Ifit’sfiring,atthispointyoucanturnoffGTMPreviewMode.Todoso,clickthelinkatthetopoftheGTMWorkspacethatsays“LeavePreviewMode”.     Ifforsomereasonthetagisnotfiringoncertainpages,it’slikelythattheGTMtrackingcodeeitherhasn’tbeeninstalledorhasbeeninstalledincorrectlyonthatpage.Ifyouexperiencethisissue,youcantrackdowntherootoftheprobleminournextstepbyusingtheGoogleTagAssistant. UsingGoogleTagAssistanttoTestGTMInstallation You’llonlyneedtousethisstepifyou’rehavingtroublegettingyourFacebookPixelTagtofireononeormorewebsitepages.SinceGoogleTagAssistantonlyworkswiththeChromebrowser,ifyoudon’ttypicallyuseChrome,you’llneedtoinstallit. Onceyou’vedoneso,openChromeandinstalltheGoogleTagAssistant.ThennavigatetoyourwebsiteandclickonthesmallbluetagiconintheupperrightcorneroftheChromebrowser.     Fromhere,clickthe“Enable”buttoninthelowerleftportionofGoogleTagAssistanttoturnitonforyourwebsite.Then,refreshthepageandclickonGoogleTagAssistantagain.     GoogleTagAssistantisusefulbecauseitshowsyoutheGoogleTagsthatareinstalledonyourwebsite.Intheimageabove,youcanseethatbothGTMandGoogleAnalytics(GA)areinstalled. It’simportanttonotethatthetagsshownaredisplayedinblue,buttheymayappearinothercolorsdependingontheirstatus.Ifeverythinglooksgood,tagsaredisplayedingreen.IfGooglehassuggestions,tagsareshowninblue.Ifthereareminorproblems,tagswillappearinyellow,andiftherearemajorproblemstagswillappearinred. Ifyounoticethatatagappearsinacolorotherthangreen,don’tpanic:you’lllikelyonlyneedtotakeactionifyouseearedtag.Bluetagsdon’ttypicallyindicateanactualproblemandyellowtagsareusuallystillworking.Ifatagisred,however,thisindicatesthatatagisbroken,andyou’llneedtocontactawebdevelopertofindoutthesourceoftheissue. Nowthatwe’vereviewedhowtouseGoogleTagAssistanttoensurethatGTMisinstalledcorrectlyonanypage,we’lltellyouhowtouseFacebook’ssimilartooltodirectlytestanddebugtheFacebookPixel. UsingFacebookPixelHelpertoTestYourFacebookPixelImplementation Let’ssayyou’vecorrectlyinstalledGoogleTagManagerandit’sworkingcorrectly,butafterinstallingtheFacebookPixelTag(asdescribedabove),you’restillhavingproblems.Inthiscase,you’llneedtodebugtheFacebookPixeldirectlyusingtheFacebookPixelHelper. StartbyinstallingitonChromeasyoudidwithGoogleTagAssistant.Next,openyourwebsite,refreshthepage,andclickontheFacebookPixelHelpersymbolintheupperrightcornerofChrome.     IftheFacebookPixeliscorrectlyinstalled,youshouldseeitsPixelIDlistedcorrectlyhere.Ifthisisn’tthecaseandyou’reinterestedinlearningmoreabouthowtousetheFacebookPixelHelpertovalidateanddebugyourFacebooktracking,checkouttheFacebookPixelHelperdocumentation. FinalThoughts Hopefully,thisposthashelpedyousuccessfullyinstalltheFacebookPixelusingGoogleTagManagerandsolveanyproblemsyouexperiencedalongtheway.OncetheFacebookPixelisproperlyinstalled,youwillbeabletotakeadvantageofalotoftheoptimizationfeaturesavailableinFacebookAds,soit’sdefinitelyworththeeffort. Anintroductoryguidetoinboundmarketing Gettogripswithmarketinginthedigitalage Loremipsumdolorsitamet,consecteturadipiscingelit.Suspendissevariusenimineroselementumtristique.Duiscursus,miquisviverraornare,erosdolorinterdumnulla,utcommododiamliberovitaeerat. Comments SignUpforourBlog Wepromisethatwewon'tSPAMyou. PRODUCT Benefits VerticalMarketSolutions Plans RESOURCES Blog HelpCenter SubmitHelpRequest COMPANY About ContactUs Privacy Terms