{"id":6293,"date":"2024-04-14T14:55:59","date_gmt":"2024-04-14T06:55:59","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6293"},"modified":"2024-04-14T14:55:59","modified_gmt":"2024-04-14T06:55:59","slug":"insert-meta-pixel-on-your-webflow-site","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/insert-meta-pixel-on-your-webflow-site\/","title":{"rendered":"Insert Meta Pixel on your Webflow site"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Meta Pixel enables you to monitor the actions of your website visitors. Tracked conversions will be displayed in Meta Events Manager and can be utilized to evaluate the efficacy of your conversion funnel and to identify custom audiences for dynamic ad campaigns.<\/p>\n<h6><strong>Prior to commencing:<\/strong> Examine Meta\u2019s guidelines for configuring and deploying a Meta Pixel.<\/h6>\n<p>This tutorial covers the following topics:<\/p>\n<ol role=\"list\">\n<li>Implementing Meta Pixel on your website<\/li>\n<li>Implementing a delay for cookie approval<\/li>\n<li>Creating a Pixel cookie approval banner<\/li>\n<li>Activating ecommerce events<\/li>\n<li>Configuring advanced event tracking<\/li>\n<\/ol>\n<h2>Steps to implement Meta Pixel on your site<\/h2>\n<p><strong>Vital:<\/strong> In case you have previously integrated a Meta Pixel on your website using custom code, ensure to eliminate the custom code before adding your Meta Pixel ID.<\/p>\n<p>To insert Meta Pixel on your site:<\/p>\n<ol role=\"list\">\n<li>Access <strong>Site settings<\/strong> &gt; <strong>Apps &amp; Integrations<\/strong> tab &gt; <strong>Meta Pixel<\/strong><\/li>\n<li>Paste your Meta Pixel ID<\/li>\n<\/ol>\n<h3>Enabling ecommerce events<\/h3>\n<p>Once you activate Ecommerce on your website, Webflow will automatically relay the subsequent events to Meta Events Manager:<\/p>\n<ul role=\"list\">\n<li>Viewed product<\/li>\n<li>Added product to cart<\/li>\n<li>Purchased product<\/li>\n<\/ul>\n<p>These events will allow you to proficiently gauge and improve your advertising campaigns on Meta and Instagram.<\/p>\n<p><strong>Learn more:<\/strong><\/p>\n<ul role=\"list\">\n<li>Setting up Instagram Shopping<\/li>\n<li>Synchronizing products<\/li>\n<li>Configuring Meta Advantage+ catalog advertisements for your products<\/li>\n<\/ul>\n<h2>Steps to implement a delay for cookie approval<\/h2>\n<p>If your websites collect personal data from EU residents, it is essential to comply with GDPR regulations. You can postpone loading the pixel until your website visitors accept your cookie consent by toggling the \u201cDelay for cookie consent\u201d option to <strong>YES<\/strong>.<\/p>\n<p>Once you enable this setting, you also need to request cookie consent on your site using a cookie consent banner.<\/p>\n<h2>How to create a Pixel cookie approval banner<\/h2>\n<p><strong>Important:<\/strong> This guide utilizes Webflow\u2019s embed element to include custom code. The embed element is accessible on any paid Site plan and on Core, Growth, Agency, and Freelancer Workspace plans.<\/p>\n<p>You can set up a Pixel cookie approval banner with the subsequent steps:<\/p>\n<ol role=\"list\">\n<li>Devise a banner<\/li>\n<li>Establish interactions<\/li>\n<li>Embed custom code<\/li>\n<\/ol>\n<h3>Devise a banner<\/h3>\n<ol role=\"list\">\n<li>Design and craft a banner according to your preferences, incorporating the cookie consent notification message<\/li>\n<li>Assign an <strong>ID<\/strong> to your banner (e.g., consentPopup)<\/li>\n<li>Integrate an \u201cAccept Pixel cookies\u201d button<\/li>\n<li>Assign a <strong>class<\/strong> to your button<\/li>\n<li>Provide an <strong>ID<\/strong> to your button (e.g., consentBtn)<\/li>\n<li>Add a \u201cDecline Pixel cookies\u201d or \u201cClose\u201d button<\/li>\n<li>Assign the same class to the \u201cDecline\u201d button as the \u201cAccept\u201d button<\/li>\n<li>(Optional) Include a \u201cLearn more\u201d link to direct visitors to your privacy policy page<\/li>\n<li>Insert the banner within a <strong>div block<\/strong> to function as your popup container<\/li>\n<li>Assign a class to the <strong>div block<\/strong> (e.g., popupWrapper)<\/li>\n<li>Configure the popup container\u2019s <strong>position<\/strong> as <strong>fixed<\/strong><\/li>\n<li>Select a preset position or manually adjust the position of the popup container<\/li>\n<li>Designate the popup container as a component<\/li>\n<li>Add this component to all pages of your website<\/li>\n<\/ol>\n<h3>Establish interactions<\/h3>\n<p>Begin by establishing an interaction that conceals the cookie consent banner upon visitor acceptance of Pixel cookies:<\/p>\n<ol role=\"list\">\n<li>Select the \u201cAccept Pixel cookies\u201d button on the screen<\/li>\n<li>Navigate to <strong>Interactions panel<\/strong> &gt; <strong>Element trigger<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon to create a new element trigger<\/li>\n<li>Select <strong>Mouse click (tap)<\/strong><\/li>\n<li>Access <strong>Trigger settings<\/strong> and select <strong>Class<\/strong><\/li>\n<li>Choose <strong>On 1st click<\/strong> and select <strong>Select an action<\/strong><\/li>\n<li>Opt for <strong>Start an animation<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon to create a customized animation<\/li>\n<li>Name your custom animation (e.g., \u201cClose the cookie popup\u201d)<\/li>\n<li>Choose the popup container on the screen<\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon adjacent to <strong>Actions<\/strong> to add an action to your animation<\/li>\n<li>Set <strong>Affect<\/strong> to <strong>Class<\/strong><\/li>\n<li>Adjust <strong>Move<\/strong> and set the <strong>y-axis<\/strong> to <strong>100%<\/strong><\/li>\n<li>Confirm the settings<\/li>\n<\/ol>\n<p>Next, create a similar interaction to hide the cookie consent banner in case a visitor declines Pixel cookies:<\/p>\n<ol role=\"list\">\n<li>Choose the \u201cDecline\u201d button on the screen<\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon to create a new element trigger<\/li>\n<li>Choose <strong>Mouse click (tap)<\/strong><\/li>\n<li>Access <strong>Trigger settings<\/strong> and select <strong>Class<\/strong><\/li>\n<li>Opt for <strong>On 1st click<\/strong> and choose <strong>Select an action<\/strong><\/li>\n<li>Opt for <strong>Start an animation<\/strong><\/li>\n<li>Choose your \u201cClose the cookie popup\u201d custom animation<\/li>\n<\/ol>\n<p>Subsequently, set up an interaction to display the cookie consent banner when the page loads:<\/p>\n<ol role=\"list\">\n<li>Access <strong>Interactions panel<\/strong> &gt; <strong>Page trigger<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon to create a new page trigger<\/li>\n<li>Select <strong>Page load<\/strong><\/li>\n<li>Access <strong>When page starts loading<\/strong> and click <strong>Select an action<\/strong><\/li>\n<li>Opt for <strong>Start an animation<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon to create a customized animation<\/li>\n<li>Name your custom animation (e.g., \u201cShow the cookie popup\u201d)<\/li>\n<li>Select the popup container on the screen<\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon next to <strong>Actions<\/strong> to add an action to your animation<\/li>\n<li>Adjust <strong>Move<\/strong> and set the <strong>y-axis<\/strong> to <strong>100%<\/strong><\/li>\n<li>Check <strong>Set as initial state<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon next to <strong>Actions<\/strong><\/li>\n<li>Adjust <strong>Move<\/strong> and set the y-axis to <strong>0%<\/strong><\/li>\n<li>Confirm the settings<\/li>\n<\/ol>\n<p>Lastly, ensure the cookie consent banner is loaded on all pages of your site:<\/p>\n<ol role=\"list\">\n<li>Access another page on your site<\/li>\n<li>Go to <strong>Interactions panel<\/strong> &gt; <strong>Page trigger<\/strong><\/li>\n<li>Click the \u201c<strong>plus<\/strong>\u201d icon to create a new page trigger<\/li>\n<li>Select <strong>Page load<\/strong><\/li>\n<li>Access <strong>When page starts loading<\/strong> and click <strong>Select an action<\/strong><\/li>\n<li>Opt for <strong>Start an animation<\/strong><\/li>\n<li>Choose your \u201cShow the cookie popup\u201d custom animation<\/li>\n<li>Repeat the above steps for all pages of your site<\/li>\n<\/ol>\n<blockquote><p><strong>Important:<\/strong> Ensure to select the popup container when adding actions to your animations. Applying actions directly to the banner itself may impede the functioning of the custom code.<\/p><\/blockquote>\n<h3>Embed custom code<\/h3>\n<p>To operationalize the cookie consent banner, navigate to <strong>Site settings<\/strong> &gt; <strong>Custom code<\/strong> tab &gt; <strong>Footer code<\/strong> and insert the provided code:<\/p>\n<div class=\"w-embed\">\n<div class=\"code-block\">\n<pre class=\"code-block_body\"><code id=\"snippet1\" class=\"code-block_code\">\n    &lt;script type=\"text\/javascript\"&gt;\n  var popup = document.getElementById('consentPopup'); \u00a0\n  var alreadyLoaded = window.localStorage.getItem('fbGrantConsent') === 'true';\n  \/\/Show the consent banner if consent ispreviously approved. \u00a0\n  if (previouslyLoaded) { \u00a0 \u00a0\n  popup.style.display = 'none'; \u00a0 \u00a0\n  fbq('agreement', 'accept'); \u00a0\n  } else { \u00a0 \u00a0\n  popup.style.display = 'block'; \u00a0\n  }\n  \n  \/\/Accept agreement and save it in localStorage of the browser \u00a0\n  var acceptButton = document.getElementById('acceptButton'); \u00a0\n  acceptButton.addEventListener(\"click\", function() { \u00a0\n  fbq('agreement', 'accept'); \u00a0 \u00a0\n  window.localStorage.setItem('fbAcceptAgreement', 'true'); \u00a0\n  });\n&lt;\/script&gt;\n    <\/code><\/pre>\n<\/div>\n<\/div>\n<blockquote><p><strong>Crucial:<\/strong> In case distinctive IDs were utilized for your \u201cAllow cookies\u201d button and your popup, ensure to substitute the IDs in the aforementioned code with the IDs you employed instead. Exchange \u201c<strong>agreementPopup<\/strong>\u201d with the ID you configured for the banner. Replace \u201c<strong>acceptButton<\/strong>\u201d with the ID you set for the \u201cAllow cookies\u201d button.<\/p><\/blockquote>\n<p><strong>Further references:\u00a0<\/strong><\/p>\n<ul role=\"list\">\n<li>Meta\u2019s documentation on cookie agreement<\/li>\n<li><a href=\"https:\/\/commission.europa.eu\/resources-partners\/europa-web-guide\/design-content-and-development\/privacy-security-and-legal-notices\/cookies-and-similar-technologies_en\">European Commission\u2019s cookie acceptance regulations<\/a><\/li>\n<\/ul>\n<h2>How to establish advanced event monitoring<\/h2>\n<p>To get insights into cutting-edge Pixel event monitoring, refer to Meta\u2019s manual on events. You can also examine example code for sophisticated Meta pixel utilization instances and amend the code for the events you wish to monitor.<\/p>\n<p>Once equipped with the suitable code for the event you intend to monitor, you can insert these events into the &lt;head&gt; tag of one or more pages on your site.\u00a0<\/p>\n<p>If intending to monitor link or button clicks, make certain to define a distinctive ID on those elements in the Designer. After that, insert your embed code into a code editor (e.g., <a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener\">Sublime Text<\/a> or <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\">Visual Studio Code<\/a>) and replace the IDs in the embed code with the IDs you assigned to your buttons or links. Finally, navigate to <strong>Pages panel<\/strong> &gt; <strong>Page settings<\/strong> &gt; <strong>Custom code<\/strong> and embed the subsequent script.\u00a0<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" alt=\"Annotated code for monitoring clicks on an \u201cAdd to Cart\u201d button.\u00a0\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94975917b8bf70a73b582_605d1ed0b7126513a4775813_facebook-pixel_4.png\" title=\"64b94975917b8bf70a73b582_605d1ed0b7126513a4775813_facebook-pixel_4\"><\/div><figcaption><em>Meta\u2019s illustrative code for monitoring clicks on an \u201cAdd to Cart\u201d button. On Collection pages, dynamic Collection fields can be employed within the code.<\/em><\/figcaption><\/figure>\n<p>There is no need to incorporate the Meta Pixel segment of the exemplar code into your site if the Pixel ID was already included in <strong>Site settings<\/strong> &gt; <strong>Apps &amp; Integrations<\/strong> tab &gt; <strong>Meta Pixel<\/strong>.\u00a0\u00a0<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" alt=\"Meta Pixel code which comprises lines of code within a script tag, commencing with \u201cfbq\u201d.\u00a0The code is labeled &quot;You don't need to add this to your site.&quot;\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94975917b8bf70a73b565_605d1e9bbff43f13fb558d1f_facebook-pixel_3.png\" title=\"64b94975917b8bf70a73b565_605d1e9bbff43f13fb558d1f_facebook-pixel_3\"><\/div>\n<\/figure>\n<h6><strong>Note: <\/strong>Our assistance team cannot offer direct aid with custom code establishment or troubleshooting, as these subjects extend beyond the sphere of our <a href=\"https:\/\/support.webflow.com\/resources\/customer-support-policy\">client support protocol<\/a>. Should you require more assistance integrating Meta Pixel events, kindly inform us on the <a href=\"https:\/\/discourse.webflow.com\/c\/design-help\/custom-code\/22\">Webflow Forum<\/a> with as much detail as possible (e.g., your site\u2019s read-only link, pertinent screenshots, the code you are attempting to integrate, and a description of the problem), where the entirety of the Webflow community (inclusive of staff) can provide further aid and resources.<\/h6>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Track your site visitors\u2019 actions with Meta Pixel.","protected":false},"author":2,"featured_media":5150,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[296],"tags":[],"class_list":{"0":"post-6293","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-integrations","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6293","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6293"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6293\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/5273"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6293"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6293"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6293"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}