### Initiating a Crawl Source: https://www.thecrawltool.com/your-first-crawl Describes the action to start the web crawling process after project setup. It also mentions observing notifications for crawl status. ```text Click the "Start A Crawl" button. ``` -------------------------------- ### Google Analytics Tracking Setup Source: https://www.thecrawltool.com/blog/weekly-feature-update-2 Initializes Google Analytics tracking for the website. It ensures the dataLayer is available and configures the analytics with a specific tracking ID. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Get Projects Source: https://context7_llms Retrieves a list of all projects associated with the account matching the provided API key. The response includes project IDs, names, base URLs, and crawling status. ```APIDOC Method: GET Endpoint: /getProjects Request: curl -X GET https://www.thecrawltool.com/public_api/getProjects \ -H 'Authorization: Bearer ' \ -H 'Accept: application/json' Response Example: {"success":true,"data":[{"id":x,"name":"Sitename","baseurl":"https:\/\/somesitenamehere","crawling":0},{"id":x,"name":"Sitename","baseurl":"https:\/\/somesitenamehere\/","crawling":0}]} Key Fields: - id: Numeric project identifier. - name: Name of the project. - baseurl: The starting URL for the project's crawl. - crawling: Status indicator (0 for not crawling, 1 for crawling). ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/blog/introducing-the-crawl-tool JavaScript snippet for initializing Google Analytics (gtag.js). It sets up the dataLayer and configures the analytics account. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Google Analytics Tag Setup Source: https://www.thecrawltool.com/blog/introducing-the-header-tag-report Initializes Google Analytics tracking by setting up the dataLayer and configuring the gtag.js snippet with a specific measurement ID. This ensures website events and user interactions are sent to Google Analytics. ```JavaScript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Project Creation Input Fields Source: https://www.thecrawltool.com/your-first-crawl Details the information required to create a new project. This includes the project's name and the target website's URL. ```text Project Name: "The Crawl Tool" Site URL: "https://www.thecrawltool.com/" ``` -------------------------------- ### Blog Post Styling (CSS) Source: https://www.thecrawltool.com/blog/basics-of-technical-seo-for-new-website-owners Applies specific styling rules for blog post content, including font sizes for headings, margins for paragraphs, list styling, link appearance, and blockquote formatting. Enhances readability and visual presentation. ```css .blog-content IMG { width: 50%; height: auto; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; } h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } A { color: #0909de; } .prose img { width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } /* Additional specific selector to catch all images in the post content */ .prose * img, .prose>img, .prose p img, .prose div img { border-radius: 0.5rem !important; width: 100%; height: auto; margin: 1.5rem 0; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; color: #1f2937; } .prose h2 { font-size: 1.5rem; line-height: 2rem; } .prose p { margin-bottom: 1rem; line-height: 1.75; } .prose ul, .prose ol { margin-left: 1.5rem; margin-bottom: 1rem; } .prose li { margin-bottom: 0.5rem; } .prose a { color: #4f46e5; text-decoration: none; } .prose a:hover { text-decoration: underline; } .wp-block-quote { margin-left: 30px; margin-right: 30px; margin-top: 30px; font-style: italic; text-align: center; color: #222123; border: 1px solid #b7b7b7; padding: 10px; margin-bottom: 30px; border-radius: 10px; background-color: #e9e9f9; } ``` -------------------------------- ### Guest Logout Function Source: https://www.thecrawltool.com/register Implements a function to log out a guest user by sending an asynchronous GET request to the '/logoutguest' endpoint. The response handling is minimal. ```javascript function logoutguest() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { // Callback for successful logout (currently empty) } }; xhttp.open("GET", "/logoutguest", true); xhttp.send(); } ``` -------------------------------- ### URL Parameter Redirection (JavaScript) Source: https://www.thecrawltool.com/blog/basics-of-technical-seo-for-new-website-owners Checks for an 'access_key' query parameter in the URL. If found, it redirects the user to the '/timeline' page, passing the 'access_key' along. ```javascript let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### Get Reports Source: https://context7_llms Retrieves a list of available reports for a specific project ID. The project ID must be provided in the JSON request body. The response lists report IDs and their names. ```APIDOC Method: POST Endpoint: /getReports Request: curl -X POST https://www.thecrawltool.com/public_api/getReports \ -H 'Authorization: Bearer ' \ -H 'Accept: application/json' \ -H 'Content-Type: application/json' \ -d '{"project_id": }' Response Example: {"success":true,"data":[{"id":x,"name":"Broken Links"},{"id":x,"name":"Meta Descriptions"},{"id":20,"name":"Meta Keywords"}]} Key Fields: - id: Numeric report identifier. - name: Name of the report. ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/blog/4-free-tools-that-will-revolutionize-your-seo-strategy-overnight Initializes Google Analytics (gtag.js) for tracking website events and user activity. It sets up the dataLayer and configures the tracking ID. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Google Analytics Configuration Source: https://www.thecrawltool.com/the-site-information-report Initializes Google Analytics tracking by setting the JavaScript API version and configuring the tracking ID. This is a standard setup for integrating Google Analytics into a website. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Google Analytics Initialization (JavaScript) Source: https://www.thecrawltool.com/blog/basics-of-technical-seo-for-new-website-owners Initializes Google Analytics (gtag.js) by setting up the dataLayer and configuring the tracking ID. This script ensures website traffic is recorded by Google Analytics. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/guide Initializes Google Analytics (gtag.js) and configures it with a specific measurement ID. This snippet is typically found in the head of a webpage to track user activity. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### URL Parameter Redirection Source: https://www.thecrawltool.com/blog/introducing-the-crawl-tool JavaScript code that checks for an 'access_key' parameter in the current URL. If found, it redirects the user to the '/timeline' page, passing the 'access_key'. ```javascript let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### Related Blog Post Links Source: https://www.thecrawltool.com/blog/aws-startup-founders-programme-credits Links to other articles on The Crawl Tool blog, including titles, dates, and thumbnail image URLs. ```html [Some Experiments into How Google's Crawler works April 22, 2025 ### Some Experiments into How Google's Crawler works Why experiment with Googlebot Beyond the fact it is interesting to understand how it works, it is potential useful if you ca...] (/blog/some-experiments-into-how-googles-crawler-works) ``` ```html [Is LLMS.TXT useful? April 18, 2025 ### Is LLMS.TXT useful? LLMS.TXT again I've written about LLMS.TXT in the article about how getting one listed in an llms.txt directory mysteriously...] (/blog/is-llms-txt-useful) ``` ```html [It May Seem Cool - But Don't Make Your robots.txt a WAV file. April 16, 2025 ### It May Seem Cool - But Don't Make Your robots.txt a WAV file. What's this about Adding Other Media to robots.txt I recently came across John Mueller's (a Google Search advocate) blog. I ...] (/blog/it-may-seem-cool-but-dont-make-your-robots-txt-a-wav-file) ``` ```html [How to Have a Fast Mobile Website April 15, 2025 ### How to Have a Fast Mobile Website] (/blog/how-to-have-a-fast-mobile-website) ``` -------------------------------- ### Recent Post Card Styles Source: https://www.thecrawltool.com/blog/basics-of-technical-seo-for-new-website-owners CSS styles for the visual presentation of recent blog post cards, including layout, image handling, hover effects, and typography. ```css .recent-post-card { height: 100%; display: flex; flex-direction: column; background-color: white; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); overflow: hidden; transition: all 0.3s ease; } .recent-post-card:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } .recent-post-image-container { height: 12rem; overflow: hidden; } .recent-post-image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .recent-post-card:hover .recent-post-image { transform: scale(1.05); } .recent-post-content { padding: 1.5rem; display: flex; flex-direction: column; flex-grow: 1; } .recent-post-date { font-size: 0.75rem; color: #6b7280; margin-bottom: -0.75rem; } .recent-post-title { font-size: 1.125rem; font-weight: 700; color: #1f2937; margin-bottom: -1.0rem; transition: color 0.15s ease; } .recent-post-card:hover .recent-post-title { color: #4f46e5; } .recent-post-description { font-size: 0.875rem; color: #4b5563; } ``` -------------------------------- ### URL Parameter Redirection Source: https://www.thecrawltool.com/guide Checks for an 'access_key' parameter in the current URL. If found, it redirects the user to the '/timeline' page, passing the 'access_key' along. This is useful for authenticated or session-specific views. ```javascript let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/blog/new-project-dashboard Initializes Google Analytics tracking by pushing the current date and configuring the tracking ID. This is standard practice for website analytics. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/blog/seo-content-optimization-how-to-write-for-search-engines-and-readers Initializes Google Analytics tracking by setting up the dataLayer and configuring the analytics account. This snippet ensures website traffic is recorded and analyzed. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Mobile Menu Toggle Functionality Source: https://www.thecrawltool.com/guide Implements interactive functionality for a mobile navigation menu. It toggles the visibility of the menu when a button is clicked and closes it if the user clicks outside the menu or the button. ```javascript document.addEventListener('DOMContentLoaded', function() { const menuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); let isMenuOpen = false; // Toggle menu when button is clicked menuButton.addEventListener('click', function() { isMenuOpen = !isMenuOpen; mobileMenu.classList.toggle('hidden'); }); // Close menu when clicking outside document.addEventListener('click', function(event) { if (isMenuOpen && !mobileMenu.contains(event.target) && !menuButton.contains(event.target)) { mobileMenu.classList.add('hidden'); isMenuOpen = false; } }); }); ``` -------------------------------- ### Google Analytics Setup and URL Redirect Source: https://www.thecrawltool.com/the-pages-linking-redirects-report Initializes Google Analytics tracking and redirects the user if an 'access_key' parameter is present in the URL. This ensures proper tracking and handles specific user flows. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### The Crawl Tool Public API Introduction Source: https://context7_llms Announces the introduction of a Public API for The Crawl Tool, indicating significant development effort has been invested in its use. Further details on API endpoints, methods, and usage are expected. ```APIDOC API Reference: The Crawl Tool Public API Description: Provides programmatic access to The Crawl Tool's data and functionalities. This API allows users to integrate crawl data and insights into their own workflows and applications. Key Features: - Access to website crawl data. - Integration with external reporting tools. - Automation of SEO analysis tasks. Endpoints: (Specific endpoints and their details are not provided in the source text, but the existence of a Public API is confirmed.) Usage: (Usage examples and authentication methods are not provided in the source text.) Related Information: - Weekly Feature Update 3 announcement. - Feedback channel for suggestions: feedback@thecrawltool.com ``` -------------------------------- ### Get Reports API Source: https://www.thecrawltool.com/public-api Retrieves a list of available reports for a given project. Requires an API key for authorization and specifies JSON content type. Returns a list of report objects, each with an ID and name. ```APIDOC POST /public_api/getReports Description: Retrieves a list of available reports for a project. Request Headers: Authorization: Bearer Accept: application/json Content-Type: application/json Request Body: { "project_id": } Response Body (Success): { "success": true, "data": [ { "id": x, "name": "Broken Links" }, { "id": x, "name": "Meta Descriptions" }, { "id": 20, "name": "Meta Keywords" } ] } Response Body Fields: - id (numeric): The report ID. - name (string): The name of the report. ``` ```curl curl -X POST https://www.thecrawltool.com/public_api/getReports -H 'Authorization: Bearer ' -H 'Accept: application/json' -H 'Content-Type: application/json' -d '{"project_id": }' ``` -------------------------------- ### Blog Post Styling and Layout Source: https://www.thecrawltool.com/blog/using-ai-to-keep-a-tightly-themed-website Applies specific styling rules to blog post content, including font weights and sizes for headings (H1-H6), padding for paragraphs, and image styling within `.blogpostbody` and `.prose` classes. It also includes styles for blockquotes and links to ensure a consistent and readable blog presentation. ```CSS .blogpostbody H1, H2, H3, H4, H5, H6 { font-weight: bold !important; padding-bottom: 20px; padding-top: 20px; } .blogpostbody H1 { font-size: 2.15em !important; } .blogpostbody H2 { font-size: 1.8em !important; } .blogpostbody H3 { font-size: 1.5em !important; } .blogpostbody H4 { font-size: 1.3em !important; } .blogpostbody H5 { font-size: 1.2em !important; } .blogpostbody H6 { font-size: 1.10em !important; } P { padding-bottom: 10px; padding-top: 10px; line-height: 1.8; } .blog-content IMG { width: 50%; height: auto; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; } h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } A { color: #0909de; } .prose img { width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } /* Additional specific selector to catch all images in the post content */ .prose * img, .prose>img, .prose p img, .prose div img { border-radius: 0.5rem !important; width: 100%; height: auto; margin: 1.5rem 0; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; color: #1f2937; } .prose h2 { font-size: 1.5rem; line-height: 2rem; } .prose p { margin-bottom: 1rem; line-height: 1.75; } .prose ul, .prose ol { margin-left: 1.5rem; margin-bottom: 1rem; } .prose li { margin-bottom: 0.5rem; } .prose a { color: #4f46e5; text-decoration: none; } .prose a:hover { text-decoration: underline; } .wp-block-quote { margin-left: 30px; margin-right: 30px; margin-top: 30px; font-style: italic; text-align: center; color: #222123; border: 1px solid #b7b7b7; padding: 10px; margin-bottom: 30px; border-radius: 10px; background-color: #e9e9f9; } ``` -------------------------------- ### Website Styling and Font Definitions Source: https://www.thecrawltool.com/blog/introduction-of-linking-domains A collection of CSS rules defining font faces for 'Figtree' and applying various styles to HTML elements like headings (H1-H6), paragraphs (P), images, and blockquotes within blog content. It also includes responsive image styling and link styling. ```css @font-face { font-family: Figtree; font-style: normal; font-weight: 400; src: url(/cf-fonts/v/figtree/5.0.18/latin-ext/wght/normal.woff2); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; font-display: swap; } @font-face { font-family: Figtree; font-style: normal; font-weight: 400; src: url(/cf-fonts/v/figtree/5.0.18/latin/wght/normal.woff2); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-display: swap; } @font-face { font-family: Figtree; font-style: normal; font-weight: 600; src: url(/cf-fonts/v/figtree/5.0.18/latin/wght/normal.woff2); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; font-display: swap; } @font-face { font-family: Figtree; font-style: normal; font-weight: 600; src: url(/cf-fonts/v/figtree/5.0.18/latin-ext/wght/normal.woff2); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF; font-display: swap; } .blogpostbody H1, H2, H3, H4, H5, H6 { font-weight: bold !important; padding-bottom: 20px; padding-top: 20px; } .blogpostbody H1 { font-size: 2.15em !important; } .blogpostbody H2 { font-size: 1.8em !important; } .blogpostbody H3 { font-size: 1.5em !important; } .blogpostbody H4 { font-size: 1.3em !important; } .blogpostbody H5 { font-size: 1.2em !important; } .blogpostbody H6 { font-size: 1.10em !important; } P { padding-bottom: 10px; padding-top: 10px; line-height: 1.8; } .blog-content IMG { width: 50%; height: auto; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; } h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } A { color: #0909de; } .prose img { width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } .prose * img, .prose>img, .prose p img, .prose div img { border-radius: 0.5rem !important; width: 100%; height: auto; margin: 1.5rem 0; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; color: #1f2937; } .prose h2 { font-size: 1.5rem; line-height: 2rem; } .prose p { margin-bottom: 1rem; line-height: 1.75; } .prose ul, .prose ol { margin-left: 1.5rem; margin-bottom: 1rem; } .prose li { margin-bottom: 0.5rem; } .prose a { color: #4f46e5; text-decoration: none; } .prose a:hover { text-decoration: underline; } .wp-block-quote { margin-left: 30px; margin-right: 30px; margin-top: 30px; font-style: italic; text-align: center; color: #222123; border: 1px solid #b7b7b7; padding: 10px; margin-bottom: 30px; border-radius: 10px; background-color: #e9e9f9; } ``` -------------------------------- ### Get Report Rows Source: https://context7_llms Retrieves the data rows for a specific report ID. The report ID must be provided in the JSON request body. Supports pagination via an optional 'page' parameter. Returns a maximum of 100,000 rows per request. ```APIDOC Method: POST Endpoint: /getReportRows Request: curl -X POST https://www.thecrawltool.com/public_api/getReportRows \ -H 'Authorization: Bearer ' \ -H 'Accept: application/json' \ -H 'Content-Type: application/json' \ -d '{"report_id": }' Optional Parameter: - page: Integer, specifies the page number to retrieve. Response Example: {"success":true,"data":{"rows":[{"cell_1":"Source URL","cell_2":"Broken Link", ...},{"cell_1":"data1","cell_2":"data2", ...}],"total_rows":3,"current_page":1,"total_pages":1}} Key Fields: - rows: Array of data rows. The first row contains column headers (cell_1, cell_2, etc.). - total_rows: Total number of rows available for the report. - current_page: The current page number returned. - total_pages: The total number of pages available. ``` -------------------------------- ### Google Analytics and URL Redirection Source: https://www.thecrawltool.com/blog/understanding-semantic-vector-space-for-seo-professionals This snippet includes Google Analytics initialization and configuration, along with JavaScript logic to redirect the user if an 'access_key' parameter is present in the URL. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### Website Tracking Pixel Script Source: https://www.thecrawltool.com/blog/basics-of-technical-seo-for-new-website-owners This JavaScript snippet creates an image element and sets its source to a tracking pixel URL. It dynamically includes the current page path and referrer URL, both encoded for safe transmission. This is commonly used for website analytics and user tracking purposes. ```JavaScript var i = document.createElement("img"); var p = document.location.pathname; i.src = "https://www.thecrawltool.com/pixel?id=35&url=" + encodeURI(p) + "&ref=" + encodeURI(document.referrer.split("?")[0]); ``` -------------------------------- ### Website Tracking Pixel Source: https://www.thecrawltool.com/guide This JavaScript code creates an image element to send tracking data, including the current URL and referrer, to a tracking server. It's typically used for website analytics and user behavior monitoring. ```javascript var i = document.createElement("img"); var p = document.location.pathname; i.src = "https://www.thecrawltool.com/pixel?id=35&url=" + encodeURI(p) + "&ref=" + encodeURI(document.referrer.split("?")[0]); ``` -------------------------------- ### Mobile Menu Toggle Functionality Source: https://www.thecrawltool.com/blog/introducing-the-crawl-tool JavaScript code to manage a mobile navigation menu. It handles toggling the menu's visibility when a button is clicked and closing it when a click occurs outside the menu or button. ```javascript document.addEventListener('DOMContentLoaded', function() { const menuButton = document.getElementById('mobile-menu-button'); const mobileMenu = document.getElementById('mobile-menu'); let isMenuOpen = false; // Toggle menu when button is clicked menuButton.addEventListener('click', function() { isMenuOpen = !isMenuOpen; mobileMenu.classList.toggle('hidden'); }); // Close menu when clicking outside document.addEventListener('click', function(event) { if (isMenuOpen && !mobileMenu.contains(event.target) && !menuButton.contains(event.target)) { mobileMenu.classList.add('hidden'); isMenuOpen = false; } }); }); ``` -------------------------------- ### Font Face and Google Analytics Setup Source: https://www.thecrawltool.com/header-tags-report Defines font face rules for the application using CSS @font-face directives and initializes Google Analytics tracking with gtag. It also includes logic to redirect based on URL parameters. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/free-credits Initializes Google Analytics tracking with a specific configuration ID. This snippet is typically found in website headers to track user activity and campaign performance. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Google Analytics and URL Redirect Script Source: https://www.thecrawltool.com/editing-a-project Initializes Google Analytics tracking and redirects the user to the timeline page if an 'access_key' query parameter is present in the URL. This script ensures proper analytics setup and handles specific user session redirects. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); let urlParams = new URLSearchParams(window.location.search); if (urlParams.has('access_key')) { window.location.href = '/timeline?access_key=' + urlParams.get('access_key'); } ``` -------------------------------- ### Website Tracking Pixel Implementation Source: https://www.thecrawltool.com/your-first-crawl This JavaScript code snippet dynamically creates an image element and sets its source to a tracking pixel URL. It appends the current page's path and referrer information to the URL, likely for website analytics or tracking purposes. ```javascript var i = document.createElement("img"); var p = document.location.pathname; i.src = "https://www.thecrawltool.com/pixel?id=35&url=" + encodeURI(p) + "&ref=" + encodeURI(document.referrer.split("?")[0]); ``` -------------------------------- ### Google Analytics Initialization Source: https://www.thecrawltool.com/managing-access-keys Initializes Google Analytics tracking for the page. It sets up the data layer and configures the analytics with a specific tracking ID. ```javascript window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'AW-16915294476'); ``` -------------------------------- ### Blog Post Styling and Typography Source: https://www.thecrawltool.com/blog/introducing-the-crawl-tool CSS rules for styling blog post content, including headings, paragraphs, images, links, and blockquotes. It defines font styles, sizes, margins, and responsive image behavior. ```css .blogpostbody H1, H2, H3, H4, H5, H6 { font-weight: bold !important; padding-bottom: 20px; padding-top: 20px; } .blogpostbody H1 { font-size: 2.15em !important; } .blogpostbody H2 { font-size: 1.8em !important; } .blogpostbody H3 { font-size: 1.5em !important; } .blogpostbody H4 { font-size: 1.3em !important; } .blogpostbody H5 { font-size: 1.2em !important; } .blogpostbody H6 { font-size: 1.10em !important; } P { padding-bottom: 10px; padding-top: 10px; line-height: 1.8; } .blog-content IMG { width: 50%; height: auto; margin-left: auto; margin-right: auto; padding-top: 20px; padding-bottom: 20px; } h1 { font-size: 36px } h2 { font-size: 30px } h3 { font-size: 24px } h4 { font-size: 20px } h5 { font-size: 18px } h6 { font-size: 16px } A { color: #0909de; } .prose img { width: 100%; height: auto; border-radius: 0.5rem; margin: 1.5rem 0; } .prose * img, .prose>img, .prose p img, .prose div img { border-radius: 0.5rem !important; width: 100%; height: auto; margin: 1.5rem 0; } .prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 { font-weight: bold; margin-top: 1.5rem; margin-bottom: 1rem; color: #1f2937; } .prose h2 { font-size: 1.5rem; line-height: 2rem; } .prose p { margin-bottom: 1rem; line-height: 1.75; } .prose ul, .prose ol { margin-left: 1.5rem; margin-bottom: 1rem; } .prose li { margin-bottom: 0.5rem; } .prose a { color: #4f46e5; text-decoration: none; } .prose a:hover { text-decoration: underline; } .wp-block-quote { margin-left: 30px; margin-right: 30px; margin-top: 30px; font-style: italic; text-align: center; color: #222123; border: 1px solid #b7b7b7; padding: 10px; margin-bottom: 30px; border-radius: 10px; background-color: #e9e9f9; } ```