ArchiPro Pixel - Cross-site Performance
      Back to home
      1. ArchiPro Knowledge Base
      2. Analytics
      3. ArchiPro Pixel - Cross-site Performance

      How to Install ArchiPro Pixel

      Find out how to install ArchiPro Pixel on your website.

        What is ArchiPro Pixel?

        A new way to visualise the visitor behaviour between your ArchiPro profile and your website. We use an ArchiPro Pixel code that is installed on your website to make this connection. Consider it like digital footprints of a user's website behaviour between both websites. Learn more here. 

        Where to find the ArchiPro Pixel code

        Within Business Manager, head to the Tools > Analytics tab, then click ArchiPro Pixel.

        Scroll down this page and find the Copy this code section. Highlight and copy the code to install ArchiPro Pixel by using one of the following methods below. The ArchiPro Pixel installation should take a maximum of 10-15 minutes.

        code

        Ways to install ArchiPro Pixel

        Please get in touch with your Client Director if you're not using one of the following platforms for your website. 

        Jump to your platform:

        1. Google Tag Manager
        2. WordPress / WooCommerce
        3. Squarespace
        4. Wix
        5. Shopify

        Google Tag Manager 

        If you already have Google Tag Manager installed and are using this to manage other tags such as Google Analytics, Facebook, and Hotjar, then the process is the same.

        See Google Tag Manager instructions.

        1. Go to https://tagmanager.google.com.
        2. Sign in to your Google Account. Learn how to create a Google Account.
        3. On the Tag Manager container you want to edit.
        4. In the Workspace tab, click Tags (on the left).
        5. In the Tags section, click New (top right).
        6. In the panel, follow these steps:
          1. Replace Untitled Tag with the name of your tag (for example, 'Google Analytics 4').
          2. In Tag Configuration, choose the tag you want to create. Learn more about tags.
          3. In Triggering, choose when a specific tag should fire. Learn more about each trigger type.
        7. Click Save.

        Next steps

        Make sure the tags you've added to your website behave as intended. Then, publish the changes you've made to your website.

        Verify tags

        1. Go to https://tagmanager.google.com.
        2. Sign in to your Google Account. Learn how to create a Google Account.
        3. On the Tag Manager container you want to edit.
        4. In the Workspace tab, click Preview (top right) to launch Google Tag Assistant in a new tab.
        5. Enter your website URL and click Connect. Learn to debug with Tag Assistant.

        Publish tags

        1. In the Workspace tab, click Submit (top right)
        2. In the Submission Configuration section, follow these steps:
          1. Select Publish and Create Version to publish the changes to your site. To save the changes without publishing them, select Create Version instead.
          2. Enter a name and description for the version.
        3. Select Activity History to review the changes you've made since the previous version.
        4. Click Publish (top right).

        Wordpress / WooCommerce

        The header code injection is a direct way to install the ArchiPro Pixel code to your WordPress or WooCommerce site. 

        If you are unsure how to do this, it may be best to consult with your website team/developer about installing the ArchiPro Pixel code. Or alternatively, ask your Client Manager to help if you're stuck.

        It will take a quick 15 minutes for your web team to insert the header code. 

        See instructions from WordPress:

        How to Add Code to WordPress Header and Footer With a Plugin

        How to Manually Add Code to WordPress Header and Footer

        Squarespace

        Code injection is a direct way to install the ArchiPro Pixel code to your Squarespace site. 

        If you are unsure how to do this, it may be best to consult with your website team/developer about installing the ArchiPro Pixel code. Or alternatively, ask your Client Manager to help if you're stuck.

        It will take a quick 15 minutes for your web team to insert the header code. 

        See instructions from Squarespace:

        Using Code Injection on Squarespace

        Wix

        Directly embed your ArchiPro Pixel code on your Wix site. 

        See instructions from Wix:

        Embedding Custom Code on Your Site

        1. Go to Settings in your site's dashboard.
        2. Click the Custom Code tab in the Advanced section.
        3. Click + Add Custom Code at the top right.
        4. Paste the code snippet in the text box. 
        5. Enter a name for your code.
          Tip: Give it a name that is easy to recognize so you can quickly identify it later. 
        6. Select an option under Add Code to Pages:
          1. All pages: This adds the code to all of your site's pages, including any new pages that you create in the future. Choose whether to load the code only once per visit, or on each page your visitor opens.
          2. Choose specific pages: Use the drop-down menu to select the relevant pages.
        7. Choose where to place your code under Place Code in:.
          1. Head
          2. Body - start
          3. Body - end
        8. Click Apply.

        Shopify

        The method of installing ArchiPro Pixel on a Shopify website is similar to the Header code injection method. Follow the steps below and watch the video to learn how.

        1. Navigate to the Themes section in the Online Store menu in your Shopify Store.
        2. Click on Edit HTML/CSS or Edit Code in the Actions drop-down menu of the Current Theme section.
        3. Click on “theme.liquid” in the Layout section.
        4. Paste the ArchiPro Pixel code just before the </head> tag and Sav

        How do I know if ArchiPro Pixel is installed correctly?

        You can find your 'tracking status' on the top right of your ArchiPro Pixel installation page, as shown in the image below. If the status is green with the title Tracking, the code is installed, if the status is grey with the title Not tracking, it has not been installed. It may take some time for the status to turn green after installing the code.

        Not Tracking:

         

        Tracking:

         

        If you have any questions or queries, don't hesitate to reach out to your Client Director.