USER GUIDE FLOODLIGHT TAGS 12/15/16

Transcription

1 USER GUIDE FLOODLIGHT TAGS 12/15/16

2 1. INTRODUCTION This document was created to assist with the addition of floodlight (and other script) tags to HTML pages within an agency s SharePoint Website. *****DISCLAIMER***** The addition of Floodlight tags is not a supported service through Pennsylvania Interactive. Any issues with the floodlight code or tag addition should be resolved through the vendor providing the source code. 2. GENERAL INSTRUCTIONS SharePoint has built in safety features which strip out any scripting language (ie. JavaScript) from the inline HTML prior to publishing. The following instructions allow a user to embed the JavaScript into the page A. On your PC, create a text file named code_snippet.txt B. Copy and paste the JavaScript code into the newly created text file C. Navigate to the page you want to add the code to in the authoring environment D. On the page, navigate to the Manage Content and Structure under Site Actions E. Select the Documents Library within the same subsite that the page exists in F. Upload the code_snippet.txt file to the Documents library G. Right click on the.txt file and select open in new tab H. Verify that the code is appearing correctly, if it is not, adjust accordingly and re-upload the file I. Select the code_snippet.txt and publish the file J. Copy the URL of the text file K. Navigate back to the page you want to add the code snippet to L. Check out and edit the webpage M. Select the Add a Web part option N. In the list that appears, navigate to Media and Content and add the Content Editor web part O. Click within the newly created Content Editor web part and select the properties menu a. Occasionally the SharePoint ribbon can cover the properties menu, remember that you can select the Browse tab within the ribbon to shrink it down P. Select the empty field at the top of the Content Editor properties menu Q. Paste the link to the code_snippet.txt file R. Check in the page S. Verify that the code snippet is behaving correctly Floodlight Tags 2

3 T. Once ready, publish the page If any adjustments are needed to the code the user will only need to change the text file. Once established the link between the.txt file and the webpage only needs to be adjusted if the.txt moves locations or if the agency wants to delete the code altogether 3. PAGE TAGS To add the page tags, no additional steps are needed beyond what was mentioned in Section 2 4. BUTTON TAGS To add the Button Tags, following the instructions in Section 2 to add the event tag base. Please ensure that the code snippet is added to the top of the page. This can be done by adding a webpart either inside the main content area or selecting the Add a Web Part option located at the top of each page layout. After that to add the Button Tags you ll need to do the following: IDENTIFY YOUR BUTTON TAGS AND PLACEMENT a. Review the Button Tags Excel file provided to your agency b. For each button tag identify i. Event Name ii. CallFloodlight script c. For the event name create a class name and keep track of the script code i. For our example we will use class="floodlight-btn_complaint" with an associating script of callfloodlight_new('cat'); Floodlight Tags 3

4 d. Repeat this step for each button tag (each new event will need a new class name) MODIFY THE CODE_SNIPPET.TXT FILE a. At the bottom of the code_snippet file (above the </script> tag) paste the following $("EVENT NAME ").on("click", function(e){script}) b. Replace the EVENT name and SCRIPT with the button elements identified earlier a. For the class name replace the class= with a period (as shown below) $(".Floodlight-BTN_Complaint").on("click", function(e){callfloodlight_new('cat')}) c. For each additional EVENT and SCRIPT combination just copy and paste the third line and paste directly below $(".Floodlight-BTN_Complaint").on("click", function(e){callfloodlight_new('cat')}) $(".Floodlight-BTN_Complaint2").on("click", function(e){callfloodlight_new('cat2')}) $(".Floodlight-BTN_Complaint3").on("click", function(e){callfloodlight_new('cat3')}) Floodlight Tags 4

5 d. Save the text file EDITING YOUR PAGE a. Edit the page you want to add the button tags b. Select the content area that contain the links you want to add the Onclick function to c. In the ribbon select the Format Text option under Editing Tools d. Click the HTML button and select Edit HTML source e. Add the EVENT class to the <a> tags you want to track <p>to file a complaint please click <a href=" class="floodlight- BTN_Complaint" >Here</a></p> f. Repeat for each <a> tag on the page and replacing the class with the class name you created during the identification phase g. Check in the page h. Verify in the page source that everything looks correct i. Publish the page j. Publish the code_snippet.txt Floodlight Tags 5