Installing a service worker in the root directory of my HubSpot hosted website.

AdamZen
Contributor

Hello,

 

Aisha from support has referred me to post my question here. 

 

I am trying to install a service worker in the root directory of my website, as per the instructions given here:

https://support.subscribers.com/support/solutions/articles/35000103538-how-to-install-the-service-wo...

 

How do I get into the "root directory of my website", as that is part of the instructions.

0 Upvotes
11 Replies 11
Stephanie-OG
Key Advisor

In the instructions they refer to FileZilla which is a FTP tool. You can access HubSpot through FTP by following the instructions here

 

According to this thread, however, you can to this "using the proxy feature in URL mappings. allows you to make it seem like a file is anywhere you want", so perhaps that's a better option.

 


Stephanie O'Gay Garcia

HubSpot CMS Design & Development

Website | Contact

 

If this helped, please mark it as the solution to your question, thanks!

AdamZen
Contributor

Thank you for your reply.

Can you provide specific instructions regarding the second solution as the thread you are referring has no details?

0 Upvotes
amwilie
Key Advisor | Elite Partner

Hey @AdamZen ,

For the proxy url mapping:

  • Upload your file to the file manager
  • Go to Settings > Domains & URLs > Url Redirects
  • Click the Add URL Redirect button
  • Redirect Type : Standard
  • Original Url : An unused root path you want to associate the file with (ex: /file-name.js)
  • Redirect to : The file manager URL of the file you uploaded (ex: /hubfs/[PORTAL ID]/folder/file-name.js)
  • Click More Options
  • Redirect style: Proxy
  • Select to Ignore trailing slash and Ignore protocol
  • Click Add URL Redirect

This will create a sort of 'mask' to make it seem like the file is at the root URL you have chosen.

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

AdamZen
Contributor

Hi Alyssa,

 

Thank you for the step by step instructions, exactly what I need.

 

So I followed all the steps, but when I clicked the the last step "Add URL Redirect", the URL Redirect did not add, instead I got the following message:

 

"Proxy URL redirects: The destination URL must point to a HubSpot hosted domain."

 

I used " https://www.smilecaredental.ca/firebase-messaging-sw.js " as the original URL and Redirect to: " https://cdn2.hubspot.net/hubfs/4006122/firebase-messaging-sw.js ". I got the redirect URL from "File Details" within File Manager.

 

I would greatly appreciate it if you could point out the solution to not being able to create the redirect.

 

Cheers,

Adam

0 Upvotes
amwilie
Key Advisor | Elite Partner

@AdamZen 

Can you try removing the https://cdn2.hubspot.net part? So instead it's just /hubfs/4006122/firebase-messaging-sw.js

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

AdamZen
Contributor

Hello Alyssa,

 

You are AWESOME! That worked 🙂 I was able to add the redirect.

 

However, this redirect is one part of the greater goal of adding subscribers.com to my HubSpot hosted website. I did a "Verify Installation" through subscribers.com and the result was negative. I went on my website and subscribers does not appear.

 

If you can help me trouble shoot, that would be great.

 

To retrace my steps, chronolgically:

1) I precisely followed all steps 1 to 11 found:

https://support.subscribers.com/support/solutions/articles/35000013040-google-tag-manager-gtm-instal...

2) step 12. of the above instructions was to “install a service worker in the root directory of your website”, which I did using your method.

 

Some things that come to mind as possible causes of subscribers not working on my website:

a) as per the instructions above I created a Google Tag Manager account and the tag. However, nowehere in the process was there a verifiction step that my website is my website, which I find strange becasue it seems to me that I can create tags for any website without the website owner's permission...? So maybe this tag is not attached to my website?

b) the instructions above do not mention anything about installing Google Tag Manager on my website. Is it assumed by those instructions that GTM is already installed on my website and becasuse it is NOT installed on my website then subscribers is not working?

 

Any other ideas?

 

You have been great help becasue I have been stuck for a month regarding installing subscribers.com on my website and finally I feel like I am making progress with your help 🙂

 

Cheers,

Adam

 

0 Upvotes
amwilie
Key Advisor | Elite Partner

@AdamZen 
There is no verification for GTM because you need to add the GTM code to your website for it to work.

In Hubspot you'll want to go to Settings > Pages and in Site header HTML paste the following code, replacing GTM-XXXX with your container ID. You can find your container ID in your GTM dashboard.

 

gtm-id.png

 

 

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->


Then in Site footer HTML paste the following code, again replacing GTM-XXX with your container ID.

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Then click the Save button.

 

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

AdamZen
Contributor

🙂 🙂 🙂

 

I added to the Header as instructed; there was nothing in the header to begin with.

 

The footer has some info in it:

1 <!-- Start of HubSpot Embed Code -->
2 <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/4006122.js"></script>
3 <!-- End of HubSpot Embed Code -->

 

Where should I add into the footer? Above the existing footer, below existing footer, within the existing footer or replace the footer altogether with the new footer?

 

Cheers,

Adam

0 Upvotes
amwilie
Key Advisor | Elite Partner

You can place above OR below.

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

AdamZen
Contributor

Thank you, I did as instructed. 

 

I verified via Subscribers and unfortunately I got " We were unable to verify your site". 

 

I think with your help all the steps were done correctly... not sure where to trouble shoot from here... one thing I can think of is that the order of the steps may have mattered... as per above I created the Google tag (3 days ago) before installing GTM on my website (did it today) , in retrospect it should have been the reverse? 

ANY other ideas?

 

Cheers,

Adam

0 Upvotes
amwilie
Key Advisor | Elite Partner

Hmm. I'm seeing the Subscribers tag on your site now and the service worker file is properly showing up at https://www.smilecaredental.ca/firebase-messaging-sw.js .

 

Could there be something on the Subscribers side not set up correctly?

border

Alyssa Wilie

Web Developer at LyntonWeb

If this answer solved your question, please mark it as the solution!

0 Upvotes