Pockets - Vanilla Success
<main> <article class="userContent"> <h2 data-id="overview">Overview</h2><p>Pockets add areas to your forum where you can inject custom HTML, CSS or Javascript into your theme. It is a powerful tool that makes Vanilla flexible for ad placement, Google Analytics, and other small customizations.</p><p>Freeform HTML Pockets are designed to be used by advanced users and developers who can write and review their own code.</p><p>For more common use cases, Widgets may be more appropriate. You can read more about Widgets (formerly known as modules) here: </p><p><a href="https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme" rel="nofollow noreferrer ugc">Using Pockets & Widgets to Enhance your Theme - Vanilla Success</a> </p><h3 data-id="setup">Setup</h3><p>Pockets are available on all plan levels. To activate it, simply locate it in your addon list (/dashboard/settings/addons) and toggle it on. It will then be available in the “settings” tab of your dashboard, listed under “Appearance” in the left side menu. You can navigate to the page directly by going to /settings/pockets</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/4WPNUM6MJC77/pasted-image-0-2810-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/4WPNUM6MJC77/pasted-image-0-2810-29.png" alt="pasted image 0 (10).png" height="667" width="1312" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2></h2><h2 data-id="working-with-pockets">Working With Pockets</h2><p>Once you navigate to the new Pockets menu in your Dashboard, you’ll have two options immediately available - “Add Pocket” and “Enable Pocket Locations.” </p><h3 data-id="enable-pocket-locations">Enable Pocket Locations</h3><p>Before you work with pockets, you need to know where the specific locations will appear on the front end of your community. Toggling this option ON will allow you to see all the places where a pocket is available. Only users with the permission to add/edit pockets will be able to see the Pocket Locations while this setting is on.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/K7FT9EUR000N/pasted-image-0-2811-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/K7FT9EUR000N/pasted-image-0-2811-29.png" alt="pasted image 0 (11).png" height="693" width="1352" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="-1"></h3><h3 data-id="add-pocket">Add Pocket</h3><p>From the main pockets page (Settings -> Pockets), you can add a pocket by clicking Add Pocket on the top right. Once you do, you will be presented with this interface:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/8Z5BM1S49LAI/pasted-image-0-2812-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/8Z5BM1S49LAI/pasted-image-0-2812-29.png" alt="pasted image 0 (12).png" height="673" width="1013" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h2 data-id="-2"></h2><h2 data-id="enable-pocket">Enable Pocket</h2><p>Opt to enable or disable the pocket (turn ON or OFF)</p><h2 data-id="name">Name</h2><p>Choose something that will make it clear what the intended behaviour of the pocket is. This will not appear to end users. </p><h2 data-id="type">Type</h2><p>Once you select “Type” the remaining options will change based on your selection. This article will examine Custom HTML options only, if you are working with a particular widget, please see the corresponding article (<a href="https://success.vanillaforums.com/kb/articles/366-using-pockets-widgets-to-enhance-your-theme" rel="nofollow noreferrer ugc">Full list of widgets here</a>)</p><p>Custom HTML</p><p>Here you can add custom HTML, if you are adding a different type of code, for example if you are trying to add CSS, you will need to add a <a href="https://www.w3schools.com/tags/tag_style.asp" rel="nofollow noreferrer ugc"><style> tag</a>.</p><h2 data-id="placement-and-conditions">Placement and Conditions </h2><p>You will notice there is a second tab labelled “Placement & Conditions” where you can target a pocket at a particular audience or area of the community:</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/SP5DJNY4B9VQ/pasted-image-0-2813-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/SP5DJNY4B9VQ/pasted-image-0-2813-29.png" alt="pasted image 0 (13).png" height="672" width="1008" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="-3"></h3><h3 data-id="location">Location</h3><p>Each placeholder has a specific location in your community, as shown when “Enable Pocket Locations” is active. In this drop-down menu, you are able to select exactly where you want the pocket to appear.</p><p><em>We recently added a new location; After Banner for communities using Foundation.</em></p><h3 data-id="page">Page</h3><p>By default, a new pocket will be set to occupy the selected placeholder on every page of your community. If you’d rather it only work in certain areas, you can narrow the location down by using the drop-down menu and selecting a specific area of your forum - such as user profile pages or the inbox.</p><h3 data-id="role">Role</h3><p>You can configure a pocket to display for specific role and permission groups. This is useful if you're creating CTAs that are targeted to specific user groups.</p><h3 data-id="subcommunities">Subcommunities</h3><p>This option will only appear if you are using our <a href="https://success.vanillaforums.com/kb/articles/53-subcommunities" rel="nofollow noreferrer ugc">subcommunities feature</a>.</p><p>You can configure a pocket to appear for a specific subcommunity. Say you have an English subcommunity and a French subcommunity, or 2 distinct product subcommunities, you can easily create a pocket in one subcommunity, without impacting the other.</p><h3 data-id="category">Category</h3><p>Create a pocket for a specific category. You can also select "apply to subcategories" if you'd like your pocket to render in each subcategory in this section. </p><p><strong>Note:</strong> If you make a selection for this option, you should <em>not</em> make any selection for the Page<strong> </strong>option.</p><h3 data-id="repeat">Repeat</h3><p>Some Pocket locations, such as “Panel” and “Between Discussions” have multiple placeholders to choose from. You can specify if you want the pocket to appear Before or After, as indicated by their location label. If you have more than one Pocket in the same Location and with the same Repeat value (e.g. two pockets in Content with the Repeat value of "After") they will appear in alphabetical order according to their names.</p><p>Numbered placeholders can be selected using “Given Indexes”. You will see for instance within the panel there are 8 available pocket locations; Before, Panel (1) - Panel (6), After.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/WLD69FM91ZP6/image.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/WLD69FM91ZP6/image.png" alt="image.png" height="766" width="219" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <p><br></p><p>Selecting “Repeat Every” will open two new settings, allowing you to select the starting point and frequency of the pocket's appearance. This is geared towards placing content, such as advertisements, between comments or discussions.</p><div class="embedExternal embedImage display-large float-none"> <div class="embedExternal-content"> <a class="embedImage-link" href="https://us.v-cdn.net/6030677/uploads/56CS2F8S7LQN/image-281-29.png" rel="nofollow noreferrer noopener ugc" target="_blank"> <img class="embedImage-img" src="https://us.v-cdn.net/6030677/uploads/56CS2F8S7LQN/image-281-29.png" alt="image (1).png" height="277" width="1022" loading="lazy" data-display-size="large" data-float="none"></img></a> </div> </div> <h3 data-id="-4"></h3><h3 data-id="conditions">Conditions</h3><p>Here you can choose several options: </p><ul><li>Only display on mobile browsers.</li><li>Never display on mobile browsers.</li><li>Don't display for embedded comments. (<a href="https://success.vanillaforums.com/kb/articles/67-embedding-your-forum" rel="nofollow noreferrer ugc">see main article on embedding</a>)</li><li>Display in dashboard. (not recommended) </li><li>This pocket is an ad. Users with the no ads permission will not see this pocket. (<a href="https://success.vanillaforums.com/kb/articles/39-roles-permissions" rel="nofollow noreferrer ugc">see main article on permissions</a>)</li></ul><h3 data-id="test-mode">Test Mode</h3><p>Before you save your Pocket and have it go live to everyone in your community, you can toggle this switch so the Pocket will only be seen by administrators with permission to manage Pockets. Once you’re satisfied that the Pocket is working as expected, you can toggle Test Mode off and save again, pushing the Pocket out to the public.</p><h2 data-id="debugging">Debugging</h2><p>It’s important to note that Pockets should be reserved for advanced users. JavaScript errors and incorrect HTML can cause conflicts with Vanilla’s functionality. Debugging custom code in Pockets is outside the scope of Vanilla Support, so you must be able to resolve your own errors. Use test mode when trying out new things, test on staging and disable pockets if you suspect they are causing issues. Rotating ads are a common issue, so be diligent.</p><h2 data-id="using-the-pockets-plugin-to-add-analytics">Using the Pockets Plugin to Add Analytics</h2><p>While Vanilla Statistics provides an overview of your community, it's also simple to add whatever analytics package you prefer (Google Analytics, GetClicky, Crazy Egg, ect) with our Pockets add-on. Once you have the Pockets Plugin enabled, get the Javascript code or tag from your analytics provider, open up the Pockets plugin and click "Add Pocket". The next step is to fill in the information.</p><p>In the body box, copy the code given to you by your Analytics provider. For location, select the Header or Footer section (depending on your provider's requirements). The final step is to choose the repeat option. Select "before" if you want the code to be placed "before" the header (which is recommended by Google Analytics). To place the analytics code in the footer, choose "after" so your Analytics tag will be at the bottom of your page just before the </body> tag. </p><h2 data-id="common-pocket-usecases">Common Pocket Usecases</h2><h3 data-id="google-analytics">Google Analytics</h3><p><a href="https://success.vanillaforums.com/kb/articles/368-google-analytics-gtag-js-foundation" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/368-google-analytics-gtag-js-foundation</a> </p><h3 data-id="google-tag-manager">Google Tag Manager</h3><p><a href="https://success.vanillaforums.com/kb/articles/136-google-tag-manager-vanilla-forums" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/136-google-tag-manager-vanilla-forums</a> </p><h3 data-id="verifying-your-site-with-google-search-console">Verifying your site with Google Search Console</h3><p><a href="https://success.vanillaforums.com/kb/articles/325-verify-your-site-with-google-search-console" rel="nofollow noreferrer ugc">https://success.vanillaforums.com/kb/articles/325-verify-your-site-with-google-search-console</a> </p><h2 data-id="-5"></h2> </article> </main>