Adding custom code (HTML, CSS, JavaScript) can help customize your website’s functionality, track analytics, and integrate third-party tools. However, it’s important to verify if the custom code was added correctly and is functioning as intended. Here’s a step-by-step guide on how to check if your custom code is properly integrated using OzSpeed’s hPanel and browser developer tools.
Step 1: Review the Custom Code Section in hPanel #
If you added custom code through OzSpeed’s hPanel, you can check it directly from the Custom Code settings.
How to Access Custom Code: #
- Log in to hPanel at ozspeed.com.au.
- Go to Website Settings > Custom Code.
- Review the Header Code, Body Code, and Footer Code sections.
- Confirm that the custom code you added (e.g., Google Analytics, Facebook Pixel) is present.
Tip: #
- Make sure to save any changes after reviewing or updating the code.
Step 2: Use Browser Developer Tools #
To ensure the custom code is live on your website, use the browser developer tools to inspect the page’s HTML source code.
How to Check Custom Code with Developer Tools: #
- Open your website in a browser (e.g., Chrome, Firefox, Edge).
- Right-click anywhere on the page and select Inspect or press Ctrl + Shift + I (Windows) or Cmd + Option + I (Mac).
- Go to the Elements tab.
- Use Ctrl + F (Windows) or Cmd + F (Mac) to search for specific code snippets (e.g.,
google-analytics,fbq, or your custom script). - Check if the code appears in the head or body sections, depending on where it was added in hPanel.
Tip: #
- Look for any errors or warnings in the Console tab, as they may indicate issues with the custom code.
Step 3: View the Page Source #
Another way to verify if custom code is added is to view the page source of your website.
How to View Page Source: #
- Open your website in a browser.
- Right-click on the page and select View Page Source or press Ctrl + U (Windows) or Cmd + U (Mac).
- Use Ctrl + F (Windows) or Cmd + F (Mac) to search for your custom code (e.g.,
<script>,<style>, or specific identifiers likeid="custom-code").
Tip: #
- This method is useful for checking HTML and JavaScript code but may not show dynamically loaded scripts.
Step 4: Test the Functionality of the Custom Code #
If you added code for analytics, tracking, or integrations (e.g., Google Analytics, Facebook Pixel), you can use testing tools to verify its functionality.
How to Test Tracking Code: #
- For Google Analytics: Use the Google Tag Assistant Chrome extension to check if the analytics tag is firing correctly.
- For Facebook Pixel: Use the Facebook Pixel Helper extension to verify pixel activity.
- For other third-party tools, use their specific debugging or testing tools.
Tip: #
- Ensure that your ad blocker is disabled while testing, as it may block the tracking scripts.
Step 5: Check the Robots.txt and Noindex Tags #
If your custom code isn’t showing up, it may be blocked by the robots.txt file or hidden by a noindex tag.
How to Check Robots.txt: #
- Go to Website Settings > SEO & Analytics in hPanel.
- Click on Edit Robots.txt and check for any
Disallowrules that might block the custom code.
How to Check Noindex Tags: #
- Inspect the page source and search for a
<meta name="robots" content="noindex">tag. - If found, remove the tag in hPanel to allow the page to be indexed.
Tip: #
- Make sure the page is set to Allow Indexing in the SEO Settings of hPanel.
Step 6: Use Online Code Checkers #
Use online tools to verify the presence and correctness of your custom code.
Recommended Tools: #
- W3C Markup Validator: Checks the validity of your HTML code.
- Pingdom Website Speed Test: Analyzes your website’s load performance and lists all scripts, including custom code.
- GTmetrix: Provides a detailed report of your website’s performance, including scripts loaded.
Tip: #
- Use these tools regularly to monitor any issues with your custom code.
Troubleshooting Tips #
- Custom Code Not Showing Up:
- Double-check the Header, Body, and Footer Code sections in hPanel to ensure the code was saved correctly.
- Clear your website cache in hPanel and your browser cache to view the latest version of your site.
- JavaScript Errors Detected:
- Check the Console tab in the browser developer tools for error messages related to your custom code.
- Fix any syntax errors or missing elements in the code.
- Tracking Code Not Firing:
- Make sure the tracking code is placed in the Header Code section for better loading priority.
- Use testing tools like Google Tag Assistant or Facebook Pixel Helper to identify issues.
Additional Tips: #
- Backup Your Custom Code: Save a copy of your custom code separately in case you need to restore it later.
- Test on Multiple Devices: Verify the custom code on different browsers and devices to ensure consistent functionality.
- Keep Code Simple and Efficient: Avoid adding too much custom code, as it can slow down your site. Focus on essential scripts.
