This support article has instructions on how to install Nutshell Analytics on some popular website builders. The information was pulled from support articles from the below company's websites - if you find that the information on this article has become out of date, please let us know and we will research and update the information.
For information on how Nutshell Analytics works, please review this article.
Google Tag Manager:
Log in to Google Tag Manager: Go to the Google Tag Manager website and log in with your Google account.
Access Your Container: Select the container for the website where you want to add code.
Navigate to Tags: In the left-hand sidebar, click on "Tags."
Create a New Tag: Click the "New" button to create a new tag.
Configure Tag Type: Choose the appropriate tag type based on your requirements (e.g., Google Analytics, Facebook Pixel, Custom HTML).
Add Code: In the tag configuration settings, look for a field where you can add code. If you're adding custom HTML or other code, choose the "Custom HTML" tag type.
Paste Code: Paste the code you want to add into the designated field. This might include tracking codes, scripts, or other snippets.
Configure Trigger: Scroll down to the "Triggering" section and choose when the tag should fire. This defines the conditions under which the code will be executed.
Save the Tag: Once you've added the code and configured the trigger, save the tag.
Preview and Debug (Optional): Use the "Preview" mode in Google Tag Manager to test your changes before publishing. This allows you to see how your tags behave in a debug environment.
Submit Changes: After verifying that everything is set up correctly in the preview mode, click the "Submit" button in the upper-right corner to publish your changes.
Publish Changes: Confirm and publish the changes to make the new tag live on your website.
If you have specific requirements or encounter difficulties, consult the documentation provided by Google Tag Manager or seek assistance from a web developer or digital marketing specialist.
Wordpress:
Method 1:
Install the Nutshell Analytics Wordpress plugin
Method 2:Editing Theme Files
Log in to WordPress: Log in to your WordPress admin panel.
Access Theme Editor: In the admin dashboard, go to "Appearance" -> "Theme Editor."
Locate header.php: On the right side, find and select the header.php file. This file typically contains the <head> section.
Find the <head> Section: Look for the <head> section within the header.php file. It usually includes meta tags, link tags, and other elements related to the document's head.
Make Changes: Add or modify elements within the <head> section as needed. This might involve adding custom meta tags, linking to stylesheets, or including JavaScript.
Save Changes: Save the changes to the header.php file.
Clear Cache: After making changes, clear any caching plugins or server-side caches to ensure the modifications take effect.
Method 3: Using a Plugin (e.g., Yoast SEO)
Install Yoast SEO Plugin: If you don't have it already, install and activate the Yoast SEO plugin from the WordPress plugin repository.
Access SEO Settings: In the WordPress admin panel, go to "SEO" -> "Search Appearance."
Edit HTML Head: Within the "Search Appearance" settings, look for an option related to the HTML head. This is where you can add custom code to the <head> section.
Make Changes: Add or modify elements within the HTML head section as needed.
Save Changes: Save the changes made through the Yoast SEO plugin.
Clear Cache: After making changes, clear any caching plugins or server-side caches.
Always make a backup of your theme files or database before making changes, especially if you're not familiar with code modifications. If you encounter difficulties or need more advanced customization, consider seeking assistance from a developer or referring to WordPress community forums and documentation.
Joomla:
Accessing Files:
Use FTP or the file manager provided by your hosting provider to access your Joomla site's files.
Locate the Template: Navigate to the templates directory in your Joomla installation. This is where the template files are stored.
Choose the Active Template: Identify the template that is currently active on your site. This is usually set in the Joomla administrator under "Extensions" -> "Templates."
Edit index.php: Inside the template folder, locate and open the index.php file of your active template using a text editor (e.g., Notepad, VS Code).
Find the <head> Section: Look for the <head> section within the index.php file. It is typically located near the top and contains meta tags, link tags, and other elements related to the document's head.
Make Changes:
Edit the content within the <head> section as needed. You can add or modify meta tags, link to stylesheets, include JavaScript, or make other adjustments.
Save Changes: Save the changes to the index.php file.
Template Overrides (Optional): To ensure your changes aren't overwritten during template updates, consider using template overrides. Copy the edited index.php file to the html folder within your template folder (create the folder if it doesn't exist).
Clear Cache: After making changes, it's a good practice to clear the Joomla cache. This can be done in the Joomla administrator under "System" -> "Clear Cache."
Check Your Site: Visit your Joomla site and inspect the source code to ensure that the changes in the <head> section are reflected.
Drupal:
Accessing Files: Use FTP or the file manager provided by your hosting provider to access your Drupal site's files.
Locate the Theme: Navigate to the themes directory in your Drupal installation. Themes are usually located in the themes directory within the sites/all or themes directory, depending on your Drupal version.
Choose the Active Theme: Identify the theme that is currently active on your site. This can be set in the Drupal administrator under "Appearance."
Edit template.php or themeName.theme: Inside the theme folder, look for a file named template.php or themeName.theme (replace "themeName" with the actual name of your theme). Open this file using a text editor.
Find the <head> Section: Look for the function YOURTHEMENAME_preprocess_html(&$variables) within the template.php or themeName.theme file. This function is responsible for preprocessing HTML output, including the <head> section.
Make Changes: Within the YOURTHEMENAME_preprocess_html function, you can add or modify elements within the $variables['head'] array. This array typically contains meta tags, link tags, and other elements related to the document's head.
Save Changes: Save the changes to the template.php or themeName.theme file.
Clear Cache: After making changes, clear the Drupal cache to ensure the modifications take effect. This can be done in the Drupal administrator under "Configuration" -> "Performance."
Check Your Site: Visit your Drupal site and inspect the source code to ensure that the changes in the <head> section are reflected.
It's essential to note that the exact file names and structure may vary based on your Drupal version and theme. Always back up your files before making changes, especially if you're not familiar with the theme structure. If you have specific requirements or encounter issues, feel free to provide more details for further assistance.
Magento:
Accessing Files: Use FTP or the file manager provided by your hosting provider to access your Magento site's files.
Locate the Theme: Navigate to the app/design/frontend directory in your Magento installation. Themes are usually located in the frontend directory within the app/design path.
Choose the Active Theme: Identify the theme that is currently active on your site. This can be set in the Magento admin panel under "Content" -> "Design" -> "Configuration."
Edit theme.xml or default_head_blocks.xml: Inside the theme folder, look for a file named theme.xml or default_head_blocks.xml. Open this file using a text editor.
Find the <head> Section: Look for XML nodes or instructions related to the <head> section. These nodes might include meta tags, link tags, and other elements related to the document's head.
Make Changes: Within the XML file, you can add or modify elements within the <head> section as needed. This might involve adding custom meta tags, linking to stylesheets, or including JavaScript.
Save Changes: Save the changes to the theme.xml or default_head_blocks.xml file.
Clear Cache: After making changes, clear the Magento cache to ensure the modifications take effect. This can be done in the Magento admin panel under "System" -> "Cache Management."
Check Your Site: Visit your Magento site and inspect the source code to ensure that the changes in the <head> section are reflected.
It's essential to note that the exact file names and structure may vary based on your Magento version and theme. Always back up your files before making changes, especially if you're not familiar with the theme structure. If you have specific requirements or encounter issues, refer to Magento's official documentation or community forums for more detailed guidance.
Wix:
Log into Wix: Go to the Wix website and log in to your account.
Access the Editor: Open the Wix Editor for the website you want to edit.
Go to Site Settings: In the Wix Editor, look for the "Settings" option, often represented by a gear icon. Click on it to open the site settings.
Open SEO Settings:
Within the site settings, there should be an option related to SEO (Search Engine Optimization). Click on it to access the SEO settings.
Edit the <head> Section: Look for a field or section where you can add custom code or edit the existing HTML. This is where you can make changes to the <head> section.
Make Changes: Add or modify elements within the <head> section as needed. You can include meta tags, link to stylesheets, add scripts, etc.
Save Changes: Save the changes you made to the SEO settings.
Preview and Publish: Before publishing your changes, use the preview option to see how the modified <head> section will appear. If everything looks good, publish the site to make the changes live.
It's important to note that Wix may have limitations compared to more flexible platforms in terms of direct code editing. If you need more advanced customization options, you may want to explore the Wix Code feature, which allows for more extensive code modifications. However, Wix Code requires some coding knowledge.
If you have specific requirements or encounter difficulties while making changes, you may refer to Wix's official documentation or support for more detailed guidance.
Shopify:
Accessing Theme Files: Log in to your Shopify admin panel.
Navigate to the Theme Editor: In the Shopify admin, go to "Online Store" -> "Themes."
Access HTML/CSS Editor: Find the current theme you are using and click on "Actions." From the dropdown, choose "Edit code." This will open the HTML/CSS editor.
Locate theme.liquid: Inside the editor, look for a file named theme.liquid. This file typically contains the structure of your theme, including the <head> section.
Find the <head> Section: Locate the <head> section within the theme.liquid file. It is where meta tags, link tags, and other elements related to the document's head are defined.
Make Changes: Add or modify elements within the <head> section as needed. This might involve adding custom meta tags, linking to stylesheets, or including JavaScript.
Save Changes: Save the changes to the theme.liquid file.
Preview Changes: Before making the changes live, you can preview them by going back to the Shopify admin and clicking "Online Store" -> "Themes." Use the "Preview" button to see how the modified <head> section will appear.
Publish Changes: If everything looks good in the preview, click "Actions" and choose "Publish" to make the changes live.
It's important to note that modifying theme files directly in Shopify should be done carefully. Always make a backup of your theme before making changes, especially if you're not familiar with the Liquid templating language used by Shopify. If you encounter difficulties or need more advanced customization, you might consider hiring a Shopify expert or consulting Shopify's official documentation and community forums for guidance.
Squarespace:
Log in to Squarespace: Go to the Squarespace website and log in to your account.
Access the Site Editor: Once logged in, select the website you want to edit. Click on the "Edit Site" or "Edit" button to access the site editor.
Go to Design Settings: In the site editor, navigate to the "Design" or "Design Settings" section. This is where you can customize the overall design of your site.
Open Custom CSS: Look for an option related to custom CSS or code injection. In Squarespace, this is often found in the design settings under "Custom CSS" or "Custom Code."
Edit the <head> Section: Within the custom CSS or code injection section, you can add or modify code related to the <head> section. This might include custom meta tags, link tags, or other elements.
Make Changes: Add or modify elements within the custom code section as needed to reflect the changes you want in the <head> section.
Save Changes: Save the changes to apply the custom code to your Squarespace site.
Preview Changes: Before making the changes live, you can preview them by navigating back to the site editor and using the preview option.
Publish Changes: If everything looks good in the preview, click "Save" or "Apply" to make the changes live on your Squarespace site.
It's important to note that Squarespace may have some limitations compared to platforms that allow direct file editing. If you need more advanced customization or have specific requirements, you may consider reaching out to Squarespace support or consulting their official documentation and community forums for guidance.
Weebly:
Log in to Weebly: Go to the Weebly website and log in to your account.
Access Site Editor: Once logged in, select the website you want to edit. Click on the "Edit Site" or a similar option to access the site editor.
Theme Options or Settings: Navigate to the theme options or settings. This may be under "Theme" or "Design" in the site editor.
Edit Header/Footer Code: Look for an option to edit the header or footer code. This is where you can add custom code, including modifications to the <head> section.
Add or Modify Code: Within the header/footer code section, you can add or modify code related to the <head> section. This may include custom meta tags, link tags, or other elements.
Save Changes: Save the changes to apply the custom code to your Weebly site.
Preview Changes: Before publishing the changes, use the preview option to see how the modifications will appear on your site.
Publish Changes: If everything looks good in the preview, click "Publish" or a similar option to make the changes live on your Weebly site.
It's important to note that Weebly is designed to be user-friendly and may not provide the same level of customization as platforms with more advanced coding options. If you have specific requirements that cannot be achieved through the provided options, you may need to explore other platforms or consult Weebly's support and documentation for guidance.