Expanding Code Snippets to relate to Web Page Items

[jkerbaugh]

Expand on the current functionality for Tag Management to relate Custom Snippet items to Web Page Items to reduce the need for deployments to add custom JavaScript functionality to a specific page or pages in the Website Channel.

Technical Requirements

• [ ] Extending the WebPageLayout with a UIPage to manage tags pertaining to the selected WebPageItem, if the WebPage is root or is a folder tags should not be able to be added
• [ ] Tags can have a 1:1 or 1:* relationship to WebPageItems to reduce redundancy in loading the same "Tag" multiple times
• [ ] Ability to wait to load tags based on DOM events ie) DOMContentLoaded
• [ ] Ability to enable and disable this snippets without having to remove them
• [ ] Ability to see a listing of website channel related pages the snippet is applied to in the Tag Management Module similar to that of the functionality of how you could see the what pages forms were on in Kentico Portal <=12
• [ ] (Optional) Tags can also be inherited or applied from parent item to the children under a page

This feature request would be utilized to extend the site to add new client side functionality or style changes to a page or site overall without the need for deployments.

Use Cases

I have created a landing page utilizing a current prebuilt template on the site, I as a marketer would like to add custom tracking events to the page which would require a developer to add JavaScript functionality to the main sites JavaScript file or create a Custom LandingPage.js file that loads on that specific page template warranting a deployment to take place.

With the expanded functionality I would be able to ask the developer to add this custom code to the site and they would be able to upload a LandingPage.js file to the media library and then Navigate to the webpage in the channel and the appropriate script tag to that page.

---

I have created a landing page utilizing a current prebuilt template on the site, I as a marketer would like to add an external form via Marketo to the site which utilizes the Marketo JavaScript library to load the form on page load.

With the expanded functionality I would be able to ask the developer to add this custom code to the site and they would be able to add a snippet to the new landing page with the appropriate loaded that would load on DOMContentLoaded at the end of the body content.

---

I as a marketer would like to add sharing buttons via JavaScript integration to specific pages on the site, I would like to be able to create a snippet for the ShareThis.js library once that I can link to as many pages as I would like throughout the Website Channel, if I need to go back and enable/disable/modify this snippet I can.

With the expanded functionality I would be able to add a Code Snippet to the Tag Management Module and then be able to select an existing one to add to the Web Page Items of my choosing, then if the need arises and I need to disable this functionality I can go back to the Tag Management module to disable this tag or delete it

Optional Use Case - Inherit/Load tags from parent

I as the developer have gotten a request to add Social Sharing buttons to every page under a Blogs section on the site, this would require me currently to modify the rendering view for the Blog Post content type and then deploy the code to production.

With the expanded functionality I would be able to navigate to the blogs path in the Tree and have to ability to apply that snippet to all children under that path

[liparova]

Thank you for highlighting this request. We will review it internally and keep you informed of any developments.

[bkapustik]

Hello @jkerbaugh, I would like to ask you to specify some things more in detail please.

1. What do you mean by WebPageLayout with a UI page ? Is that administration layout as there should be a section in a page builder which is a placeholder for a Tag, or one subpage in the pagebuilder, where you can add multiple tags to that site ? Is it an admin module, where you could manage all tags and each tag would display all webpageitems where it is used ?

2. In the tag configuration, should you be able to select a specific DOM event on which the tag loads ?

3. On top of this, you talk about "I as a marketer would like to add sharing buttons via JavaScript integration to specific pages on the site". Do you want to configure where the button would be added through pagebuilder ?

[jkerbaugh]

@bkapustik

Please see below, let me know if there is anything else I need to go further into detail on

1. In my opinion it should be another button added to the listing in the layout when viewing a website channel, by including a UIPane for tags that would list the "Custom Snippets" that are related to the selected webpage where you can create/edit/add existing/delete snippets (see image below, labeling it Tags may be confusing since tagging via Taxonomy may be a conflicting term).
2. Yes tags should be able to be configurable to load via DOM events such as DOMContentLoaded, or loaded immediately where it was placed (top head, bottom head, top body, bottom body)
3. This was more of a use case to explain a specific scenario, to elaborate more, I would be adding a JavaScript library to a page (named ShareThis.js) using the Tag Management integration, this script would have the logic in it already to create/modify buttons that currently exist on the page to do the social sharing, it wouldn't need to be configured where to place them as we would do that with widgets such as Rich Text or a Static Text/Html widget already. With that in mind you should be able to reuse that snippet and relate it to multiple pages so it only needs to be updated one time.